/* scottwilliamsmedia.com — one page, one grid.
   System: a two-track editorial grid. Left track (5/12) carries the numeral, kicker and title;
   right track (7/12) carries the copy in a recessed cream "well"; media spans both tracks, or
   takes the right track when a piece is a single clip. The work runs on a royal-blue office
   backdrop; the page itself, and the wells, are cream. Headlines are the page's cream set on
   the blue — same colour as the page, no effects — and copy sits one layer down, in the well. */
:root{
  --bg:#f7f6f2; --ink:#16181b; --dim:#4a4f57; --rule:#d8d5cc;
  --accent:#7a4b1e; --card:#fffdf8; --tag:#e9e5da; --ph:#efe9dc; --ph-line:#b89a72;
  --max:80rem; --gut:clamp(16px,3vw,44px);
  /* the office blue and what sits on it */
  --blue:#1c3a7c; --blue-deep:#15305f; --blue-line:rgba(255,255,255,.16);
  --on-blue:#f7f6f2; --on-blue-dim:#c9d2e6; --gold:#f6cf7a;
  --well:#f7f6f2;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#17181a; --ink:#ece9e2; --dim:#a9aeb6; --rule:#32353a;
    --accent:#e8a33c; --card:#1e2023; --tag:#2a2d31; --ph:#22211e; --ph-line:#8a7250;
    --blue:#0f1a31; --blue-deep:#182a4d; --blue-line:rgba(255,255,255,.12);
    --on-blue:#ece9e2; --on-blue-dim:#a9b3c9; --gold:#e8b45a; --well:#1b1d20;
  }
}
:root[data-theme="dark"]{
  --bg:#17181a; --ink:#ece9e2; --dim:#a9aeb6; --rule:#32353a;
  --accent:#e8a33c; --card:#1e2023; --tag:#2a2d31; --ph:#22211e; --ph-line:#8a7250;
  --blue:#0f1a31; --blue-deep:#182a4d; --blue-line:rgba(255,255,255,.12);
  --on-blue:#ece9e2; --on-blue-dim:#a9b3c9; --gold:#e8b45a; --well:#1b1d20;
}
*{box-sizing:border-box}
html,body{overflow-x:clip}                 /* the bands and washes reach past the column on purpose */
body{background:var(--bg);color:var(--ink);margin:0;
  font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;}
.wrap{margin:0}                            /* full width; each block sets its own measure */
.print-sheet .wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.hero,.section-bar,.sec,.two-track,footer.site{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
a{color:var(--accent)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--card);color:var(--ink);
  padding:.6rem 1rem;z-index:10;border:2px solid var(--accent);border-radius:0 0 4px 0}
.skip:focus{left:0}
h1{font-size:clamp(2.8rem,7vw,5.4rem);line-height:.98;margin:0 0 1rem;letter-spacing:-.035em;font-weight:800}
h2{font-size:1.28rem;margin:0 0 .35rem;letter-spacing:-.01em}
h3{font-size:clamp(1.55rem,2.4vw,2.2rem);line-height:1.1;margin:0;letter-spacing:-.02em;font-weight:750}
h3 a{color:inherit}
.meta{color:var(--dim);font-size:.95rem;margin:0}
code{font-size:.88em;background:var(--tag);padding:.05em .3em;border-radius:3px}
.kicker{margin:0 0 .5rem;color:var(--accent);font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.fine{font-size:.85rem;color:var(--dim)}

/* ---- hero: cream, the two tracks already in play (text 7, portrait 5) ---- */
.hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(1.5rem,4vw,4rem);align-items:end;padding-block:clamp(2.5rem,6vw,5.5rem) clamp(2rem,4vw,3.5rem)}
.hero-k{color:var(--dim)}
.intro{font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.4;margin:0 0 1.4rem;max-width:40ch;color:var(--ink)}
.portrait{width:100%;height:auto;border-radius:10px;display:block;box-shadow:0 2px 18px rgba(0,0,0,.14)}
@media (max-width:760px){.hero{grid-template-columns:minmax(0,1fr);gap:1.5rem;align-items:start}.portrait{max-width:420px}}

/* ---- section bar: a rule with the label on the left track ---- */
.section-bar{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  border-top:1px solid var(--rule);padding-top:1.1rem;margin-bottom:1.6rem}
.section-h{font-size:.8rem;text-transform:uppercase;letter-spacing:.16em;color:var(--dim);margin:0;font-weight:700}
.section-n{margin:0;font-size:.8rem;color:var(--dim);letter-spacing:.04em}

