/* ============================================================
   Chiho Creative Studio
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,p,dl,dd,ol,ul,figure{margin:0}
ol,ul{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
a{color:inherit}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:1.68;
  font-feature-settings:"kern" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

:lang(ja){
  font-family:var(--jp);
  font-feature-settings:"palt" 1;
  line-height:1.9;
  letter-spacing:.04em;
}

::selection{background:var(--accent);color:var(--paper)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--paper);
  padding:.75rem 1.25rem;font-size:var(--t-small);
}
.skip:focus{left:.5rem;top:.5rem}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:4px;
  border-radius:1px;
}

/* --- Layout shell ------------------------------------------- */

.wrap{
  width:100%;
  max-width:var(--measure);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* --- The rail: vertical running head ------------------------ */

.rail{
  position:fixed;
  inset-block:0;
  left:0;
  width:var(--rail);
  z-index:20;
  pointer-events:none;
  display:none;
}
.rail__line{
  position:absolute;
  top:0;bottom:0;
  right:0;
  width:1px;
  background:var(--rule);
}
.rail__label{
  position:absolute;
  top:50%;
  right:0;
  translate:0 -50%;
  width:var(--rail);
  display:flex;
  justify-content:center;
  writing-mode:vertical-rl;
  font-family:var(--jp);
  font-weight:400;
  font-size:.9375rem;
  letter-spacing:.42em;
  text-indent:.42em;          /* balances the trailing tracking */
  color:var(--grey-mid);
  transition:opacity .5s var(--ease), translate .5s var(--ease);
}
.rail__label.is-out{opacity:0;translate:0 calc(-50% + 10px)}

@media (min-width:1080px){
  .rail{display:block}
  body{padding-left:var(--rail)}
}

/* --- Masthead ------------------------------------------------ */

.masthead{
  position:fixed;
  top:0;left:0;right:0;
  z-index:30;
  padding-left:0;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:saturate(1.1) blur(10px);
  -webkit-backdrop-filter:saturate(1.1) blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease), background-color .4s var(--ease);
}
.masthead.is-stuck{border-bottom-color:var(--rule-soft)}
@media (min-width:1080px){.masthead{left:var(--rail)}}

.masthead__in{
  width:100%;
  max-width:var(--measure);
  margin-inline:auto;
  padding:1.15rem var(--gutter);
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1.5rem;
}

.wordmark{
  text-decoration:none;
  font-family:var(--display);
  font-size:1.0625rem;
  letter-spacing:.005em;
  white-space:nowrap;
  display:inline-flex;
  align-items:baseline;
  gap:.7em;
}
.wordmark__name{font-weight:500}
.wordmark__rest{font-weight:300;color:var(--grey)}

/* The one saturated object on the page. It gets to keep the full
   brand red precisely because nothing else on the page competes
   with it — every other red is the darkened --accent. */
.mark{
  width:auto;
  height:1.32em;
  flex:none;
  color:var(--brand-red);
  translate:0 .16em;      /* optically seats the ring on the baseline */
}
.mark--foot{
  height:1.05em;
  translate:0 .12em;
}

.nav{
  display:flex;
  align-items:baseline;
  gap:clamp(1rem,2.4vw,2.1rem);
  font-size:var(--t-small);
}
.nav a{
  text-decoration:none;
  color:var(--grey);
  transition:color .25s var(--ease);
}
.nav a:hover{color:var(--ink)}
.nav__cta{color:var(--accent) !important;font-weight:500}
.nav__cta:hover{text-decoration:underline;text-underline-offset:.28em}

@media (max-width:760px){
  .nav a:not(.nav__cta){display:none}
}

/* --- Shared type -------------------------------------------- */

.eyebrow{
  font-size:var(--t-label);
  text-transform:uppercase;
  letter-spacing:.185em;
  font-weight:500;
  color:var(--grey-mid);
  line-height:1.5;
}

.title{
  font-family:var(--display);
  font-weight:300;
  font-size:var(--t-title);
  line-height:1.14;
  letter-spacing:-.014em;
  text-wrap:balance;
  max-width:19em;
}

.lede{
  font-family:var(--display);
  font-weight:300;
  font-size:var(--t-lede);
  line-height:1.6;
  color:var(--grey);
  max-width:34em;
  margin-top:1.4rem;
}

.stop{color:var(--accent)}

/* --- Links --------------------------------------------------- */

