:root{
  --paper:#f3efe6;     /* washi */
  --ink:#1b1914;       /* sumi */
  --redpen:#c8321e;    /* grader's red */
  --graphite:#7a7466;  /* pencil gray */
  --rule:#ddd7c9;      /* hairline */
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:"Zen Kaku Gothic New",sans-serif;font-weight:300}
a{color:inherit;text-decoration:none}

.bar{position:sticky;top:0;z-index:6;background:var(--paper);border-bottom:1px solid var(--rule);
     display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;padding:24px 32px 20px}
.bar .back{justify-self:start;font-size:10px;letter-spacing:.3em;color:var(--graphite);text-transform:uppercase}
.bar .back:hover{color:var(--ink)}
.wm{font-family:Raleway,sans-serif;font-weight:100;font-size:24px;letter-spacing:.3em;text-transform:uppercase;padding-left:.3em}
.wm i{font-style:normal;color:var(--redpen)}
.bar .contact{justify-self:end;font-size:10px;letter-spacing:.3em;color:var(--graphite);text-transform:uppercase}
.bar .contact:hover{color:var(--redpen)}

.p-hero{height:56vh;overflow:hidden}
.p-hero img{width:100%;height:100%;object-fit:cover;display:block}

.p-title{text-align:center;padding:8vh 24px 7vh}
.p-title h1{font-family:"Cormorant Garamond",serif;font-weight:300;font-size:clamp(42px,5.4vw,86px);letter-spacing:.03em}

.ledger{max-width:860px;margin:0 auto;padding:0 24px 4vh}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:24px;
     border-top:1px solid var(--rule);padding:3.2vh 0}
.row:last-child{border-bottom:1px solid var(--rule)}
.row .l{font-family:"Cormorant Garamond",serif;font-weight:400;font-size:clamp(20px,2.2vw,28px);letter-spacing:.02em}
.row .r{font-size:12px;letter-spacing:.14em;color:var(--graphite);text-transform:uppercase;text-align:right;white-space:nowrap}

.p-note{max-width:620px;margin:0 auto;text-align:center;padding:7vh 24px 2vh;
        font-family:"Cormorant Garamond",serif;font-weight:300;font-size:clamp(22px,2.6vw,32px);line-height:1.5}
.p-note em{font-style:normal;color:var(--redpen)}

.p-foot{text-align:center;padding:9vh 24px 7vh;border-top:1px solid var(--rule);margin-top:8vh}
.p-foot a.cta{font-family:"Cormorant Garamond",serif;font-weight:300;font-size:clamp(26px,3.2vw,42px)}
.p-foot a.cta:hover{color:var(--redpen)}
.p-foot .mail{display:block;margin-top:2.2vh;font-size:11px;letter-spacing:.24em;color:var(--graphite);text-transform:uppercase}
.p-links{display:flex;justify-content:center;gap:34px;margin-top:6vh;flex-wrap:wrap}
.p-links a{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--graphite);padding-bottom:4px;border-bottom:1px solid transparent}
.p-links a:hover{color:var(--ink);border-color:var(--ink)}
.p-links a.here{color:var(--ink);border-color:var(--redpen)}
.p-legal{margin-top:4.5vh;font-size:10px;letter-spacing:.22em;color:var(--graphite);text-transform:uppercase}

@media (max-width:640px){
  .wm{font-size:19px}
  .row{flex-direction:column;gap:6px}
  .row .r{text-align:left;white-space:normal}
}

/* ---------- stacking scroll: sections pin, then minimize under the next ---------- */
.stack .panel{position:sticky;top:0;min-height:100svh;background:var(--paper);
  display:flex;flex-direction:column;justify-content:center;overflow:hidden;
  border-top:1px solid var(--rule);transform-origin:50% 22%;will-change:transform}
.stack .panel::after{content:'';position:absolute;inset:0;background:var(--paper);
  opacity:calc(var(--cov,0)*.6);pointer-events:none;z-index:3}
@media (prefers-reduced-motion:reduce){
  .stack .panel{position:static;transform:none !important;opacity:1 !important}
}

/* ---------- the overlay menu ---------- */
.jm-btn{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--graphite);
        background:none;border:0;cursor:pointer;font-family:inherit;font-weight:300;padding:0;justify-self:start}