/* ---- the office blue: one continuous run of bands, one per piece ---- */
main{counter-reset:work}
.band{background:var(--blue);color:var(--on-blue);position:relative;isolation:isolate;overflow:clip;
  padding-block:clamp(2.4rem,4.5vw,4.2rem);border-top:1px solid var(--blue-line);
  /* everything that reads tokens inside a band gets the on-blue set */
  --bg:var(--blue); --ink:var(--on-blue); --dim:var(--on-blue-dim); --accent:var(--gold);
  --card:var(--blue-deep); --rule:var(--blue-line); --tag:rgba(255,255,255,.12);
  --ph:var(--blue-deep); --ph-line:rgba(255,255,255,.38)}
.band + .band{margin-top:0}
.band:first-of-type{border-top:0}
.band .lab .kicker::before{counter-increment:work;content:counter(work,decimal-leading-zero) "  ";
  font-variant-numeric:tabular-nums;letter-spacing:.08em;opacity:.85}
.lab h3{color:var(--on-blue)}               /* the page's cream, set straight on the blue */
.work-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:1.4rem clamp(1.5rem,4vw,4rem);align-items:start;margin-bottom:clamp(1.4rem,2.6vw,2.2rem)}
.side .sec{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:1.6rem clamp(1.5rem,4vw,4rem);align-items:start}
.side .work-head{display:block;margin-bottom:0}
.side .work-head .well{margin-top:1.3rem}
.side .media{grid-column:2}
.side .full{grid-column:1/-1}
.full .sub-h{color:var(--on-blue);font-size:1rem;margin:1.4rem 0 .3rem;letter-spacing:-.01em}