.link-arrow{
  --c:var(--accent);
  display:inline-flex;
  align-items:baseline;
  gap:.6em;
  text-decoration:none;
  color:var(--c);
  font-weight:500;
  font-size:.9375rem;
  letter-spacing:.005em;
  padding-bottom:.35rem;
  border-bottom:1px solid color-mix(in srgb, var(--c) 35%, transparent);
  transition:border-color .3s var(--ease);
}
.link-arrow::after{
  content:"→";
  transition:translate .35s var(--ease);
}
.link-arrow:hover{border-bottom-color:var(--c)}
.link-arrow:hover::after{translate:.28em 0}

.link-quiet{
  text-decoration:none;
  color:var(--grey);
  font-size:.9375rem;
  padding-bottom:.35rem;
  border-bottom:1px solid var(--rule);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.link-quiet:hover{color:var(--ink);border-bottom-color:var(--grey-mid)}

/* --- Bands --------------------------------------------------- */

.band{
  padding-block:var(--band);
  border-top:1px solid var(--rule-soft);
}
.band--sunk{background:var(--paper-raised)}

.spread{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1.75rem;
}
@media (min-width:900px){
  .spread{
    grid-template-columns:minmax(0,3fr) minmax(0,8fr);
    gap:clamp(2rem,5vw,5.5rem);
  }
  .spread__side{padding-top:.55rem}
}

/* ============================ HERO ========================== */

.hero{
  min-height:min(100svh, 62rem);
  display:flex;
  align-items:center;
  padding-block:clamp(9rem,20vh,13rem) clamp(5rem,12vh,8rem);
}

.hero__eyebrow{margin-bottom:clamp(2rem,5vh,3.25rem)}

.hero__line{
  font-family:var(--display);
  font-weight:300;
  font-size:var(--t-hero);
  line-height:.99;
  letter-spacing:-.026em;
  max-width:11.5em;
  text-wrap:balance;
}

/* The gloss: the Japanese line and its marginal note. The rule
   to its left marks it as an aside, the way a printed marginal
   note is marked — not as a caption to the headline. */
.gloss{
  margin-top:clamp(2.25rem,5vh,3.5rem);
  padding-left:clamp(1rem,2vw,1.6rem);
  border-left:1px solid var(--accent);
  max-width:44rem;
}
.gloss__jp{
  font-family:var(--jp);
  font-weight:400;
  font-size:clamp(1.0625rem,1.9vw,1.5rem);
  line-height:1.62;
  letter-spacing:.06em;
  color:var(--ink);
}
.gloss__note{
  margin-top:.7rem;
  font-size:var(--t-small);
  line-height:1.62;
  color:var(--grey);
  max-width:33em;
  text-wrap:pretty;
}

.hero__lede{
  margin-top:clamp(2.5rem,6vh,3.75rem);
  font-family:var(--display);
  font-weight:300;
  font-size:var(--t-lede);
  line-height:1.58;
  color:var(--grey);
  max-width:30em;
}

.hero__act{
  margin-top:clamp(2.25rem,5vh,3rem);
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:1.25rem 2.25rem;
}

/* ========================== PROBLEM ========================= */

.diffs{
  margin-top:clamp(3rem,7vh,5rem);
  border-top:1px solid var(--rule);
}
.diff{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:.4rem clamp(2rem,5vw,5.5rem);
  padding-block:1.5rem;
  border-bottom:1px solid var(--rule);
}
@media (min-width:900px){
  .diff{
    grid-template-columns:minmax(0,3fr) minmax(0,8fr);
    gap:0 clamp(2rem,5vw,5.5rem);
    padding-block:1.75rem;
  }
}
.diff__term{
  font-family:var(--display);
  font-weight:400;
  font-size:1.0625rem;
  line-height:1.45;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.7em;
}
.diff__jp{
  font-family:var(--jp);
  font-weight:300;
  font-size:.8125rem;
  letter-spacing:.1em;
  color:var(--grey-mid);
}
.diff__note{
  color:var(--grey);
  font-size:.9375rem;
  line-height:1.72;
  max-width:40em;
}

.diffs__close{
  margin-top:clamp(2.5rem,6vh,4rem);
  font-family:var(--display);
  font-weight:300;
  font-size:var(--t-sub);
  line-height:1.55;
  max-width:26em;
  margin-left:auto;
  text-align:left;
}

/* ========================== SERVICES ======================== */

.services{
  margin-top:clamp(3rem,7vh,5rem);
  border-top:1px solid var(--rule);
}
.service{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:.35rem clamp(2rem,5vw,5.5rem);
  padding-block:1.9rem;
  border-bottom:1px solid var(--rule);
  position:relative;
}
.service::after{
  content:"";
  position:absolute;
  left:0;right:100%;bottom:-1px;
  height:1px;
  background:var(--accent);
  transition:right .55s var(--ease);
}
.service:hover::after{right:0}

@media (min-width:900px){
  .service{
    grid-template-columns:minmax(0,4fr) minmax(0,7fr);
    grid-template-rows:auto auto;
    gap:.35rem clamp(2rem,5vw,5.5rem);
    padding-block:2.15rem;
  }
  .service__name{grid-column:1;grid-row:1}
  .service__jp{grid-column:1;grid-row:2}
  .service__note{grid-column:2;grid-row:1 / span 2}
}

.service__name{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.25rem,1.9vw,1.55rem);
  line-height:1.28;
  letter-spacing:-.008em;
}
.service__jp{
  font-family:var(--jp);
  font-weight:300;
  font-size:.8125rem;
  letter-spacing:.12em;
  color:var(--grey-mid);
  line-height:1.6;
}
.service__note{
  color:var(--grey);
  font-size:.9375rem;
  line-height:1.75;
  max-width:38em;
}

