/* Cailyn Aungst Photography, design v2. Stage black, one big serif, small tracked labels. Phone first; the desktop grid starts at 900px. */

@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --bg:#09090A; --ink:#F1EDE6; --mute:#A39E95; --line:rgba(241,237,230,.18);
  --paper:#ECE7DE; --paper-ink:#0E0E0F; --paper-mute:#5C5850; --paper-line:rgba(14,14,15,.28);
  --hot:#FF5A3C; --bad:#B3261E;
  --serif:"Instrument Serif","Iowan Old Style","Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --m:20px;            /* page margin */
  --gap:16px;          /* grid gutter */
  --head:0px;          /* height of a fixed top header (desktop only) */
  --ease:cubic-bezier(.2,.7,.1,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
h1,h2,p,figure{margin:0}
a{color:inherit}
em{font-style:italic}
:focus-visible{outline:2px solid var(--hot);outline-offset:4px;border-radius:2px}
::selection{background:var(--ink);color:var(--bg)}
section{scroll-margin-top:var(--head)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:12px;top:-80px;z-index:100;background:var(--ink);color:var(--bg);padding:12px 16px;font-size:14px;text-decoration:none}
.skip:focus{top:12px}

/* small tracked labels: captions, kickers, nav */
.label{font:400 11px/1.5 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.label a{color:var(--ink);text-decoration:none}
.handle{border-bottom:1px solid currentColor;padding-bottom:1px}
.arr{display:inline-block;margin-left:.45em;font-size:1.1em;line-height:1}
.display{font:400 clamp(52px,15.5vw,132px)/.9 var(--serif);letter-spacing:-.02em}
.text-link{display:inline-flex;align-items:center;gap:.5em;min-height:44px;font-size:15px;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border:1px solid var(--ink);border-radius:999px;background:var(--ink);color:var(--bg);font:400 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;cursor:pointer}

/* ---------- header and nav ---------- */
.head{position:absolute;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:max(10px,env(safe-area-inset-top)) var(--m) 0;height:64px}
.brand,.head-ig,.nav a{font:400 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--ink);display:inline-flex;align-items:center;min-height:44px}
.brand{letter-spacing:.2em}
/* phones: the nav is a dock at the thumb, with Book as the one filled button */
.nav{position:fixed;z-index:30;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:4px;padding:6px 6px 6px 22px;border:1px solid var(--line);border-radius:999px;background:rgba(16,16,18,.78);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3)}
.nav a{min-height:46px;padding:0 6px;white-space:nowrap}
.nav .nav-ig{display:none}
.nav .nav-book{margin-left:auto;padding:0 22px;border-radius:999px;background:var(--ink);color:var(--bg)}
.nav a:nth-child(2){margin-left:14px}
@media (max-width:379.98px){.nav{padding-left:16px}.nav a:nth-child(2){margin-left:4px}.nav .nav-book{padding:0 18px}}
/* narrow phones: Portfolio, About and Book a date all stay in the dock (About was the one squeezed out) */
@media (max-width:339.98px){.nav{left:8px;right:8px;gap:0;padding-left:10px}.nav a{padding:0 5px;letter-spacing:.12em}.nav a:nth-child(2){margin-left:0}.nav .nav-book{padding:0 12px}}
.nav.away{transform:translateY(calc(100% + 40px));visibility:hidden}

