/* ==========================================================================
   STRULEN · the homepage art direction

   Seven moments, no two composed alike, with three real transformations:
     the drawing becomes the room        (the entrance)
     the line is cut by the datum        (the statement)
     the photograph is cut by its plan   (what we do)

   The orange datum is struck once in the first frame and holds the same
   height on every moment after it. It is the only thing on the page that
   never moves.
   ========================================================================== */

:root{ --datum:28vh; --tile-w:156px; --tile-h:98px; --tile-gap:16px; --bar-h:64px; }
@media (max-width:700px){ :root{ --tile-w:84px; --tile-h:53px; --tile-gap:9px } }

body{overflow:hidden}
html.is-done body{overflow:auto}
.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}

/* a fact row, used wherever a piece of work is credited */
.credit{display:grid;gap:10px 26px;margin-top:clamp(16px,2.6vh,28px)}
@media (min-width:760px){ .credit{grid-auto-flow:column;grid-auto-columns:max-content} }
/* these labels sit over photographs, where mid grey does not hold */
.credit dt{font-size:var(--t-note);letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;color:var(--grey-cool)}
.credit dd{margin:0;margin-top:5px;font-size:.9375rem}

/* ---------- 00 · the entrance -------------------------------------------- */
.load{position:fixed;inset:0;z-index:600;background:var(--ink);overflow:hidden;
  opacity:1;transition:opacity .34s linear}
html.is-done .load{opacity:0;pointer-events:none}
html:not(.js) .load{display:none}
.load__datum{position:absolute;left:0;right:0;top:var(--datum);height:2px;
  background:var(--orange);transform:scaleX(0);transform-origin:0 50%}
html.s-strike .load__datum{transform:scaleX(1);transition:transform .66s var(--ease-draw) .06s}
.load__strip{position:absolute;left:50%;
  top:calc(var(--datum) - var(--tile-h) - clamp(22px,4vh,44px));
  display:flex;gap:var(--tile-gap);transform:translateX(-50%);will-change:transform}
html.s-drift .load__strip{animation:drift 26s linear forwards}
@keyframes drift{from{transform:translateX(calc(-50% - 26px))}to{transform:translateX(calc(-50% + 26px))}}
.tile{width:var(--tile-w);height:var(--tile-h);flex:none;position:relative;
  opacity:0;filter:blur(14px);transform:translateY(10px) scale(.92)}
html.s-tiles .tile{opacity:1;filter:blur(0);transform:none;
  transition:opacity .62s linear var(--d),filter .62s var(--ease-out) var(--d),
             transform .68s var(--ease-out) var(--d)}
