/* ==========================================================================
   N01 + N02 · The curtain menu, and getting back

   Behaviour taken from GKC (observed 19 Oct 2026, evidence in
   evidence/references/gkc-menu-d/observation.json): a light panel comes
   across, the destinations stagger in behind it, the root is scroll locked,
   focus lands inside the panel, Escape closes it and the focus goes back to
   the control that opened it. Measured there: panel transform 1000ms
   cubic-bezier, items opacity 600ms with transform 600ms.

   Rebuilt here on Strulen's ground, faster (620ms), and with two things the
   reference does not do: the datum crosses the curtain at the height it holds
   on every page, and the sheet beside the list changes as the reader moves
   down it, so the index shows the work rather than only naming it.
   ========================================================================== */

:root{ --datum:28vh; --bar-h:64px; }

.skip{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--orange);
  color:#000;padding:12px 18px;font-size:var(--t-note);font-weight:600}
.skip:focus{left:10px;top:10px}

/* ---------- the bar ------------------------------------------------------ */
.bar{position:fixed;left:0;right:0;top:0;z-index:400;height:var(--bar-h);
  display:flex;align-items:center;gap:clamp(14px,3vw,34px);
  padding-inline:var(--gut);background:rgba(0,0,0,.9);
  border-bottom:1px solid rgba(255,255,255,.16)}