.jm-btn:hover{color:var(--ink)}
.bar-left{display:flex;gap:26px;align-items:baseline;justify-self:start}
#jkMenu{position:fixed;inset:0;z-index:60;pointer-events:none}
#jkMenu .jm-backdrop{position:absolute;inset:0;background:rgba(27,25,20,.16);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);opacity:0;transition:opacity .55s ease;border:0;width:100%;height:100%;cursor:pointer}
#jkMenu .jm-panel{position:absolute;top:0;left:0;bottom:0;width:min(520px,94vw);background:var(--paper);
  border-right:1px solid var(--rule);transform:translateX(-103%);
  transition:transform .7s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column}
#jkMenu.open{pointer-events:auto}
#jkMenu.open .jm-backdrop{opacity:1}
#jkMenu.open .jm-panel{transform:none}
.jm-head{display:flex;justify-content:space-between;align-items:baseline;padding:26px 30px 22px}
.jm-head .wm{font-family:Raleway,sans-serif;font-weight:100;font-size:22px;letter-spacing:.3em;text-transform:uppercase}
.jm-head .wm i{font-style:normal;color:var(--redpen)}
.jm-close{background:none;border:0;cursor:pointer;font-size:18px;color:var(--graphite);font-weight:300;padding:4px}
.jm-close:hover{color:var(--ink)}
.jm-nav{margin-top:6vh;display:flex;flex-direction:column}
.jm-row{display:flex;align-items:baseline;gap:28px;border-top:1px solid var(--rule);padding:3.4vh 30px;
        opacity:0;transform:translateX(-16px);transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.jm-row:last-of-type{border-bottom:1px solid var(--rule)}
#jkMenu.open .jm-row{opacity:1;transform:none}
#jkMenu.open .jm-row:nth-child(1){transition-delay:.16s}
#jkMenu.open .jm-row:nth-child(2){transition-delay:.23s}
#jkMenu.open .jm-row:nth-child(3){transition-delay:.3s}
#jkMenu.open .jm-row:nth-child(4){transition-delay:.37s}
#jkMenu.open .jm-row:nth-child(5){transition-delay:.44s}
.jm-row .n{font-size:10px;letter-spacing:.2em;color:var(--graphite)}
.jm-row .name{font-family:"Cormorant Garamond",serif;font-weight:300;font-size:clamp(30px,3.6vw,44px);
              transition:color .4s ease,letter-spacing .6s cubic-bezier(.16,1,.3,1)}
.jm-row:hover .name,.jm-row.here .name{color:var(--redpen)}
.jm-row:hover .name{letter-spacing:.04em}
.jm-talk{margin-top:auto;background:var(--redpen);color:#f6f1e7;display:flex;align-items:baseline;gap:22px;
         padding:4.4vh 30px;transition:filter .4s ease}
.jm-talk:hover{filter:brightness(.92)}
.jm-talk .k{font-size:9px;letter-spacing:.26em;text-transform:uppercase;opacity:.75}
.jm-talk .t{font-family:"Cormorant Garamond",serif;font-weight:300;font-size:clamp(26px,3vw,38px)}
.jm-talk .a{margin-left:auto;font-size:22px}
@media (prefers-reduced-motion:reduce){
  #jkMenu .jm-panel,.jm-row{transition:none}
}

/* ---------- reveal engine (shared) ---------- */
.lm{display:inline-block;overflow:hidden;vertical-align:bottom}
.ln{display:inline-block;transform:translateY(112%);transition:transform .95s cubic-bezier(.16,1,.3,1)}
[data-reveal].on .ln{transform:none}
.rv{opacity:0;transform:translateY(20px);transition:opacity .9s ease,transform .9s cubic-bezier(.16,1,.3,1)}
[data-reveal].on .rv{opacity:1;transform:none}
[data-reveal] .imask{overflow:hidden}
[data-reveal] .imask img{transform:scale(1.18);transition:transform 1.5s cubic-bezier(.16,1,.3,1)}
[data-reveal].on .imask img{transform:scale(1.12)}
@media (prefers-reduced-motion:reduce){
  .ln,.rv,[data-reveal] .imask img{transform:none !important;opacity:1 !important;transition:none !important}
}