/* davidmcgrawjr.com, rebuild A2. One stylesheet for every page.
   Day and night: white ground in the Photo Index manner, one night band per
   page in the place of LFA's navy band. Decisions and measurements in
   DESIGN.md. No external request of any kind. */

/* 1. Faces. Helvetica Neue by local() only; Inter stands in where it is absent */
@font-face{font-family:"HN";src:local("HelveticaNeue-Light"),local("Helvetica Neue Light");font-weight:300;font-style:normal}
@font-face{font-family:"HN";src:local("HelveticaNeue"),local("Helvetica Neue");font-weight:400;font-style:normal}
@font-face{font-family:"HN";src:local("HelveticaNeue-Medium"),local("Helvetica Neue Medium");font-weight:500;font-style:normal}
@font-face{font-family:"HN";src:local("HelveticaNeue-LightItalic"),local("Helvetica Neue Light Italic");font-weight:300;font-style:italic}
@font-face{font-family:"Inter A2";src:url("/assets/fonts/inter-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Adelia A2";src:url("/assets/fonts/adelia-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Adelia A2";src:url("/assets/fonts/adelia-light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Ivar A2";src:local("Ivar Display Condensed"),local("IvarDisplayCondensed-Regular"),url("/assets/fonts/ivar-display-condensed.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* 2. Tokens */
:root{
  --paper:#ffffff;
  --ink:#141414;
  --ink-2:#555555;
  --label:#767676;
  --hair:#e2e2e2;
  --night:#0c0c0d;
  --on-night:#f1f0ec;
  --on-night-2:#9b9a96;
  --on-night-hair:#2a2a2b;
  --blue:#4a86b8;

  --display:"Ivar A2","Ivar Display Condensed",Georgia,"Times New Roman",serif;
  --sans:"HN","Inter A2",Helvetica,sans-serif;
  --labelface:"Adelia A2","HN","Inter A2",Helvetica,sans-serif;
  --labelfeat:"kern" 1,"liga" 1,"dlig" 1,"ss01" 1,"ss02" 1,"ss04" 1,"ss08" 1;

  --m:clamp(16px,4vw,56px);
  --gut:clamp(16px,2.2vw,32px);
  --max:1600px;
  --section:clamp(72px,12vh,168px);

  --fs-xl:clamp(3.4rem,13vw,11rem);
  --fs-l:clamp(2.75rem,8vw,6.5rem);
  --fs-m:clamp(1.75rem,3.4vw,2.75rem);
  --fs-lede:clamp(1.25rem,2.1vw,1.6rem);
  --fs-body:1.0625rem;
  --fs-cap:0.875rem;
  --fs-label:0.75rem;

  --ease:cubic-bezier(0.16,1,0.3,1);
  --stagger:100ms;
  --head-h:64px;
}
@media (min-width:768px){:root{--fs-body:1.125rem;--head-h:76px}}

/* 3. Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:300;font-size:var(--fs-body);line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"kern" 1}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:0.22em}
a:hover{text-decoration-color:var(--blue)}
p{margin:0 0 1em}
h1,h2,h3{margin:0;font-weight:400}
figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
::selection{background:#dfe9f3}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:var(--m);top:-60px;z-index:200;background:var(--ink);color:var(--paper);padding:12px 16px;min-height:44px;display:inline-flex;align-items:center;text-decoration:none;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;font-weight:400;font-family:var(--labelface);font-feature-settings:var(--labelfeat)}
.skip:focus{top:8px}
.wrap{width:100%;max-width:calc(var(--max) + 2 * var(--m));margin:0 auto;padding:0 var(--m)}
.label{font-size:var(--fs-label);font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--label);line-height:1.3;font-family:var(--labelface);font-feature-settings:var(--labelfeat)}
.display{font-family:var(--display);font-weight:400}
.measure{max-width:60ch}

/* 4. Header. Not fixed: the photographs get the whole screen */
.site-head{position:relative;z-index:50;height:var(--head-h);display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:inline-flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;color:var(--ink)}
.brand img{height:30px;width:auto}
.site-head.is-home .brand span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.brand span{font-family:var(--display);font-size:1.375rem;line-height:1;letter-spacing:.005em;white-space:nowrap}
@media (min-width:768px){.brand img{height:34px}.brand span{font-size:1.625rem}}
.nav ul{display:flex;gap:clamp(14px,2.2vw,34px)}
.nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;min-width:44px;justify-content:center;text-decoration:none;font-size:var(--fs-label);font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);font-family:var(--labelface);font-feature-settings:var(--labelfeat)}
@media (min-width:1024px){.nav a{font-size:.8125rem}}
.nav a::after{content:"";position:absolute;left:0;right:.16em;bottom:10px;height:1px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.nav a:hover::after{transform:scaleX(1)}
.nav a[aria-current="page"],.nav a.is-section{color:var(--ink)}
.nav a[aria-current="page"]::after,.nav a.is-section::after{transform:scaleX(1);height:2px}
.menu-btn{display:none}
/* Under 768 with script: a text button opens a full screen menu */
@media (max-width:767px){
  .js .menu-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:64px;font-size:var(--fs-label);font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);position:relative;z-index:120;font-family:var(--labelface);font-feature-settings:var(--labelfeat)}
  .js .nav{position:fixed;inset:0;z-index:110;background:var(--paper);display:flex;align-items:flex-end;padding:calc(var(--head-h) + 24px) var(--m) 48px;visibility:hidden;opacity:0;transition:opacity .45s var(--ease),visibility 0s linear .45s}
  .js .nav ul{flex-direction:column;gap:4px}
  .js .nav a{font-family:var(--display);font-size:clamp(2.5rem,13vw,3.5rem);letter-spacing:0;text-transform:none;color:var(--ink);justify-content:flex-start;min-height:56px;transform:translateY(18px);opacity:0;transition:transform .7s var(--ease),opacity .7s var(--ease)}
  .js .nav a::after{bottom:6px;height:2px}
  .js .menu-open .nav{visibility:visible;opacity:1;transition:opacity .45s var(--ease)}
  .js .menu-open .nav a{transform:none;opacity:1}
  .js .menu-open .nav li:nth-child(2) a{transition-delay:50ms}
  .js .menu-open .nav li:nth-child(3) a{transition-delay:100ms}
  .js .menu-open .nav li:nth-child(4) a{transition-delay:150ms}
  .js .menu-open .nav li:nth-child(5) a{transition-delay:200ms}
  .js .menu-open .nav li:nth-child(6) a{transition-delay:250ms}
  .js .menu-open .brand{position:relative;z-index:120}
  /* no script: the five links wrap under the name */
  html:not(.js) .site-head{height:auto;flex-wrap:wrap;padding-top:10px;padding-bottom:6px}
  html:not(.js) .nav ul{flex-wrap:wrap;gap:0 16px}
}
.menu-lock{overflow:hidden}
[hidden]{display:none!important}
html:not(.js) .roll{overflow-x:auto;cursor:auto;padding:0 var(--m)}
html:not(.js) .roll-track > [aria-hidden="true"]{display:none}

/* 5. Home */
.hero{min-height:calc(100svh - var(--head-h));display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(20px,3vh,40px)}
.hero__name{font-family:var(--display);font-size:var(--fs-xl);line-height:.9;letter-spacing:-.01em;margin:0;max-width:16ch}
.hero__line{margin:clamp(14px,2vh,22px) 0 0;display:flex;flex-wrap:wrap;gap:6px 28px;align-items:baseline}
.hero__roll{margin-top:clamp(24px,4vh,48px)}
.section{padding-top:var(--section)}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-top:1px solid var(--hair);padding-top:18px;margin-bottom:clamp(28px,4vh,48px);position:relative}
.section-head h2{font-family:var(--display);font-size:var(--fs-m);line-height:1.05}
.section-head a.label{min-height:44px;display:inline-flex;align-items:center;text-decoration:none}
.section-head a.label:hover{color:var(--ink)}

/* 6. The roll: one slow continuous row, tactile (LFA M6), keyboard pause only (LFA M7) */
/* No fade at the ends (David, 2026-10-08): the row runs full bleed and clips hard at the viewport edge */
.roll{position:relative;overflow:hidden;--roll-h:clamp(200px,38svh,500px);touch-action:pan-y;cursor:grab;width:100vw;margin-left:calc(50% - 50vw)}
.roll.is-scrubbing{cursor:grabbing}
.roll-track{display:flex;align-items:flex-start;gap:clamp(20px,3vw,48px);width:max-content;will-change:transform}
.roll-item{flex:0 0 auto;margin:0}
.roll-item a{display:block;text-decoration:none;color:inherit;-webkit-user-drag:none}
.roll-item img{height:var(--roll-h);width:auto;aspect-ratio:var(--r);-webkit-user-drag:none;user-select:none;background:#f3f3f3}
.roll-item figcaption{margin-top:12px;font-size:var(--fs-cap);line-height:1.45;color:var(--ink-2);max-width:30ch}
.roll-item .label{display:block;margin-bottom:2px}
.roll:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.roll[data-static]{overflow-x:auto;cursor:auto;scroll-snap-type:x proximity;padding:0 var(--m)}
.roll[data-static] .roll-track > [aria-hidden="true"]{display:none}
.roll--plate{--roll-h:clamp(240px,46vh,480px)}

/* 7. Tiles (Design) */
.tiles{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,48px) var(--gut)}
@media (min-width:480px){.tiles{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.tiles{grid-template-columns:repeat(3,1fr)}}
.tile a{display:block;text-decoration:none;color:inherit}
.tile__img{overflow:hidden;aspect-ratio:3/2;background:#f3f3f3}
.tile__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.tile a:hover .tile__img img{transform:scale(1.025)}
.tile__t{display:block;font-family:var(--display);font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.05;margin-top:14px}
.tile__n{display:block;font-size:var(--fs-cap);color:var(--ink-2);margin-top:4px;line-height:1.45}

/* 8. Page openings */
.page-open{padding-top:clamp(56px,14vh,180px);padding-bottom:clamp(40px,8vh,96px)}
.page-title{font-family:var(--display);font-size:var(--fs-l);line-height:.94;letter-spacing:-.005em;margin:0}
.page-kicker{margin-top:clamp(14px,2vh,22px)}
.lede{font-size:var(--fs-lede);line-height:1.38;max-width:34ch;margin-top:clamp(20px,3vh,32px);color:var(--ink)}
.prose{max-width:60ch}
.prose p{margin-bottom:1.1em}
.prose a{text-decoration:underline}

/* 9. Photographs index: an index in the literal sense */
.pindex{border-top:1px solid var(--hair)}
.pindex li{border-bottom:1px solid var(--hair);position:relative}
.pindex a{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:var(--gut);padding:14px 0;min-height:44px;text-decoration:none;color:inherit}
.pindex__img{height:clamp(72px,11vw,150px);width:auto;aspect-ratio:var(--r);overflow:hidden;background:#f3f3f3}
.pindex__img img{height:100%;width:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.pindex a:hover .pindex__img img{transform:scale(1.04)}
.pindex__t{display:block;font-family:var(--display);font-size:clamp(1.375rem,4.2vw,3.5rem);line-height:1;transition:transform .6s var(--ease)}
.pindex a:hover .pindex__t{transform:translateX(8px)}
.pindex__meta{display:flex;gap:18px;margin-top:8px}
@media (min-width:1024px){.pindex a{grid-template-columns:clamp(160px,16vw,230px) 1fr auto}.pindex__img{justify-self:start}.pindex__meta{margin:0}.pindex__main{display:contents}}

/* 10. Gallery page */
.gallery{display:grid;grid-template-columns:1fr;gap:0 var(--gut);padding-top:clamp(40px,8vh,96px)}
.g-aside{padding-bottom:clamp(40px,7vh,80px)}
.g-title{font-family:var(--display);font-size:var(--fs-l);line-height:.94;margin:0}
.g-aside > .label a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.g-aside > .label a:hover{color:var(--ink)}
.g-text{margin-top:20px;max-width:46ch;color:var(--ink-2)}
.g-text p:last-child{margin-bottom:0}
.g-meta{margin-top:22px;display:flex;align-items:baseline;gap:14px}
.count{display:inline-flex;align-items:baseline;gap:.4em;font-size:var(--fs-label);font-weight:400;letter-spacing:.18em;color:var(--label);font-variant-numeric:tabular-nums;font-family:var(--labelface);font-feature-settings:var(--labelfeat)}
.count__now{position:relative;display:inline-block;overflow:hidden;height:1.3em;line-height:1.3em;vertical-align:bottom;color:var(--ink)}
.count__now span{display:block}
.count__now span.out{position:absolute;left:0;top:0;animation:digit-out .5s var(--ease) forwards}
.count__now span.in{animation:digit-in .5s var(--ease)}
@keyframes digit-out{to{transform:translateY(-100%);opacity:0}}
@keyframes digit-in{from{transform:translateY(100%);opacity:0}}
.g-seq{--gap-ph:clamp(64px,14vh,160px)}
.ph{display:flex;margin:0 0 var(--gap-ph)}
.ph.a-r{justify-content:flex-end}
.ph.a-c{justify-content:center}
.ph-open{display:block;cursor:zoom-in;position:relative}
.ph img{width:min(100%,calc(84vh * var(--r)));aspect-ratio:var(--r);height:auto;background:#f3f3f3}
@media (max-width:599px){
  .g-seq{--gap-ph:clamp(28px,6vh,56px)}
  .ph{margin-left:calc(-1 * var(--m));margin-right:calc(-1 * var(--m))}
  .ph-open{width:100%}
  .ph img{width:100%;max-width:none}
}
@media (min-width:1024px){
  .gallery{grid-template-columns:repeat(12,minmax(0,1fr))}
  .g-aside{grid-column:1 / span 3;position:sticky;top:32px;align-self:start;padding-bottom:0}
  .g-seq{grid-column:4 / span 9}
  .g-title{font-size:clamp(2.5rem,4.2vw,4.75rem)}
  .ph img{width:min(84%,calc(80vh * var(--r)))}
  .ph.a-c img{width:min(72%,calc(80vh * var(--r)))}
}
.more{display:flex;justify-content:center;margin:0 0 var(--section)}
.more button{min-height:44px;padding:0 22px;border:1px solid var(--hair);font-size:var(--fs-label);font-weight:400;letter-spacing:.18em;text-transform:uppercase;transition:border-color .4s var(--ease);font-family:var(--labelface);font-feature-settings:var(--labelfeat)}
.more button:hover{border-color:var(--ink)}
.next{border-top:1px solid var(--hair);padding-top:18px;margin-top:var(--section)}
.next a{display:grid;grid-template-columns:1fr;gap:16px;text-decoration:none;color:inherit;min-height:44px}
.next__t{font-family:var(--display);font-size:var(--fs-m);line-height:1.05;display:block;margin-top:6px}
.next__img{max-width:min(100%,560px)}
.next__img img{width:100%;aspect-ratio:var(--r)}
@media (min-width:768px){.next a{grid-template-columns:1fr 1fr;align-items:end}.next__img{justify-self:end;width:100%}}

/* 11. Viewer: the night ground, the picture contained */
.viewer{position:fixed;inset:0;z-index:300;background:var(--night);color:var(--on-night);display:grid;grid-template-rows:auto 1fr auto;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s linear .45s}
.viewer.is-open{opacity:1;visibility:visible;transition:opacity .45s var(--ease)}
.viewer__bar{display:flex;justify-content:space-between;align-items:center;padding:8px var(--m);min-height:60px}
.viewer__stage{position:relative;display:flex;align-items:center;justify-content:center;padding:0 var(--m);min-height:0;touch-action:pan-y pinch-zoom}
.viewer__stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:opacity .35s var(--ease),transform .6s var(--ease)}
.viewer__stage img.is-swap{opacity:0;transform:scale(.985)}
.viewer__ctl{display:flex;justify-content:space-between;padding:8px var(--m) max(12px,env(safe-area-inset-bottom))}
.viewer button{min-height:44px;min-width:44px;padding:0 12px;font-size:var(--fs-label);font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--on-night);font-family:var(--labelface);font-feature-settings:var(--labelfeat)}
.viewer button:hover{color:#fff}
.viewer .count{color:var(--on-night-2)}
.viewer .count__now{color:var(--on-night)}
.viewer :focus-visible{outline-color:var(--on-night)}

/* 12. Design project pages */
.proj-open{padding-top:clamp(40px,9vh,120px);padding-bottom:clamp(32px,6vh,72px)}
.page-logo{display:flex;align-items:center;gap:32px;width:max-content;max-width:100%;padding:28px;margin-bottom:clamp(28px,4vh,48px)}
.page-logo__mark{display:block}
.page-logo img{display:block;width:auto;height:clamp(96px,13vw,168px);max-width:100%}
.page-logo--lockup{--logo-h:clamp(96px,13vw,168px);gap:calc(var(--logo-h) * var(--logo-gap,0))}
.page-logo--lockup .page-logo__mark img{height:var(--logo-h)}
.page-logo__crest{display:block}
.page-logo__crest svg{display:block;width:auto;height:calc(var(--logo-h) * var(--logo-second,1));max-width:100%}
.page-logo__crest path{fill:var(--logo-ink,currentColor)}
@media (max-width:539px){.page-logo{padding:20px;gap:20px}.page-logo img{height:clamp(72px,22vw,104px)}.page-logo--lockup{--logo-h:clamp(72px,22vw,104px)}}
.sentences{max-width:60ch;margin-top:clamp(20px,3vh,32px)}
.sentences p:first-child{font-size:var(--fs-lede);line-height:1.38;color:var(--ink)}
.sentences p{color:var(--ink-2)}
.plates{padding-bottom:var(--section)}
.plate-heading{font-family:var(--display);font-size:var(--fs-m);line-height:1.05;margin:clamp(56px,10vh,120px) 0 18px;padding-top:18px;position:relative;max-width:24ch}
.plate-heading::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--hair);width:calc(100vw - 2 * var(--m));max-width:var(--max)}
.plate-text{max-width:60ch;color:var(--ink-2)}
.m-plate{margin:clamp(28px,5vh,56px) 0 0}
.m-plate > img,.m-plate > a > img,.m-plate > video{width:100%;max-width:min(var(--max),var(--mw,100%))}
.m-cap,.t-cap{display:block;margin-top:12px;font-size:var(--fs-cap);line-height:1.45;color:var(--label);max-width:60ch;font-weight:300}
.pair{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,48px) var(--gut);align-items:start}
@media (min-width:900px){.pair{grid-template-columns:1fr 1fr}}
.pair__cell img{width:100%}
.plate-link{display:block;text-decoration:none;color:inherit}
.plate-link--cap{color:var(--label)}
.strip{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gut)}
@media (min-width:768px){.strip{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1200px){.strip{grid-template-columns:repeat(5,1fr)}}
.strip img{width:100%}
.strip li > .m-cap,.strip li figcaption{margin-top:8px}
.plate-video{width:100%;background:#f3f3f3}
.plate-pre{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.875rem;line-height:1.6;background:#f6f6f4;padding:20px;overflow-x:auto;max-width:100%;white-space:pre;margin:0}
.plate-links{margin-top:18px;border-top:1px solid var(--hair);max-width:60ch}
.plate-links li{border-bottom:1px solid var(--hair)}
.plate-links a{display:flex;align-items:center;min-height:52px;padding:10px 0;text-decoration:none;color:var(--ink);font-size:var(--fs-body);transition:transform .5s var(--ease)}
.plate-links a:hover{transform:translateX(6px)}
.plate-links a::after{content:"";flex:0 0 auto;width:0}
.link-icon{display:none}
.linkline{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;margin-top:clamp(48px,8vh,96px);border-top:1px solid var(--hair);padding-top:18px}
.linkline__label{font-size:var(--fs-label);font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--label);font-family:var(--labelface);font-feature-settings:var(--labelfeat)}
.linkline a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--display);font-size:var(--fs-m);line-height:1;text-decoration:none}
.linkline a:hover{text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:2px}
.tap{min-height:44px}
.tecc-wrap{font-family:var(--sans)}

/* 13. Published ledger */
.ledger{border-top:1px solid var(--hair);margin-top:clamp(28px,4vh,40px)}
.ledger-group + .ledger-group{margin-top:clamp(56px,9vh,104px)}
.ledger li{border-bottom:1px solid var(--hair)}
.ledger a{display:grid;grid-template-columns:1fr;gap:6px;padding:18px 0;min-height:44px;text-decoration:none;color:inherit}
.ledger__t{font-family:var(--display);font-size:var(--fs-m);line-height:1.05;transition:transform .6s var(--ease);display:block}
.ledger a:hover .ledger__t{transform:translateX(8px)}
@media (min-width:768px){.ledger a{grid-template-columns:1fr auto;align-items:baseline;gap:var(--gut)}}

/* 14. About and Contact */
.about{display:grid;grid-template-columns:1fr;gap:clamp(32px,5vw,72px) var(--gut);align-items:start}
.about__portrait img{width:100%}
@media (min-width:900px){.about{grid-template-columns:repeat(12,minmax(0,1fr))}.about__text{grid-column:1 / span 7}}
.about__text h2{font-family:var(--display);font-size:var(--fs-m);line-height:1.05;margin:clamp(48px,8vh,96px) 0 18px;padding-top:18px;border-top:1px solid var(--hair)}
.studio{margin-top:clamp(40px,6vh,64px);border-top:1px solid var(--hair);padding-top:18px;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.studio a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--display);font-size:var(--fs-m);text-decoration:none}
.studio a:hover{text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:2px}
.contact-mail{display:inline-block;font-family:var(--display);font-size:clamp(1.75rem,7.4vw,6rem);line-height:1;text-decoration:none;word-break:break-word;padding:10px 0;margin-top:clamp(20px,4vh,40px)}
.contact-mail:hover{text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:2px}
.contact-ig{margin-top:clamp(20px,3vh,32px);display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.contact-ig a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--fs-lede)}