/* ========================== APPROACH ======================== */
/* Order is real information here, so the sequence is drawn:
   one continuous rule with a node at each move. */

.steps{
  margin-top:clamp(3rem,7vh,5rem);
  position:relative;
  padding-left:clamp(1.5rem,3vw,2.5rem);
}
/* The rule carries the direction of travel: wine at the first
   move, fading to a plain hairline by the last. */
.steps::before{
  content:"";
  position:absolute;
  left:0;
  top:.72rem;
  bottom:.72rem;
  width:1px;
  background:linear-gradient(var(--accent), var(--rule) 42%);
}
.step{
  position:relative;
  padding-block:0 clamp(2rem,4.5vh,3rem);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:.5rem clamp(2rem,5vw,5.5rem);
}
.step:last-child{padding-bottom:0}
.step::before{
  content:"";
  position:absolute;
  left:calc(-1 * clamp(1.5rem,3vw,2.5rem) - 2.5px);
  top:.62rem;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--paper-raised);
  box-shadow:0 0 0 1px var(--grey-mid);
}

@media (min-width:900px){
  .step{
    grid-template-columns:minmax(0,4fr) minmax(0,7fr);
    grid-template-rows:auto auto;
    gap:.35rem clamp(2rem,5vw,5.5rem);
  }
  .step__name{grid-column:1;grid-row:1}
  .step__jp  {grid-column:1;grid-row:2}
  .step__note{grid-column:2;grid-row:1 / span 2;margin-top:.2rem}
}

.step__name{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.2rem,1.8vw,1.45rem);
  line-height:1.32;
}
.step__jp{
  font-family:var(--jp);
  font-weight:300;
  font-size:.8125rem;
  letter-spacing:.12em;
  line-height:1.6;
  color:var(--grey-mid);
}
.step__note{
  color:var(--grey);
  font-size:.9375rem;
  line-height:1.75;
  max-width:38em;
}

/* ========================= EXPERIENCE ======================= */

.facts{
  margin-top:clamp(3rem,7vh,5rem);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:0;
  border-top:1px solid var(--rule);
}
.fact{
  padding:1.4rem clamp(1rem,2vw,1.75rem) 1.5rem 0;
  border-bottom:1px solid var(--rule);
}
.fact__k{
  font-size:var(--t-label);
  text-transform:uppercase;
  letter-spacing:.185em;
  font-weight:500;
  color:var(--grey-mid);
}
.fact__v{
  margin-top:.5rem;
  font-family:var(--display);
  font-weight:300;
  font-size:1.0625rem;
  line-height:1.5;
  color:var(--ink);
}

.engagements__intro{
  margin-top:clamp(3rem,7vh,4.5rem);
  font-size:var(--t-label);
  text-transform:uppercase;
  letter-spacing:.185em;
  font-weight:500;
  color:var(--grey-mid);
}
.engagements{
  margin-top:1.75rem;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
  gap:clamp(1.75rem,3.5vw,3.25rem);
}
.engagement{
  padding-top:1.15rem;
  border-top:1px solid var(--ink);
}
.engagement__name{
  font-family:var(--display);
  font-weight:400;
  font-size:1.1875rem;
  line-height:1.3;
}
.engagement__note{
  margin-top:.65rem;
  color:var(--grey);
  font-size:.9375rem;
  line-height:1.72;
}

/* =========================== ABOUT ========================== */

/* The portrait's own background is a warm cream within a hair of
   --paper-raised, so it sits on the band rather than on top of it.
   No border, no shadow: the hairline grid does the framing. */
