@charset "UTF-8";

/* =====================================================
  LOCAL FONTS
===================================================== */

@font-face{
  font-family:"Cinzel";
  src:url("../fonts/cinzel-400.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Cinzel";
  src:url("../fonts/cinzel-500.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Cinzel";
  src:url("../fonts/cinzel-600.woff2") format("woff2");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Cormorant Garamond";
  src:url("../fonts/cormorant-garamond-400.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Cormorant Garamond";
  src:url("../fonts/cormorant-garamond-500.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Cormorant Garamond";
  src:url("../fonts/cormorant-garamond-600.woff2") format("woff2");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}


/* =====================================================
  ROOT TOKENS
  type / space / color / font
===================================================== */

:root{
  --icz-bg:#ffffff;
  --icz-ink-strong:rgba(0,0,0,.84);
  --icz-ink:rgba(0,0,0,.72);
  --icz-ink-soft:rgba(0,0,0,.56);
  --icz-ink-faint:rgba(0,0,0,.42);
  --icz-line:rgba(0,0,0,.10);

  --icz-en:"Cinzel", serif;
  --icz-ja:"Cormorant Garamond", serif;

  /* typography scale */
  --icz-fz-14:14px;
  --icz-fz-12:12px;
  --icz-fz-10:10px;
  --icz-fz-8:8px;

  /* spacing scale */
  --icz-space-8:8px;
  --icz-space-13:13px;
  --icz-space-21:21px;
  --icz-space-34:34px;
  --icz-space-55:55px;
  --icz-space-89:89px;

  /* reveal system */
  --icz-reveal-distance:10px;
  --icz-reveal-duration:.95s;
  --icz-reveal-delay:.08s;
  --icz-reveal-ease:cubic-bezier(.22,.61,.36,1);
}


/* =====================================================
  BASE
  reset / document / element defaults
===================================================== */

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  min-height:100%;
}

body{
  margin:0;
  min-height:100vh;
  min-height:100svh;
  background:var(--icz-bg);
  color:var(--icz-ink-strong);

  font-family:var(--icz-ja);
  font-size:14px;
  line-height:1.8;
  letter-spacing:.03em;

  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img,
picture,
svg,
video,
canvas{
  display:block;
  max-width:100%;
  height:auto;
}

img{
  border:0;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
textarea,
select{
  font:inherit;
  color:inherit;
}

button{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:none;
  padding:0;
  cursor:pointer;
}

ul,
ol{
  margin:0;
  padding:0;
}

li{
  margin:0;
}

p,
figure,
blockquote,
dl,
dd{
  margin:0;
}

h1,
h2,
h3,
h4,
h5,
h6{
  margin:0;
  font:inherit;
}

table{
  border-collapse:collapse;
  border-spacing:0;
}

iframe{
  border:0;
}

:focus-visible{
  outline:1px solid rgba(0,0,0,.28);
  outline-offset:2px;
}

::selection{
  background:rgba(0,0,0,.08);
}


/* =====================================================
  UTILITIES
===================================================== */

.icz-hidden-title,
.screen-reader-text{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

.icz-visually-hidden{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}


/* =====================================================
  TYPOGRAPHY SYSTEM
  14 / 12 / 10 / 8
===================================================== */

.icz-title-14{
  font-size:var(--icz-fz-14);
  line-height:1.45;
  letter-spacing:.06em;
  font-weight:400;
  color:var(--icz-ink);
}

.icz-kicker-12{
  font-size:var(--icz-fz-12);
  line-height:1.2;
  letter-spacing:.22em;
  font-weight:400;
  color:var(--icz-ink-soft);
}

.icz-small-10{
  font-size:var(--icz-fz-10);
  line-height:1.6;
  letter-spacing:.12em;
  font-weight:400;
  color:var(--icz-ink-soft);
}

.icz-micro-8{
  font-size:var(--icz-fz-8);
  line-height:1.6;
  letter-spacing:.12em;
  font-weight:400;
  color:var(--icz-ink-faint);
}


/* =====================================================
  SPACING UTILITIES
  8 / 13 / 21 / 34 / 55 / 89
===================================================== */

.icz-mt-8{ margin-top:var(--icz-space-8); }
.icz-mt-13{ margin-top:var(--icz-space-13); }
.icz-mt-21{ margin-top:var(--icz-space-21); }
.icz-mt-34{ margin-top:var(--icz-space-34); }
.icz-mt-55{ margin-top:var(--icz-space-55); }
.icz-mt-89{ margin-top:var(--icz-space-89); }

.icz-mb-8{ margin-bottom:var(--icz-space-8); }
.icz-mb-13{ margin-bottom:var(--icz-space-13); }
.icz-mb-21{ margin-bottom:var(--icz-space-21); }
.icz-mb-34{ margin-bottom:var(--icz-space-34); }
.icz-mb-55{ margin-bottom:var(--icz-space-55); }
.icz-mb-89{ margin-bottom:var(--icz-space-89); }

.icz-pt-8{ padding-top:var(--icz-space-8); }
.icz-pt-13{ padding-top:var(--icz-space-13); }
.icz-pt-21{ padding-top:var(--icz-space-21); }
.icz-pt-34{ padding-top:var(--icz-space-34); }
.icz-pt-55{ padding-top:var(--icz-space-55); }
.icz-pt-89{ padding-top:var(--icz-space-89); }

.icz-pb-8{ padding-bottom:var(--icz-space-8); }
.icz-pb-13{ padding-bottom:var(--icz-space-13); }
.icz-pb-21{ padding-bottom:var(--icz-space-21); }
.icz-pb-34{ padding-bottom:var(--icz-space-34); }
.icz-pb-55{ padding-bottom:var(--icz-space-55); }
.icz-pb-89{ padding-bottom:var(--icz-space-89); }


/* =====================================================
  REVEAL SYSTEM
===================================================== */

.icz-reveal{
  opacity:0;
  transform:translateY(var(--icz-reveal-distance));
  transition:
    opacity var(--icz-reveal-duration) var(--icz-reveal-ease),
    transform var(--icz-reveal-duration) var(--icz-reveal-ease);
  transition-delay:var(--icz-reveal-delay);
  will-change:opacity, transform;
}

.icz-reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

.icz-reveal-order-1{
  transition-delay:.08s;
}

.icz-reveal-order-2{
  transition-delay:.16s;
}

.icz-reveal-order-3{
  transition-delay:.24s;
}

.icz-reveal-order-4{
  transition-delay:.32s;
}

.icz-reveal--fast{
  --icz-reveal-duration:.8s;
}

.icz-reveal--slow{
  --icz-reveal-duration:1.1s;
}

.icz-reveal--deep{
  --icz-reveal-distance:16px;
}

.icz-reveal--none{
  --icz-reveal-delay:0s;
}


/* =====================================================
  REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce){

  html{
    scroll-behavior:auto;
  }

  .icz-reveal{
    opacity:1;
    transform:none;
    transition:none;
  }

}