/* 15. Night band footer */
.band{background:var(--night);color:var(--on-night);margin-top:var(--section);position:relative}
.band__in{padding-top:clamp(64px,12vh,144px);padding-bottom:clamp(28px,5vh,48px)}
.band__name{font-family:var(--display);font-size:var(--fs-l);line-height:.94;margin:0}
.band__mail{display:inline-flex;align-items:center;min-height:44px;margin-top:clamp(18px,3vh,28px);font-size:var(--fs-lede);text-decoration:none;color:var(--on-night);word-break:break-word}
.band__mail:hover,.band a:hover{text-decoration:underline;text-decoration-color:var(--blue)}
.band__grid{display:grid;grid-template-columns:1fr;gap:28px;margin-top:clamp(48px,9vh,112px);border-top:1px solid var(--on-night-hair);padding-top:18px}
.band .label{color:var(--on-night-2)}
.band ul{display:flex;flex-wrap:wrap;gap:0 22px}
.band ul a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--on-night);font-size:var(--fs-label);font-weight:400;letter-spacing:.16em;text-transform:uppercase;font-family:var(--labelface);font-feature-settings:var(--labelfeat)}
.band__fine{display:flex;flex-wrap:wrap;gap:0 22px;align-items:center}
.band__fine a{color:var(--on-night-2)!important}
.band :focus-visible{outline-color:var(--on-night)}
@media (min-width:900px){.band__grid{grid-template-columns:1fr auto;align-items:center}}