.tile__sheet{position:absolute;inset:0;background:#0c0c0c;border:1px solid rgba(255,255,255,.16)}
.tile__sheet svg{width:100%;height:100%}
.tile__sheet svg line,.tile__sheet svg rect,.tile__sheet svg path,
.tile__sheet svg circle,.tile__sheet svg polyline,.tile__sheet svg polygon{
  fill:none;stroke:rgba(255,255,255,.92);stroke-width:1.1;vector-effect:non-scaling-stroke}
.tile__sheet svg .poche{fill:rgba(255,255,255,.9);stroke:none}
.tile__sheet svg .fillt{fill:rgba(255,255,255,.06);stroke:none}
.tile__sheet svg .mark{stroke:var(--orange)}
.tile__sheet svg .t{stroke:rgba(255,255,255,.6)}
.tile__sheet svg .g{stroke:rgba(255,255,255,.3)}
.tile__sheet svg text{display:none}
.tile--key{border:0}
.tile--key::after{content:"";position:absolute;inset:-5px;border:1px solid var(--orange);
  opacity:0;transition:opacity .3s linear}
html.s-pick .tile--key::after{opacity:1}
html.s-collapse .tile--key::after{opacity:0}
html.s-collapse .tile:not(.tile--key){opacity:0;filter:blur(8px);transform:scale(.6);
  transition:opacity .4s linear var(--dc),filter .4s linear var(--dc),
             transform .46s var(--ease-out) var(--dc)}
.load__count{position:absolute;left:var(--gut);bottom:calc(var(--gut) + 6px);
  color:var(--grey-mid);opacity:0}
html.s-tiles .load__count{opacity:1;transition:opacity .4s linear .2s}
html.s-collapse .load__count{opacity:0}
.load__skip{position:absolute;right:var(--gut);bottom:calc(var(--gut) + 6px);
  color:var(--grey-cool);padding:8px 10px;margin:-8px -10px}
.load__skip:hover{color:#fff}

/* the one figure that is both the sheet in the row and the room */
.shot{position:fixed;left:0;top:0;width:100vw;height:100svh;z-index:620;
  overflow:hidden;background:#070707;transform-origin:50% 50%;
  transform:translate(var(--sx,0px),var(--sy,0px)) scale(var(--ss,1));
  transition:transform .38s var(--ease-out);opacity:0}
html.s-tiles .shot{opacity:1;transition:opacity .6s linear var(--dkey,0ms)}
html.s-grow .shot{--sx:0px;--sy:0px;--ss:1;transition:transform .92s var(--ease-draw)}
.shot__photo,.shot__film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shot__film{opacity:0;transition:opacity .8s linear}
.shot__film.is-ready{opacity:1}
.shot__draw{position:absolute;inset:0;width:100%;height:100%;opacity:1}
html.s-grow .shot__draw{opacity:0;transition:opacity .55s linear .12s}
.shot__draw line,.shot__draw rect{fill:none;stroke:rgba(255,255,255,.78);
  stroke-width:1;vector-effect:non-scaling-stroke}
.shot__draw .poche{fill:rgba(255,255,255,.92);stroke:none}
.shot__draw .t{stroke:rgba(255,255,255,.46)}
.shot__draw .mark{stroke:var(--orange)}
.shot::after{content:"";position:absolute;inset:0;background:var(--ink);opacity:.82;pointer-events:none}
html.s-grow .shot::after{opacity:0;transition:opacity .5s linear}
/* once the page is live the figure is the hero's own backdrop */
html.is-done .shot{position:fixed;z-index:0}

/* ---------- the bar and the index ---------------------------------------- */
.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);
  opacity:0;pointer-events:none;transition:opacity .5s linear}
html.s-hand .bar{opacity:1;pointer-events:auto}
.bar::before{content:"";position:absolute;inset:0 0 auto 0;height:116px;z-index:-1;
  pointer-events:none;transition:opacity .4s linear;
  background:linear-gradient(180deg,rgba(0,0,0,.58),rgba(0,0,0,.2) 48%,rgba(0,0,0,0))}
html[data-topmode="paper"] .bar::before{opacity:0}
.bar__mark img{height:20px;width:auto;filter:invert(1);transition:filter .3s linear}
html[data-topmode="paper"] .bar__mark img{filter:none}
.bar__scale{margin-left:auto;color:#fff;font-variant-numeric:tabular-nums;transition:color .3s linear}
.bar__open{display:inline-flex;align-items:center;gap:12px;padding:10px 0 10px 10px;color:#fff;
  transition:color .3s linear}
html[data-topmode="paper"] .bar__scale,html[data-topmode="paper"] .bar__open{color:var(--ink)}
.bar__rules{display:grid;gap:4px;width:26px}
.bar__rules i{display:block;height:2px;background:currentColor;
  transition:transform .42s var(--ease-curtain),opacity .22s linear}
.bar__rules i:nth-child(2){width:62%;background:var(--orange)}
html.menu .bar__open{opacity:0;pointer-events:none}
html.menu .bar__mark img{filter:none}
html.menu .bar__scale{color:var(--ink)}
html.menu .bar::before{opacity:0}

.curtain{position:fixed;inset:0;z-index:380;background:var(--paper);color:var(--ink);
  overflow:hidden;clip-path:inset(0 0 0 100%);visibility:hidden;
  transition:clip-path .62s var(--ease-curtain),visibility 0s linear .62s}
.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}
.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}
.rowpic{display:none}
@media (max-width:899px){
  .curtain__pic{display:none}
  .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}
  .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}
html.menu,html.menu body{overflow:hidden}

/* ---------- 01 · the hero ------------------------------------------------ */
/* during the entrance the claim is above the ground; afterwards it takes its
   ordinary place so the sections below it paint normally */