/* ---------- cover ---------- */
.cover{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.cover-shot{position:absolute;inset:0;z-index:-1}
.cover-shot img{width:100%;height:100%;object-fit:cover;object-position:60% 30%}   /* phones show a strip of cover.jpg; 60% keeps Tommy Richman (right of centre) in it. Revisit if the cover photo changes. */
.cover-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,9,10,.5) 0,rgba(9,9,10,0) 16%,rgba(9,9,10,0) 38%,rgba(9,9,10,.72) 68%,var(--bg) 100%)}
.cover-text{width:100%;padding:96px var(--m) calc(96px + env(safe-area-inset-bottom))}
.cover-kicker{display:flex;flex-direction:column;gap:3px;color:var(--ink)}
/* the one h1 holds the small label line and the name; the big type sits on .h1-name */
h1{font:inherit;letter-spacing:inherit}
.h1-name{display:block;font:400 min(27vw,19vh)/.78 var(--serif);letter-spacing:-.035em;margin:16px 0 20px -.04em;padding-bottom:.06em}
h1 .ln{display:block;overflow:hidden;padding:.06em .04em .32em;margin:-.06em -.04em -.32em}   /* the clip window reaches below the line so the g and y keep their tails */
h1 .ln>span{display:block}
.lede{max-width:34ch;font-size:16px;line-height:1.5;color:var(--ink);text-wrap:pretty}
.actions{display:flex;align-items:center;gap:22px;margin-top:20px}
.cover-ig{margin-top:6px}
.cover-ig a{display:inline-flex;align-items:center;gap:.6em;min-height:44px}
.cover-ig .arr{margin-left:0}
/* phones: the dock holds the one filled Book button, so the cover offers the work instead, as a quiet outline */
@media (max-width:899.98px){
  .actions .btn{display:none}
  .cover-ig{display:none}   /* Instagram is already top right on the same screen; dropping the repeat lets the name sit below the performer's face */
  .actions .text-link{min-height:52px;padding:0 28px;border:1px solid rgba(241,237,230,.6);border-radius:999px;font:400 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
}
/* short phones (320x568 and the like): the cover's content is taller than the screen, which pushed "See the work" under the dock. Tighten it so the button clears the dock on the first screen. */
@media (max-width:899.98px) and (max-height:600px){
  .cover-text{padding-top:72px}
  .h1-name{margin:12px 0 14px -.04em}
  .lede{font-size:15px;line-height:1.45}
  .actions{margin-top:14px}
}

/* ---------- "Photo coming soon": one switch. Delete data-standins from <body> and every label goes. ---------- */
[data-standins] [data-slot]::after{content:"Photo coming soon";color:var(--mute);opacity:.85}
.soon,.standin-note{display:none}
[data-standins] .soon{display:inline}
[data-standins] .standin-note{display:block}

/* ---------- selected work ---------- */
.work{padding:88px var(--m) 96px}
.sec-head{display:flex;flex-direction:column;gap:18px;margin-bottom:18px}
.work-intro{margin-top:18px;max-width:44ch;font-size:16px;line-height:1.5;color:#CFCAC1}
/* the category filter: tracked labels on a rule. Disabled (no JavaScript) they read as plain labels. */
.work-bar{display:flex;flex-direction:column;border-top:1px solid var(--line);padding-top:4px;margin-bottom:36px}
.filter{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 8px}
.filter button{-webkit-appearance:none;appearance:none;position:relative;min-height:44px;margin:0;padding:0;border:0;border-radius:0;background:none;color:var(--mute);letter-spacing:.12em;cursor:pointer;-webkit-tap-highlight-color:transparent}
.filter button::after{content:"";position:absolute;left:0;right:.12em;bottom:9px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left}
.filter button[aria-pressed="true"]{color:var(--ink)}
.filter button[aria-pressed="true"]::after{transform:scaleX(1)}
.filter button:disabled{cursor:default;color:var(--mute)}
.filter button:disabled::after,.filter button:disabled[data-filter="all"]{display:none}
.standin-note{padding:6px 0 4px;opacity:.85}
[hidden]{display:none!important}
.sec-aside a,.prose-ig a,.book-ig a{display:inline-flex;align-items:center;gap:.6em;min-height:44px}
.sec-aside .arr,.prose-ig .arr,.book-ig .arr{margin-left:0}
.spread{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:56px var(--gap)}
.shot{grid-column:1/-1;margin-inline:calc(var(--m) * -1)}
.frame{overflow:hidden;background:#121214}
.frame img{width:100%;height:100%;object-fit:cover}
.s1 .frame,.s3 .frame,.s7 .frame,.s8 .frame,.s11 .frame,.s12 .frame{aspect-ratio:3/2}
.s2 .frame,.s4 .frame,.s6 .frame,.s9 .frame,.s10 .frame{aspect-ratio:4/5}
.s5 .frame{aspect-ratio:21/9}
.s3 img{object-position:50% 40%}
figcaption{display:flex;gap:14px;padding:12px var(--m) 0}
figcaption .idx{color:var(--ink)}
figcaption::after{margin-left:auto}
/* phones: every photo touches an edge; the tall ones step in from one side for rhythm */
.s2{margin-left:calc(var(--m) * 2.6)}
.s2 figcaption,.s6 figcaption{padding-left:0}
.s4{margin-right:calc(var(--m) * 2.6)}
.s4 figcaption{padding-right:0}
.s6{margin-left:calc(var(--m) * 1.3)}
/* second set (work-7 to work-12, restored 2026-11-11 after pass #3265 dropped them): the same steps in */
.s9{margin-left:calc(var(--m) * 2.6)}
.s10{margin-right:calc(var(--m) * 2.6)}
.s9 figcaption{padding-left:0}
.s10 figcaption{padding-right:0}
.outro{grid-column:1/-1;display:flex;flex-direction:column;gap:2px;padding-top:8px}
.outro-q{font:400 clamp(34px,9.5vw,56px)/1 var(--serif);letter-spacing:-.015em}
.nb{white-space:nowrap}
/* a category is chosen: the frames sit evenly, edge to edge on phones */
.spread[data-filter] .shot{margin-inline:calc(var(--m) * -1)}
.spread[data-filter] figcaption{padding-inline:var(--m)}

/* ---------- about ---------- */
.about{padding:0 var(--m) 104px}
.route{display:flex;align-items:center;gap:12px;padding:20px 0;border-top:1px solid var(--line);margin-bottom:64px;white-space:nowrap;color:var(--ink)}
.route i{flex:1;height:1px;background:var(--line);min-width:12px}
.route span:last-child,.route i:last-of-type{display:none}
.about-head .label{margin-bottom:18px}
.prose{margin-top:40px;max-width:62ch}
.prose p+p{margin-top:1.15em}
.prose p{color:#CFCAC1}
.prose .lead{font:400 clamp(25px,6.6vw,34px)/1.22 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.prose .prose-cta{margin-top:26px}
.prose .prose-ig{margin-top:10px;color:var(--mute)}

/* ---------- book: the one light page ---------- */
.book{background:var(--paper);color:var(--paper-ink);padding:80px var(--m) 72px;color-scheme:light}
.book .label{color:var(--paper-mute)}
.book .label a{color:var(--paper-ink)}
.book-intro .label{margin-bottom:18px}
.intro{margin-top:26px;max-width:46ch;font-size:17px}
.contact{margin-top:44px}
.field{display:flex;flex-direction:column;margin-bottom:30px}
.field label{font:400 11px/1.5 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.field small{order:3;margin-top:8px;font-size:13px;line-height:1.4;color:var(--paper-mute)}
.field input,.field select,.field textarea{order:2;width:100%;min-height:52px;padding:10px 0;border:0;border-bottom:1px solid var(--paper-line);border-radius:0;background:transparent;color:var(--paper-ink);font:400 19px/1.35 var(--sans);-webkit-appearance:none;appearance:none}
.field textarea{resize:vertical;min-height:120px;padding-top:14px}
.field select{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%230E0E0F' stroke-width='1.4'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E") no-repeat right 4px center;padding-right:28px}
.field input:hover,.field select:hover,.field textarea:hover{border-bottom-color:var(--paper-ink)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:0;border-bottom-color:var(--paper-ink);box-shadow:0 2px 0 var(--paper-ink)}
.field [aria-invalid="true"]{border-bottom-color:var(--bad);box-shadow:0 2px 0 var(--bad)}
.book :focus-visible{outline-color:var(--paper-ink)}
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.send{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.send small{font-size:13px;color:var(--paper-mute)}
.btn-ink{width:100%;min-height:60px;background:var(--paper-ink);border-color:var(--paper-ink);color:var(--paper)}
.btn-ink[disabled]{opacity:.55}
.status{margin:0 0 28px;font-size:15px;line-height:1.45;scroll-margin-top:calc(var(--head) + 24px)}
.status:empty{display:none}
.status.bad{position:sticky;top:calc(var(--head) + 12px);z-index:5;padding:14px 18px;background:var(--bad);color:#fff;border-radius:4px}
.status.ok{font:400 clamp(28px,7vw,40px)/1.12 var(--serif);letter-spacing:-.01em;padding-bottom:28px;border-bottom:1px solid var(--paper-line)}
.book-ig{margin-top:36px;padding-top:14px;border-top:1px solid var(--paper-line)}

/* ---------- footer ---------- */
.foot{padding:72px var(--m) calc(40px + env(safe-area-inset-bottom))}
.foot-name{font:400 clamp(40px,11.5vw,88px)/.95 var(--serif);letter-spacing:-.02em}
.foot-name em{color:var(--mute)}
.foot-grid{display:grid;gap:14px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line)}
.foot-nav{display:flex;flex-wrap:wrap;gap:0 26px}
.foot-nav a{display:inline-flex;align-items:center;min-height:44px}

/* ---------- desktop ---------- */
@media (min-width:900px){
  :root{--m:clamp(32px,3.4vw,64px);--gap:clamp(20px,1.7vw,32px);--head:72px}
  body{font-size:17px}
  .head{position:fixed;height:var(--head);padding-top:0;transition:background-color .4s,border-color .4s;border-bottom:1px solid transparent}
  .head.solid{background:rgba(9,9,10,.82);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom-color:var(--line)}
  .head-ig{display:none}
  .nav{position:static;gap:clamp(22px,2.6vw,44px);padding:0;border:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;justify-content:flex-end}
  .nav.away{transform:none;visibility:visible}
  .nav a{padding:0;margin:0!important;position:relative}
  .nav .nav-ig{display:inline-flex}
  .nav .nav-book{min-height:40px;padding:0 20px;margin-left:0}
  .nav a:not(.nav-book)::after{content:"";position:absolute;left:0;right:0;bottom:10px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
  .nav a:not(.nav-book):hover::after{transform:scaleX(1)}

  .cover-kicker{flex-direction:row;gap:0 .5em}
  .cover-kicker .soon{margin-left:auto}
  .route span:last-child{display:inline;color:var(--mute)}
  .route i:last-of-type{display:block}
  .cover-shot img{object-position:50% 22%}
  .cover-shot::after{background:linear-gradient(180deg,rgba(9,9,10,.45) 0,rgba(9,9,10,0) 14%,rgba(9,9,10,0) 44%,rgba(9,9,10,.6) 74%,var(--bg) 100%)}
  .cover-text{padding:120px var(--m) 44px}
  .h1-name{font-size:min(18.5vw,42vh);line-height:.84;margin:10px 0 26px -.03em;white-space:nowrap}
  h1 .ln{display:inline-block;vertical-align:top}
  .cover-foot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:center;padding-top:22px;border-top:1px solid var(--line)}
  .lede{grid-column:1/6;font-size:17px;max-width:44ch}
  .actions{grid-column:8/13;margin:0;gap:28px;justify-self:end}
  .cover-ig{display:none}   /* Instagram is already in the header; two outside reviews asked for the repeat to go (Tester, 2026-11-11) */

  .work{padding:150px var(--m) 170px}
  .sec-head{flex-direction:row;align-items:flex-end;justify-content:space-between;margin-bottom:30px}
  .work-intro{margin-top:26px;font-size:17px}
  .work-bar{flex-direction:row;align-items:center;justify-content:space-between;gap:32px;padding-top:8px;margin-bottom:64px}
  .filter{justify-content:flex-start;gap:0 clamp(24px,2.8vw,44px)}
  .filter button{letter-spacing:.16em}
  .filter button::after{right:.16em}
  .standin-note{padding:0}
  .display{font-size:clamp(84px,9.4vw,168px);line-height:.86}
  .spread{grid-template-columns:repeat(12,minmax(0,1fr));row-gap:clamp(90px,8.5vw,150px)}
  .shot,.s2,.s4,.s6{margin-inline:0}
  figcaption{padding:14px 0 0}
  .s1{grid-column:1/8}
  .s2{grid-column:8/13;margin-top:clamp(60px,8vw,140px)}
  .s4{grid-column:1/6;grid-row:2}
  .s3{grid-column:6/13;grid-row:2;align-self:end}
  .s5{grid-column:1/-1;margin-inline:calc(var(--m) * -1)}
  .s5 figcaption{padding-inline:var(--m)}
  .s6{grid-column:1/7}
  /* second set: s7 sits beside s6, then the s1/s2 and s4/s3 pairs again, and s12 beside the ending */
  .s7,.s8,.s9,.s10,.s11,.s12{margin-inline:0}
  .s7{grid-column:7/13;align-self:end}
  .s8{grid-column:1/8}
  .s9{grid-column:8/13;margin-top:clamp(60px,8vw,140px)}
  .s10{grid-column:1/6}
  .s11{grid-column:6/13;align-self:end}
  .s12{grid-column:1/8}
  /* the ending: set at display size beside the last frame, standing on the frame's bottom edge */
  .outro{grid-column:8/13;align-self:end;gap:clamp(18px,2vw,34px);padding:0 0 30px}
  .outro-q{font-size:clamp(84px,9.6vw,172px);line-height:.86;letter-spacing:-.025em}
  .outro .text-link{display:inline-block;align-self:flex-start;min-height:0;font:italic 400 clamp(44px,5vw,90px)/1 var(--serif);letter-spacing:-.01em;text-decoration-thickness:1px;text-underline-offset:.16em}
  /* a category is chosen: a plain two-column grid, with the ending in the last cell, so nothing is left as a hole */
  .spread[data-filter]{row-gap:clamp(56px,5vw,90px)}
  .spread[data-filter] .shot{grid-column:span 6;grid-row:auto;margin:0;align-self:start}
  .spread[data-filter] .frame{aspect-ratio:3/2}
  /* the tall photos are cut to 3:2 here: keep the top of the frame, where the heads are (centre-cut beheaded 04, 06, 09 and 10) */
  .spread[data-filter] :is(.s2,.s4,.s6,.s9,.s10) img{object-position:50% 14%}
  .spread[data-filter] figcaption{padding-inline:0}
  .spread[data-filter] .outro{grid-column:span 6}
  .spread[data-filter="portraits"] .shot{grid-column:1/6}
  .spread[data-filter="portraits"] .frame{aspect-ratio:4/5}
  .spread[data-filter="portraits"] .outro{grid-column:7/13}

  .about{padding:0 var(--m) 180px}
  .route{gap:22px;margin-bottom:110px;padding:22px 0}
  .about-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
  .about-head{grid-column:1/7;position:sticky;top:calc(var(--head) + 40px);align-self:start}
  .prose{grid-column:8/13;margin-top:34px}
  .prose .lead{font-size:clamp(28px,2.5vw,40px)}

  .book{padding:150px var(--m) 140px}
  .book-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 var(--gap)}
  .book-intro{grid-column:1/7;grid-row:1;align-self:start}
  .contact{grid-column:8/13;grid-row:1/3;margin-top:34px}
  .book-ig{grid-column:1/5;grid-row:2;align-self:start;margin:56px 0 0}
  .pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
  .send{flex-direction:row;align-items:center;gap:24px}
  .btn-ink{width:auto;padding:0 44px}

  .foot{padding:110px var(--m) 36px}
  .foot-name{font-size:clamp(64px,7.4vw,132px)}
  .foot-grid{grid-template-columns:1fr auto 1fr;align-items:center;margin-top:72px}
  .foot-legal{text-align:right}
}

/* ---------- motion: only when the visitor has not asked for less ---------- */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .cover-shot img{animation:cover-in 2.6s var(--ease) both}
  h1 .ln>span{animation:rise 1.3s var(--ease) .25s both}
  h1 .ln+.ln>span{animation-delay:.38s}
  .cover-kicker,.cover-foot{animation:fade 1.2s ease .9s both}
  @keyframes cover-in{from{opacity:0;transform:scale(1.07)}to{opacity:1;transform:none}}
  @keyframes rise{from{transform:translateY(160%)}to{transform:none}}
  @keyframes fade{from{opacity:0}to{opacity:1}}
  .js .rv{opacity:0;transform:translateY(34px);transition:opacity 1.1s ease,transform 1.3s var(--ease)}
  .js .rv.in{opacity:1;transform:none}
  .js .rv .frame img{transform:scale(1.06);transition:transform 1.8s var(--ease)}
  .js .rv.in .frame img{transform:none}
  .spread.swap .shot,.spread.swap .outro{animation:fade .6s ease}
  .filter button{transition:color .3s}
  .filter button::after{transition:transform .35s var(--ease)}
  .nav{transition:transform .5s var(--ease),visibility .5s}
  .btn,.text-link{transition:background-color .3s,color .3s,opacity .3s}
  @media (hover:hover){
    .js .rv.in .frame:hover img{transform:scale(1.025)}
    .btn:hover{background:transparent;color:var(--ink)}
    .btn-ink:hover{background:transparent;color:var(--paper-ink)}
    .nav .nav-book:hover{opacity:.82}
    .text-link:hover{opacity:.7}
    .filter button:not(:disabled):hover{color:var(--ink)}
  }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
/* Tester fix 2026-11-11: the controls and the stand-in notice were 11px and faint on desktop (outside review, [broken]). */
[data-standins] .cover-kicker .soon::after{color:var(--ink);opacity:.8}
@media (min-width:900px){
  .brand,.head-ig,.nav a{font-size:12px}
  .filter button{font-size:13px}
  .standin-note{font-size:12px;color:#CFCAC1;opacity:1}
}

/* frame 13 (cowboy hat, task #3286): a tall black-and-white portrait on its own row between frames 04 and 05 */
.s13 .frame{aspect-ratio:4/5}
.s13 img{object-position:50% 20%}
.s13{margin-inline:calc(var(--m) * 1.3)}
@media (min-width:900px){
  .spread:not([data-filter]) .s13{grid-column:4/10;margin-inline:0}
}