/* 16. Loader: first entry of the session only */
.loader{position:fixed;inset:0;z-index:400;background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;pointer-events:none}
.loader img{height:clamp(64px,10vh,96px);width:auto;clip-path:inset(100% 0 0 0);animation:ld-crest .7s var(--ease) .05s forwards}
.loader__name{font-family:var(--display);font-size:clamp(1.75rem,5vw,2.75rem);line-height:1;display:flex;gap:.28em;overflow:hidden;padding-bottom:.08em}
.loader__name span{display:block;transform:translateY(105%);animation:ld-word .46s var(--ease) forwards}
.loader__name span:nth-child(2){animation-delay:.12s}
.loader__name span:nth-child(3){animation-delay:.24s}
.loader.is-out{animation:ld-out .5s cubic-bezier(.7,0,.2,1) forwards}
@keyframes ld-crest{to{clip-path:inset(0 0 0 0)}}
@keyframes ld-word{to{transform:none}}
@keyframes ld-out{to{clip-path:inset(0 0 100% 0)}}

/* 17. Motion. Text is static. Images settle once, 300 ms, opacity only. Hidden states apply only under html.js and never under reduced motion */
.js .rv-img{opacity:0;transition:opacity .3s ease-out}
.js .hero-settle{opacity:0;transition:opacity .3s ease-out}
.rv-img.is-in,.hero-settle.is-in{opacity:1}
.ln{display:block}
.is-done{will-change:auto!important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rv,.js .rv-img,.js .rv-img img,.js .rv-img video,.js .rv-lines,.js .chrome,.js .hero-settle,.js .band .band__in{opacity:1!important;transform:none!important}
  .js .band{clip-path:none!important}
  .js .rule-draw::before{transform:none!important}
  .js .track-in{letter-spacing:.18em!important}
  .ln > span{transform:none!important}
  .loader{display:none!important}
  .roll{overflow-x:auto;cursor:auto;padding:0 var(--m)}
  .roll-track > [aria-hidden="true"]{display:none}
  .tile a:hover .tile__img img,.pindex a:hover .pindex__img img{transform:none}
}

/* 18. Small text pages and 404 */
.text-page{padding-bottom:var(--section)}
.notfound{min-height:50vh}
.section-head h2 a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.section-head h2 a:hover{text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:2px}