.portrait{
  width:clamp(7rem,11vw,9.5rem);
  height:auto;
  aspect-ratio:1;
  border-radius:50%;
  margin-top:clamp(1.5rem,3vh,2rem);
}

.about__jp{
  margin-top:1.1rem;
  font-family:var(--jp);
  font-weight:300;
  font-size:.8125rem;
  letter-spacing:.12em;
  color:var(--grey-mid);
}
.about__body{max-width:36em}
.about__body p + p{margin-top:1.15rem}
.about__body p{color:var(--grey);line-height:1.78}
.about__body .about__open{
  font-family:var(--display);
  font-weight:300;
  font-size:var(--t-sub);
  line-height:1.5;
  color:var(--ink);
  margin-bottom:1.6rem;
}

/* ========================== CONTACT ========================= */

.cta{
  background:var(--ink-deep);
  color:var(--paper-on-ink);
  padding-block:clamp(6rem,15vh,11rem);
}
.cta__line{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(2.1rem,5vw,4.15rem);
  line-height:1.06;
  letter-spacing:-.022em;
  max-width:14em;
  text-wrap:balance;
}
.cta .stop{color:var(--accent-on-ink)}
.cta__note{
  margin-top:1.75rem;
  font-family:var(--display);
  font-weight:300;
  font-size:var(--t-lede);
  line-height:1.6;
  color:var(--grey-on-ink);
  max-width:30em;
}
.cta__act{
  margin-top:clamp(2.5rem,6vh,3.5rem);
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:1rem 2.25rem;
}
/* On the dark band the wine is reserved for the display glyph,
   which is large enough to carry it. The link takes paper so it
   stays legible at 15px. */
.link-arrow--ink{--c:var(--paper-on-ink)}
.cta__mail{
  font-size:.9375rem;
  color:var(--grey-on-ink);
  letter-spacing:.01em;
}
.cta__jp{
  margin-top:clamp(2.5rem,6vh,3.5rem);
  padding-top:1.5rem;
  border-top:1px solid var(--rule-on-ink);
  font-family:var(--jp);
  font-weight:300;
  font-size:.875rem;
  letter-spacing:.1em;
  color:var(--grey-on-ink);
}

/* =========================== FOOTER ========================= */

.foot{
  background:var(--ink-deep);
  color:var(--grey-on-ink);
  padding-block:0 clamp(3rem,7vh,4.5rem);
  font-size:var(--t-small);
}
.foot__in{
  border-top:1px solid var(--rule-on-ink);
  padding-top:2.25rem;
  display:grid;
  gap:.5rem;
}
@media (min-width:760px){
  .foot__in{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
    align-items:baseline;
    gap:.75rem clamp(1.5rem,4vw,3rem);
  }
  .foot__fine{grid-column:1 / -1;margin-top:1.5rem}
}
.foot__mark{
  font-family:var(--display);
  font-size:1rem;
  color:var(--paper-on-ink);
  display:flex;
  align-items:baseline;
  gap:.65em;
}
.foot__tag{font-family:var(--display);font-weight:300;font-style:italic}
.foot__sep{
  display:inline-block;
  padding-inline:.6em;
  color:var(--grey-on-ink-2);
}
.foot__meta a{
  text-decoration:none;
  border-bottom:1px solid var(--rule-on-ink);
  padding-bottom:.15rem;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.foot__meta a:hover{color:var(--paper-on-ink);border-bottom-color:var(--grey-on-ink)}
.foot__fine{font-size:.75rem;color:var(--grey-on-ink-2);line-height:1.6}

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

.js .reveal{
  opacity:0;
  translate:0 14px;
  transition:opacity .85s var(--ease), translate .85s var(--ease);
}
.js .reveal.is-in{opacity:1;translate:0 0}

/* Hero load sequence — one orchestrated entrance, then the page
   stays still until you scroll it. */
.hero__eyebrow,.hero__line,.gloss,.hero__lede,.hero__act{
  opacity:0;
  translate:0 16px;
  animation:rise .95s var(--ease) forwards;
}
.hero__eyebrow{animation-delay:.10s}
.hero__line   {animation-delay:.20s}
.gloss        {animation-delay:.44s}
.hero__lede   {animation-delay:.58s}
.hero__act    {animation-delay:.70s}

@keyframes rise{to{opacity:1;translate:0 0}}

@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;translate:none;transition:none}
  .hero__eyebrow,.hero__line,.gloss,.hero__lede,.hero__act{
    opacity:1;translate:none;animation:none;
  }
  .rail__label{transition:none}
  .service::after,.link-arrow::after{transition:none}
}