/* ---- the well: copy set one layer into the page ---- */
.well{background:var(--well);color:#16181b;border-radius:12px;padding:1.05rem 1.3rem;
  box-shadow:inset 0 3px 8px rgba(0,0,0,.30), inset 0 0 0 1px rgba(0,0,0,.20), 0 1px 0 rgba(255,255,255,.18);
  /* restore the page tokens for anything inside */
  --bg:#f7f6f2; --ink:#16181b; --dim:#4a4f57; --rule:#d8d5cc; --accent:#7a4b1e;
  --card:#fffdf8; --tag:#e9e5da; --ph:#efe9dc; --ph-line:#b89a72}
.well > p{margin:0 0 .6rem;color:var(--ink);font-size:1.02rem;line-height:1.55}
.well > p:last-child{margin-bottom:0}
.well > .fine{font-size:.85rem;color:var(--dim)}
.well.sheet{padding:clamp(1.1rem,2.4vw,2rem) clamp(1rem,2.6vw,2.2rem)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  .well{color:#ece9e2;box-shadow:inset 0 3px 8px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.07);
    --bg:#1b1d20; --ink:#ece9e2; --dim:#a9aeb6; --rule:#32353a; --accent:#e8a33c; --card:#232529; --tag:#2a2d31; --ph:#22211e; --ph-line:#8a7250}}}
:root[data-theme="dark"] .well{color:#ece9e2;box-shadow:inset 0 3px 8px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.07);
  --bg:#1b1d20; --ink:#ece9e2; --dim:#a9aeb6; --rule:#32353a; --accent:#e8a33c; --card:#232529; --tag:#2a2d31; --ph:#22211e; --ph-line:#8a7250}

@media (max-width:760px){
  .work-head,.side .sec{grid-template-columns:minmax(0,1fr);gap:1rem}
  .side .media{grid-column:auto}
  .side .work-head .well{margin-top:1rem}
  .well{padding:.95rem 1rem;border-radius:10px}
}

/* ---- media on the blue ---- */
.shot{display:block;border:1px solid var(--rule);border-radius:6px;overflow:hidden;background:var(--card)}
.shot img{display:block;width:100%;height:auto}
.shot:hover{border-color:var(--accent)}
.embed{position:relative;width:100%;aspect-ratio:21/9;min-height:420px;border-radius:8px;overflow:hidden;
  background:#111 url(/assets/arc3-preview.jpg) center/cover;border:1px solid var(--rule);box-shadow:0 10px 30px rgba(0,0,0,.28)}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:760px){.embed{aspect-ratio:auto;height:78vh}}
#p-clinic,#clinic-frame{aspect-ratio:16/11;min-height:520px;background:#0d0f12}
.tab-note{margin:.7rem 0 0;max-width:70ch}

/* video gallery */
.vgrid{list-style:none;padding:0;margin:0;display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.vgrid li{margin:0}
.vgrid:has(> li:only-child){grid-template-columns:minmax(0,1fr)}
.hero > *,.sec > *,.work-head > *,.two-track > *{min-width:0}
.media > .fine{margin:.8rem 0 0}
.vcard{display:block;position:relative;width:100%;padding:0;border:1px solid var(--rule);border-radius:8px;
  overflow:hidden;background:var(--card);cursor:pointer;text-align:left;color:var(--ink);font:inherit;
  box-shadow:0 8px 24px rgba(0,0,0,.22)}
.vcard img{display:block;width:100%;height:auto}
.vcard:hover{border-color:var(--accent)}
.vc-play{position:absolute;top:calc(50% - 2rem);left:calc(50% - 1.6rem);width:3.2rem;height:3.2rem;
  display:grid;place-items:center;border-radius:50%;background:rgba(20,20,20,.72);color:#fff;font-size:1.1rem;padding-left:.2rem}
.vcard:hover .vc-play{background:var(--accent);color:var(--blue)}
.vc-meta{display:flex;justify-content:space-between;gap:.8rem;padding:.65rem .8rem;font-size:.9rem}
.vc-t{font-weight:600}
.vc-d{color:var(--dim);font-variant-numeric:tabular-nums}
.vplayer{width:100%;height:auto;display:block;border-radius:8px;background:#000;border:1px solid var(--accent)}

/* viewer tabs */
.tablist{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:.7rem}
.tab{font:inherit;font-size:.9rem;font-weight:600;padding:.5rem 1rem;border:1px solid var(--rule);
  border-radius:999px;background:var(--card);color:var(--ink);cursor:pointer}
.tab:hover{border-color:var(--accent)}
.tab.on{background:var(--accent);border-color:var(--accent);color:var(--blue)}

/* stills */
.sgrid{list-style:none;padding:0;margin:.6rem 0 .4rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.sgrid li{margin:0}
.sgrid figure{margin:0}
.sgrid img{display:block;width:100%;height:auto;border:1px solid var(--rule);border-radius:6px;background:var(--card);box-shadow:0 6px 18px rgba(0,0,0,.2)}
.sgrid figcaption{margin-top:.4rem;font-size:.85rem;color:var(--dim)}
.brandgrid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.brandgrid img{background:#fff}

/* placeholder: big, obvious, and self-describing */
.ph-spec li{margin-bottom:.35rem}
.ph-spec b{color:var(--ink)}
@media (max-width:760px){.ph-grid{aspect-ratio:auto;min-height:0}}

/* ---- section background wash (frames from the piece, ghosted into the blue) ---- */
.bgshot::before,.bgshot::after{content:"";position:absolute;z-index:-1;pointer-events:none;
  background-repeat:no-repeat;background-size:cover;opacity:.16;filter:saturate(.6);mix-blend-mode:screen}
.bgshot::before{inset:0;background-image:var(--shot-a);background-position:center top;
  -webkit-mask-image:linear-gradient(180deg,transparent 4%,#000 30%,#000 70%,transparent);
  mask-image:linear-gradient(180deg,transparent 4%,#000 30%,#000 70%,transparent)}
.bgshot::after{right:0;top:0;width:min(38%,520px);aspect-ratio:3/2;background-image:var(--shot-b);
  background-position:right top;background-size:contain;opacity:.2;
  -webkit-mask-image:linear-gradient(200deg,#000,transparent 72%);
  mask-image:linear-gradient(200deg,#000,transparent 72%)}
.bgshot.alt::before{background-position:left bottom}
.bgshot.alt::after{right:auto;left:0;top:auto;bottom:0;background-position:left bottom;
  -webkit-mask-image:linear-gradient(20deg,#000,transparent 72%);
  mask-image:linear-gradient(20deg,#000,transparent 72%)}
@media (max-width:760px){.bgshot::after{display:none}}

/* ---- back on cream: awards and about share the two tracks ---- */
.two-track{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:1.2rem clamp(1.5rem,4vw,4rem);align-items:start;
  padding-block:clamp(2rem,4vw,3.2rem);border-top:1px solid var(--rule)}
.two-track .section-h{padding-top:.3rem}
.awards{border-top:0;margin-top:clamp(1.5rem,3vw,2.5rem)}
.award-row{list-style:none;padding:0;margin:0;display:grid;gap:1rem;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:420px){.award-row{grid-template-columns:minmax(0,1fr)}}
.award-row li{margin:0}
.award{margin:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.6rem;
  background:var(--card);border:1px solid var(--rule);border-radius:10px;padding:1.3rem 1rem}
.award .seal{display:grid;place-items:center;width:66px;height:66px;border-radius:50%;
  border:1px solid var(--rule);color:var(--accent);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.10), inset 0 -1px 0 rgba(255,255,255,.7)}
.award .seal svg{width:38px;height:38px;display:block}
.award figcaption{display:flex;flex-direction:column;gap:.2rem;line-height:1.35}
.award b{font-size:1rem}
.award span{font-size:.86rem;color:var(--dim)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  .award .seal{box-shadow:inset 0 2px 7px rgba(0,0,0,.6), inset 0 -1px 0 rgba(255,255,255,.06)}}}
.about-copy{max-width:62ch}
.about-copy p{margin:0 0 .8rem;font-size:1.05rem}
.btn{display:inline-block;padding:.65rem 1.1rem;border:1px solid var(--accent);border-radius:4px;text-decoration:none;font-weight:600}
.btn:hover{background:var(--accent);color:var(--bg)}
footer.site{border-top:1px solid var(--rule);padding-block:2rem 3rem;color:var(--dim);font-size:.9rem}
footer.site p{margin:0 0 .5rem}
@media (max-width:760px){.two-track{grid-template-columns:minmax(0,1fr);gap:.6rem}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}
/* screen-reader-only labels (the steppers' hidden text was rendering) */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---- Sentara: the award up top, the two portal screens beneath ---- */
.stack3{margin:0 0 1.6rem;display:grid;grid-template-columns:repeat(12,1fr);gap:1rem}
.stack3 img{display:block;width:100%;height:auto;border-radius:10px;background:#fff;
  box-shadow:0 18px 40px rgba(0,0,0,.38)}
.stack3 .s-award{grid-column:2 / span 10}
.stack3 .s-grid{grid-column:1 / span 6;transform:rotate(-.8deg)}
.stack3 .s-home{grid-column:7 / span 6;transform:rotate(.8deg)}
.stack3 figcaption{grid-column:1 / -1;margin-top:.2rem;font-size:.85rem;color:var(--dim)}
@media (max-width:760px){
  .stack3{display:flex;flex-direction:column;gap:.7rem}
  .stack3 img,.stack3 .zoom{transform:none;box-shadow:0 8px 20px rgba(0,0,0,.3)}
  .stack3 .zoom{box-shadow:none}
}

/* Hazen: let the animatic run big — media spans both tracks, the film leads */
.hazen .media{grid-column:1 / -1;margin-top:1.4rem}
.hazen .vgrid{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:1.2rem;align-items:start}
@media (max-width:760px){.hazen .vgrid{grid-template-columns:minmax(0,1fr)}}

/* Accessibility claim surfaced in the labor header; PDF print-sheet thumbnail; sponsorship line under awards. */
.a11y-strip{font-size:.95rem;font-weight:600;border-top:1px solid var(--rule);padding-top:.6rem;margin-top:.6rem}
.pdfgrid{grid-template-columns:minmax(0,260px)}
.pdfgrid img{background:#fff}
.award-note{margin-top:.8rem}
/* Award logos sit on a white plate so they read the same in light and dark mode. */
.award .logo-plate{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;max-width:240px;padding:.7rem 1rem;background:#fff;border-radius:10px;border:1px solid var(--rule)}
.award .logo-plate img{display:block;height:76px;width:auto;max-width:100%;object-fit:contain}

/* Lightbox */
.zoom{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;border-radius:6px}
.zoom img{transition:transform .15s ease}
.zoom:hover img{transform:scale(1.015)}
.zoom:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.stack3 .zoom{grid-row:auto}
dialog.lb{width:min(96vw,1600px);max-width:none;max-height:96vh;padding:2.6rem 3.4rem 1rem;border:0;border-radius:12px;background:#0f1115;color:#e9e6de;overflow:visible}
dialog.lb::backdrop{background:rgba(5,7,12,.86)}
.lb-stage{display:grid;place-items:center}
.lb-stage img,.lb-stage video{display:block;max-width:100%;max-height:82vh;width:auto;height:auto;border-radius:6px;background:#fff}
.lb-stage video{background:#000;width:100%}
.lb-cap{margin:.7rem 0 0;text-align:center;font-size:.92rem;color:#c9c5bb}
.lb-btn{position:absolute;border:1px solid rgba(255,255,255,.25);background:rgba(20,22,28,.85);color:#fff;border-radius:999px;
  width:2.6rem;height:2.6rem;font-size:1.3rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.lb-btn:hover{background:var(--accent);color:#111}
.lb-btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.lb-close{top:.5rem;right:.5rem}
.lb-prev{left:.4rem;top:50%;transform:translateY(-50%)}
.lb-next{right:.4rem;top:50%;transform:translateY(-50%)}
dialog.lb.single .lb-prev,dialog.lb.single .lb-next{display:none}
@media (max-width:560px){dialog.lb{padding:2.8rem .5rem .8rem}.lb-prev,.lb-next{top:auto;bottom:.3rem;transform:none}}
.socialgrid{grid-template-columns:repeat(auto-fill,minmax(180px,220px));align-items:end}

/* Jump links under WORK; mobile lightbox caption clears the ‹ › buttons */
.jump{max-width:var(--max);margin:-.4rem auto 1.4rem;padding-inline:var(--gut);font-size:.9rem;color:var(--dim);line-height:1.9}
@media (max-width:560px){.lb-cap{padding-inline:3.2rem}}