html:not(.is-done) .hero{z-index:640}
.hero{position:relative;z-index:2;min-height:100svh;display:flex;align-items:flex-end;
  padding-top:calc(var(--datum) + 2vh);pointer-events:none}
html.is-done .hero{pointer-events:auto}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  background:linear-gradient(183deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.04) 34%,rgba(0,0,0,.88) 100%)}
html.s-grow .hero::before{opacity:1;transition:opacity .7s linear .3s}
.hero__datum{position:absolute;left:0;right:0;top:var(--datum);height:2px;
  background:var(--orange);opacity:0}
html.s-hand .hero__datum{opacity:.9}
.hero__in{position:relative;width:100%;padding-bottom:clamp(30px,6vh,74px)}
.hero h1{font-size:min(clamp(2.4rem,8.2vw,7.2rem),13vh);max-width:14ch}
.hero h1 .ln{display:block;overflow:hidden;padding-block:.06em .12em;margin-block:-.06em}
.hero h1 .ln>span{display:block;transform:translateY(108%)}
html.s-said .hero h1 .ln>span{transform:none;transition:transform .78s var(--ease-out)}
html.s-said .hero h1 .ln:nth-child(2)>span{transition-delay:.09s}
.hero__lead{margin-top:clamp(14px,2.2vh,26px);max-width:46ch;font-weight:500;
  color:var(--grey-cool);opacity:0}
.hero .credit{opacity:0}
html.s-hand .hero__lead{opacity:1;transition:opacity .5s linear .16s}
html.s-hand .hero .credit{opacity:1;transition:opacity .5s linear .3s}

/* ---------- 02 · the statement, cut by the datum ------------------------- */
.say{position:relative;z-index:2;background:var(--ink);min-height:100svh;
  display:grid;align-content:center;padding-block:14vh}
/* full bleed, but anchored to the top of the lower half, so the cut is on
   the join whatever the words do at a narrow width */
.say__datum{position:absolute;top:0;left:50%;width:100vw;margin-left:-50vw;
  height:2px;background:var(--orange);transform:scaleX(0);transform-origin:0 50%;z-index:2}
.say.is-in .say__datum{transform:scaleX(1);transition:transform .8s var(--ease-draw)}
.say__line{display:grid;font-family:var(--display);font-weight:600;letter-spacing:-.045em;
  line-height:.84;font-size:clamp(3.4rem,17vw,15rem);text-transform:lowercase}
.say__up{display:block;overflow:hidden;padding-block:.02em}
.say__dn{display:block;position:relative;overflow:visible;padding-block:.02em}
.say__up>span,.say__dn>span{display:block}
.say__up>span{transform:translateY(-112%)}
.say__dn>span{transform:translateY(112%)}
.say.is-in .say__up>span,.say.is-in .say__dn>span{transform:none;
  transition:transform .9s var(--ease-draw) .1s}
.say__dn>span{color:var(--grey-mid)}
.say__foot{margin-top:clamp(26px,5vh,56px);color:var(--grey-mid)}

/* ---------- 03 · the photograph cut to its own plan ---------------------- */
.plan{position:relative;z-index:2;background:var(--ink);min-height:100svh;
  display:flex;align-items:center;padding-block:14vh;overflow:hidden}
.plan__fig{position:absolute;inset:0}
.plan__fig img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06)}
/* the footprint of the Ridge House plan, drawn in the studio */
.plan__fig{clip-path:polygon(6.8% 17.9%,93.2% 17.9%,93.2% 69.8%,71.6% 69.8%,
  71.6% 54.7%,54.8% 54.7%,54.8% 69.8%,6.8% 69.8%);
  transition:clip-path 1.25s var(--ease-draw)}
.plan.is-open .plan__fig{clip-path:polygon(0% 0%,100% 0%,100% 100%,71.6% 100%,
  71.6% 100%,54.8% 100%,54.8% 100%,0% 100%)}
.plan::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.72) 38%,rgba(0,0,0,.28) 100%);
  opacity:0;transition:opacity .9s linear}