.bar__mark img{height:20px;width:auto;filter:invert(1)}
.bar__here{color:var(--grey-mid);display:none}
@media (min-width:620px){ .bar__here{display:block} }
.bar__open{margin-left:auto;display:inline-flex;align-items:center;gap:12px;
  padding:10px 0 10px 10px;color:#fff}
.bar__rules{display:grid;gap:4px;width:26px}
.bar__rules i{display:block;height:2px;background:#fff;
  transition:transform .42s var(--ease-curtain),opacity .22s linear}
.bar__rules i:nth-child(2){width:62%;background:var(--orange)}
html.menu .bar__rules i:nth-child(1){transform:translateY(6px) rotate(10deg)}
html.menu .bar__rules i:nth-child(2){opacity:0}
html.menu .bar__rules i:nth-child(3){transform:translateY(-6px) rotate(-10deg)}
html.menu .bar{background:transparent;border-bottom-color:transparent}
/* one way out, not two of them stacked in the same corner */
html.menu .bar__open{opacity:0;pointer-events:none;transition:opacity .2s linear}
html.menu .bar__mark img{filter:none}
html.menu .bar__open{color:var(--ink)}
html.menu .bar__rules i{background:var(--ink)}
html.menu .bar__here{color:#8a8a8a}

/* ---------- the curtain -------------------------------------------------- */
.curtain{position:fixed;inset:0;z-index:380;background:var(--paper);color:var(--ink);
  overflow:hidden;
  clip-path:inset(0 0 0 100%);
  transition:clip-path .62s var(--ease-curtain),visibility 0s linear .62s;
  visibility:hidden}
.curtain[hidden]{display:none}
html.menu .curtain{clip-path:inset(0 0 0 0);visibility:visible;
  transition:clip-path .62s var(--ease-curtain),visibility 0s}
/* the datum crosses the curtain at the height it holds on every page */
.curtain__datum{position:absolute;left:0;right:0;top:var(--datum);height:2px;
  background:var(--orange);transform:scaleX(0);transform-origin:100% 50%}
html.menu .curtain__datum{transform:scaleX(1);
  transition:transform .66s var(--ease-draw) .12s}

.curtain__in{position:absolute;inset:0;display:grid;align-content:center;
  gap:clamp(22px,4vh,44px);padding:calc(var(--bar-h) + 6vh) var(--gut) 12vh}
@media (min-width:900px){
  .curtain__in{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
    align-items:center;gap:clamp(30px,5vw,80px)}
}

.curtain__nav li{border-top:1px solid rgba(0,0,0,.18)}
.curtain__nav li:last-child{border-bottom:1px solid rgba(0,0,0,.18)}
.curtain__nav a{display:grid;grid-template-columns:3.2rem minmax(0,1fr);
  column-gap:clamp(12px,2vw,26px);align-items:baseline;
  padding-block:clamp(14px,2.4vh,24px);
  opacity:0;transform:translateY(16px)}
html.menu .curtain__nav a{opacity:1;transform:none;
  transition:opacity .5s linear var(--d),transform .62s var(--ease-out) var(--d)}
.curtain__nav li:nth-child(1) a{--d:.12s}
.curtain__nav li:nth-child(2) a{--d:.19s}
.curtain__nav li:nth-child(3) a{--d:.26s}
.curtain__nav li:nth-child(4) a{--d:.33s}
.curtain__nav .n{font-family:var(--display);font-weight:600;color:var(--orange);
  font-size:clamp(1rem,1.4vw,1.2rem);letter-spacing:.06em}
.curtain__nav .w{grid-column:2;font-family:var(--display);font-weight:600;
  letter-spacing:-.03em;line-height:1;font-size:clamp(2.2rem,6.4vw,4.6rem)}
.curtain__nav .s{grid-column:2;display:block;margin-top:8px;color:#3a3a3a;
  font-size:var(--t-note);letter-spacing:.1em;text-transform:uppercase}
.curtain__nav a:hover .w,.curtain__nav a:focus-visible .w{color:var(--orange)}

.curtain__pic{position:relative;opacity:0;transform:translateY(16px)}
html.menu .curtain__pic{opacity:1;transform:none;
  transition:opacity .5s linear .3s,transform .62s var(--ease-out) .3s}
.curtain__pic img{width:100%;aspect-ratio:16/10;object-fit:cover;
  transition:opacity .28s linear}
.curtain__pic img.is-swap{opacity:0}
.curtain__pic figcaption{margin-top:12px;color:#636363}
@media (max-width:899px){ .curtain__pic{display:none} }

/* On a phone the index is not the desktop one made smaller. There is no hover
   to drive a single large sheet, so every row carries its own and the list
   becomes a short contact sheet of the studio's work. */
.rowpic{display:none}
@media (max-width:899px){
  .curtain__nav a{grid-template-columns:2.4rem minmax(0,1fr) 5.6rem;
    column-gap:clamp(10px,3vw,16px);align-items:center}
  .curtain__nav .n{grid-column:1;grid-row:1 / span 2}
  .curtain__nav .w{grid-column:2;grid-row:1;font-size:clamp(1.8rem,8vw,2.6rem)}
  .curtain__nav .s{grid-column:2;grid-row:2;margin-top:4px}
  /* a grid item stretches by default, which lets the picture's own height
     attribute win over its ratio: it is given a size and told to sit still */
  .rowpic{display:block;grid-column:3;grid-row:1 / span 2;align-self:center;
    width:100%;height:3.4rem;object-fit:cover}
}

.curtain__close{position:absolute;right:var(--gut);top:calc(var(--bar-h)/2);
  transform:translateY(-50%);color:var(--ink);padding:10px;margin:-10px;
  opacity:0;pointer-events:none}
html.menu .curtain__close{opacity:1;pointer-events:auto;transition:opacity .3s linear .3s}
.curtain__foot{position:absolute;left:var(--gut);bottom:calc(var(--gut) + 4px);
  color:#636363;opacity:0}
html.menu .curtain__foot{opacity:1;transition:opacity .4s linear .36s}

/* ---------- the page under it -------------------------------------------- */
html.menu,html.menu body{overflow:hidden}
.page{min-height:76svh;display:flex;align-items:center;padding-block:14vh 8vh}
.page--end{min-height:60svh;border-top:1px solid rgba(255,255,255,.16)}
.page h1{font-size:clamp(2.6rem,8vw,6.4rem);max-width:12ch}
.page h2{font-size:clamp(2rem,5vw,3.6rem);max-width:16ch}
.page__lead{margin-top:clamp(14px,2.4vh,26px);max-width:46ch;color:var(--grey-cool)}
.rows{display:grid;gap:clamp(18px,3vh,30px);padding-bottom:12vh}
.rows article{display:grid;gap:10px;padding-top:clamp(16px,2.6vh,26px);
  border-top:1px solid rgba(255,255,255,.16)}
@media (min-width:760px){
  .rows article{grid-template-columns:4.5rem minmax(0,1fr) minmax(0,16rem);
    column-gap:clamp(16px,3vw,44px);align-items:baseline}
}
.rows .n{font-family:var(--display);font-weight:600;color:var(--orange);font-size:1.3rem}
.rows h3{font-size:clamp(1.3rem,2.6vw,2rem)}
.rows p{color:var(--grey-cool)}

/* ---------- the project view --------------------------------------------- */
.proj{position:fixed;inset:0;z-index:420;background:var(--ink);
  display:grid;align-content:center;gap:clamp(18px,3vh,32px);
  padding:calc(var(--bar-h) + 5vh) var(--gut) 10vh;
  clip-path:inset(100% 0 0 0);transition:clip-path .56s var(--ease-curtain)}
.proj[hidden]{display:none}
html.proj-on .proj{clip-path:inset(0 0 0 0)}
@media (min-width:900px){
  .proj{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;
    gap:clamp(26px,5vw,70px)}
}
.proj__pic img{width:100%;aspect-ratio:16/10;object-fit:cover}
.proj h2{font-size:clamp(2rem,5vw,3.6rem);margin-top:6px}
.proj .note{color:var(--orange)}
.btn{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(16px,3vh,28px);
  padding:14px 24px;font-size:var(--t-note);letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;border:1px solid rgba(255,255,255,.5);color:#fff;
  transition:background .25s,color .25s,border-color .25s}
.btn:hover{background:#fff;color:#000;border-color:#fff}

/* ---------- when the browser is asked to keep still ---------------------- */
@media (prefers-reduced-motion:reduce){
  .curtain,.proj{transition:none}
  .curtain__datum{transform:scaleX(1)}
  .curtain__nav a,.curtain__pic,.curtain__close,.curtain__foot{opacity:1;transform:none;transition:none}
}
html.rm .curtain,html.rm .proj{transition:none!important}
html.rm .curtain__datum{transform:scaleX(1)!important}
html.rm .curtain__nav a,html.rm .curtain__pic,
html.rm .curtain__close,html.rm .curtain__foot{opacity:1!important;transform:none!important;transition:none!important}

/* without the script the curtain is simply a list at the foot of the page */
html:not(.js) .curtain{position:static;clip-path:none;visibility:visible;
  background:var(--paper);color:var(--ink);padding-block:8vh}
html:not(.js) .curtain__in{position:static;padding-top:0}
html:not(.js) .curtain__nav a,html:not(.js) .curtain__pic{opacity:1;transform:none}
html:not(.js) .curtain__close,html:not(.js) .bar__open{display:none}
html:not(.js) .curtain__datum{display:none}