.plan.is-open::after{opacity:1}
.plan__in{position:relative;z-index:2;width:100%}
.plan h2{font-size:clamp(1.9rem,4.6vw,3.8rem);max-width:17ch}
.sched{margin-top:clamp(26px,5vh,56px);max-width:44rem}
.sched li{display:grid;grid-template-columns:2.6rem minmax(0,1fr);
  column-gap:clamp(12px,2vw,26px);padding-block:clamp(9px,1.5vh,15px);
  border-top:1px solid rgba(255,255,255,.18);
  opacity:0;transform:translateY(12px)}
@media (min-width:720px){
  .sched li{grid-template-columns:2.6rem minmax(0,13rem) minmax(0,1fr);align-items:baseline}
}
.plan.is-open .sched li{opacity:1;transform:none;
  transition:opacity .5s linear var(--d),transform .6s var(--ease-out) var(--d)}
.sched__n{color:var(--orange);font-family:var(--display);font-weight:600;font-size:.95rem;
  letter-spacing:.06em}
.sched__w{font-family:var(--display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.05rem,1.6vw,1.35rem)}
.sched__s{color:var(--grey-cool);font-size:.9375rem}
@media (max-width:719px){ .sched__w,.sched__s{grid-column:2} .sched__s{margin-top:3px} }

/* ---------- 04 · the work, one piece at a time --------------------------- */
/* the piece runs to the edges of its own moment: a black band above a full
   bleed photograph reads as a seam, not as a composition */
.work{position:relative;z-index:2;background:var(--ink);min-height:100svh;
  display:grid;align-content:center;gap:clamp(18px,3vh,32px);
  padding-block:0 clamp(22px,4vh,46px);overflow:hidden}
.work__wipe{position:absolute;inset:0;z-index:5;background:var(--orange);
  clip-path:inset(0 100% 0 0);pointer-events:none}
.work.is-wipe-in .work__wipe{clip-path:inset(0 0 0 0);transition:clip-path .34s var(--ease-curtain)}
.work.is-wipe-out .work__wipe{clip-path:inset(0 0 0 100%);transition:clip-path .38s var(--ease-curtain)}
.work__stage{position:relative;min-height:80svh;display:flex;align-items:flex-end;overflow:hidden}
.work__fig{position:absolute;inset:0;overflow:hidden}
.work__fig img{width:100%;height:100%;object-fit:cover}
.work__fig::after{content:"";position:absolute;inset:0;
  background:linear-gradient(183deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.06) 36%,rgba(0,0,0,.88) 100%)}
.work__in{position:relative;width:100%;padding-bottom:clamp(20px,4vh,44px)}
.work__num{color:var(--orange);font-family:var(--display);font-weight:600;line-height:.9;
  font-size:clamp(2.2rem,5vw,4rem)}
/* the name is set at the size of the page and sits on the picture, not beside it */
.work h2{margin-top:4px;font-size:min(clamp(2rem,7.6vw,6.4rem),15vh);max-width:15ch}
.work__bar{display:flex;align-items:center;justify-content:space-between;gap:16px}
.work__bar .note{color:var(--grey-mid);font-variant-numeric:tabular-nums}
.work__nav{display:flex;gap:10px}
.work__nav button{width:46px;height:46px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.34);font-size:1rem;
  transition:background .25s,color .25s,border-color .25s}
.work__nav button:hover{background:#fff;color:#000;border-color:#fff}

/* ---------- 05 · the chapter --------------------------------------------- */
.chapter{position:relative;z-index:2;min-height:100svh;display:flex;align-items:flex-end;
  overflow:hidden;background:#070707;padding-block:14vh clamp(30px,6vh,74px)}
.chapter__film{position:absolute;inset:0}
.chapter__film img,.chapter__film video{width:100%;height:100%;object-fit:cover}
.chapter__film video{position:absolute;inset:0;opacity:0;transition:opacity .7s linear}
.chapter__film video.is-ready{opacity:1}
.chapter::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(183deg,rgba(0,0,0,.52) 0%,rgba(0,0,0,.08) 36%,rgba(0,0,0,.84) 100%)}
.chapter__datum{position:absolute;left:0;right:0;top:var(--datum);height:2px;
  background:var(--orange);opacity:.9;z-index:2}
.chapter__in{position:relative;z-index:3;width:100%}
.chapter h2{font-size:clamp(2rem,5.4vw,4.4rem);max-width:16ch}
.chapter p{margin-top:clamp(14px,2.4vh,24px);max-width:44ch;color:var(--grey-cool)}

/* ---------- 06 · the close ----------------------------------------------- */
.end{position:relative;z-index:2;background:var(--paper);color:var(--ink);
  padding-block:clamp(60px,12vh,160px)}
.end__datum{position:absolute;left:0;right:0;top:0;height:2px;background:var(--orange)}
.end__kick{color:#636363}
.end__mail{display:block;margin-top:14px;font-family:var(--display);font-weight:600;
  letter-spacing:-.035em;line-height:1;font-size:clamp(1.8rem,7vw,6rem);word-break:break-word;
  transition:color .25s var(--ease-out)}
.end__mail:hover{color:var(--orange)}
.end__note{margin-top:clamp(20px,3.4vh,36px);max-width:44ch;color:#3a3a3a}
.end__colo{margin-top:clamp(36px,7vh,80px);padding-top:clamp(16px,3vh,26px);
  border-top:1px solid rgba(0,0,0,.16);color:#636363;max-width:72ch;
  letter-spacing:0;text-transform:none;line-height:1.65;font-weight:400}

/* ---------- reveals, and keeping still ----------------------------------- */
[data-in]{opacity:1;transform:none}
html.js [data-in]:not(.is-in){opacity:0;transform:translateY(16px)}
html.js [data-in]{transition:opacity .5s var(--ease-out),transform .7s var(--ease-out);
  transition-delay:0ms,var(--d,0ms)}

@media (prefers-reduced-motion:reduce){
  html.s-drift .load__strip{animation:none}
  .hero h1 .ln>span,.say__up>span,.say__dn>span{transform:none}
  .tile{opacity:1;filter:none;transform:none}
  .shot{--ss:1;--sx:0px;--sy:0px;opacity:1}
  .shot__draw,.shot::after{opacity:0}
  .hero__lead,.hero .credit,.hero__bar,.hero__datum,.say__datum{opacity:1;transform:none}
  .plan__fig{clip-path:none}
  .sched li{opacity:1;transform:none}
  .curtain,.work__wipe{transition:none}
}
html.rm .load__strip{animation:none!important}
html.rm .hero h1 .ln>span,html.rm .say__up>span,html.rm .say__dn>span{transform:none!important}
html.rm .tile{opacity:1!important;filter:none!important;transform:none!important}
html.rm .shot{--ss:1!important;--sx:0px!important;--sy:0px!important;opacity:1!important;transition:none!important}
html.rm .shot__draw,html.rm .shot::after{opacity:0!important}
html.rm .hero__lead,html.rm .hero .credit,html.rm .hero__datum,
html.rm .say__datum{opacity:1!important;transform:none!important}
html.rm .plan__fig{clip-path:none!important}
html.rm .sched li{opacity:1!important;transform:none!important}

/* without a script the page is the page: no entrance, nothing hidden */
html:not(.js) body{overflow:auto}
html:not(.js) .shot{position:relative;width:100%;height:auto;aspect-ratio:16/10;opacity:1}
html:not(.js) .shot::after,html:not(.js) .shot__draw{display:none}
html:not(.js) .hero{min-height:auto;padding-top:0}
html:not(.js) .hero h1 .ln>span,html:not(.js) .say__up>span,html:not(.js) .say__dn>span{transform:none}
html:not(.js) .hero__lead,html:not(.js) .hero .credit,html:not(.js) .bar{opacity:1}
html:not(.js) .bar{position:static;pointer-events:auto}
html:not(.js) .bar__open{display:none}
html:not(.js) .plan__fig{clip-path:none}
html:not(.js) .sched li{opacity:1;transform:none}
/* the attribute is there for the script to take off; without one it would
   leave the index out of the document altogether */
html:not(.js) .curtain[hidden]{display:block}
html:not(.js) .curtain{position:static;clip-path:none;visibility:visible;padding-block:8vh}
html:not(.js) .curtain__in{position:static;padding-top:0}
html:not(.js) .curtain__nav a,html:not(.js) .curtain__pic,
html:not(.js) .curtain__foot{opacity:1;transform:none}
html:not(.js) .curtain__close,html:not(.js) .curtain__datum{display:none}