/* ==========================================================================
   jonskaggs.net design system
   Carried over from the August 2026 homepage redesign.

   NOTE ON SCOPING: the Divi blocks in claude/homepage-blocks/ scope every
   selector under a doubled ID (#js-foot#js-foot) to defend against Divi's
   theme CSS. There is no Divi here. All of that scoping is removed and the
   site gets one plain stylesheet. Class names are kept identical so the
   original blocks can be dropped in with only their <style> tags stripped.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  /* dark surfaces */
  --ink:#0D0E11;
  --ink-2:#15171C;
  --bone:#F2EFE9;
  --muted:#9EA2AA;
  --dim:#6E727A;
  --line-dark:rgba(242,239,233,0.14);

  /* light surfaces */
  --paper:#EDEDEA;
  --card:#FFFFFF;
  --text:#14161A;
  --soft:#5D626B;
  --line:#D8D8D3;

  --disp:"Archivo","Helvetica Neue",Arial,sans-serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;

  --wrap:1180px;
  --gutter:28px;
  --section-y:clamp(56px,7vw,88px);
}

/* Deliberately single-theme. The page does not follow the OS dark setting:
   the design alternates dark and light sections by intent, and letting the
   whole thing flip would destroy that rhythm. */

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,ul,ol,li,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block;border:0}
button,input,textarea,select{font:inherit}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.section{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.section--dark{background:var(--ink);color:var(--bone)}
.section--paper{background:var(--paper);color:var(--text)}

@media (max-width:560px){
  :root{--gutter:20px}
}

/* ---------- type ---------- */
.label{
  font-family:var(--disp);font-size:10px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--dim);
  display:block;margin-bottom:18px;
}
.section--paper .label{color:var(--soft)}

h1,h2,h3{font-family:var(--disp);letter-spacing:-.035em;line-height:1.0;text-wrap:balance}
h1{font-size:clamp(38px,6vw,68px);font-weight:800}
h2{font-size:clamp(30px,4.4vw,50px);font-weight:800}
h3{font-size:clamp(20px,2.6vw,28px);font-weight:700;letter-spacing:-.025em;line-height:1.15}

/* ---------- prose: the body of a post, page or project ---------- */
.prose{max-width:68ch;font-size:17px;line-height:1.72}
.prose > * + *{margin-top:1.15em}
.prose h2{font-size:clamp(24px,3vw,34px);margin-top:2em;letter-spacing:-.03em}
.prose h3{font-size:clamp(19px,2.2vw,23px);margin-top:1.8em}
.prose a{
  color:inherit;text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:var(--line);
}
.prose a:hover{text-decoration-color:currentColor}
.prose ul,.prose ol{padding-left:1.25em}
.prose ul > li{list-style:disc}
.prose ol > li{list-style:decimal}
.prose li + li{margin-top:.4em}
.prose blockquote{
  border-left:2px solid var(--line);padding-left:1.1em;
  color:var(--soft);font-size:1.05em;
}
.prose img,.prose figure{margin-top:1.8em;margin-bottom:1.8em}
.prose figcaption{font-size:13px;color:var(--soft);margin-top:.6em}
.prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.9em;background:rgba(0,0,0,.05);padding:.15em .35em;border-radius:2px;
}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}

/* ---------- site header ---------- */
.hdr{background:var(--ink);color:var(--bone);position:relative;z-index:10}
.hdr__in{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding-top:20px;padding-bottom:20px;
}
.hdr__mark{
  font-family:var(--disp);font-weight:800;font-size:17px;
  letter-spacing:-.02em;color:var(--bone);white-space:nowrap;
}
.hdr__nav{display:flex;flex-wrap:wrap;gap:4px 2px}
.hdr__nav a{
  font-family:var(--disp);font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  padding:8px 12px;border-radius:999px;transition:color .16s ease,background .16s ease;
}
.hdr__nav a:hover,.hdr__nav a:focus-visible{color:var(--bone);background:var(--ink-2)}
.hdr__nav a[aria-current]{color:var(--bone)}

.hdr__toggle{display:none}

@media (max-width:820px){
  .hdr__in{flex-wrap:wrap}
  .hdr__toggle{
    display:block;background:transparent;border:1px solid var(--line-dark);
    color:var(--bone);border-radius:999px;padding:8px 16px;cursor:pointer;
    font-family:var(--disp);font-size:11px;font-weight:600;
    letter-spacing:.12em;text-transform:uppercase;
  }
  .hdr__nav{
    display:none;width:100%;flex-direction:column;gap:0;
    border-top:1px solid var(--line-dark);margin-top:16px;padding-top:8px;
  }
  .hdr__nav.is-open{display:flex}
  .hdr__nav a{padding:12px 0}
}

/* ---------- skip link ---------- */
.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--bone);color:var(--ink);padding:12px 20px;z-index:100;
  font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;
}
.skip:focus{left:0}

/* ---------- article hero ----------
   Constrained by aspect-ratio rather than left to its natural height. A
   missing or slow image then holds a fixed box instead of collapsing or
   blowing the page out, so nothing below it shifts on load. */
.arthero{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  background:var(--line);
  margin-bottom:clamp(32px,4vw,52px);
}

/* ---------- article head ---------- */
.arthead{background:var(--ink);color:var(--bone);padding-top:clamp(48px,6vw,80px);padding-bottom:clamp(48px,6vw,80px)}
.arthead h1{color:var(--bone);max-width:20ch}
.arthead__meta{
  margin-top:22px;display:flex;flex-wrap:wrap;gap:8px 20px;
  font-family:var(--disp);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
}
.arthead__meta a{color:var(--dim)}
.arthead__meta a:hover{color:var(--bone)}

/* ---------- card grid: post index, project index ---------- */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,30px)}
.grid--tight{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
@media (max-width:940px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.grid--tight{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.grid{grid-template-columns:1fr}.grid--tight{grid-template-columns:repeat(2,minmax(0,1fr))}}

.card{background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;transition:border-color .16s ease}
.card:hover{border-color:var(--soft)}
.card__img{aspect-ratio:16/10;overflow:hidden;background:var(--paper)}
.card__img img{width:100%;height:100%;object-fit:cover}
.card__body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.card__kicker{
  font-family:var(--disp);font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--soft);
}
.card__title{font-family:var(--disp);font-weight:700;font-size:19px;line-height:1.2;letter-spacing:-.022em}
.card__excerpt{font-size:14.5px;line-height:1.55;color:var(--soft)}

/* ---------- credits list (the 86 project pages, indexed) ---------- */
.credits{border-top:1px solid var(--line)}
.credits li{border-bottom:1px solid var(--line)}
.credits a{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;
  padding:18px 2px;transition:padding-left .16s ease;
}
.credits a:hover{padding-left:10px}
.credits__artist{font-family:var(--disp);font-weight:700;font-size:18px;letter-spacing:-.02em}
.credits__work{color:var(--soft);font-size:15px}
.credits__role{
  margin-left:auto;font-family:var(--disp);font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
}

/* ---------- pagination ---------- */
.pager{display:flex;justify-content:space-between;gap:20px;margin-top:clamp(40px,5vw,64px)}
.pager a{
  font-family:var(--disp);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--soft);
  border-bottom:1px solid var(--line);padding-bottom:4px;
}
.pager a:hover{color:var(--text);border-bottom-color:var(--text)}

/* ---------- footer ---------- */
.ft{background:var(--ink);color:var(--bone)}
.ft__in{padding-top:clamp(64px,8vw,104px);padding-bottom:clamp(48px,6vw,72px)}
.ft .label{color:var(--dim)}

.ft-ventures{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);
  margin-bottom:clamp(48px,6vw,72px);
}
.ft-venture{padding:28px 26px 30px;border-right:1px solid var(--line-dark);display:block;transition:background .18s ease}
.ft-venture:last-child{border-right:0}
.ft-venture:hover{background:var(--ink-2)}
.ft-venture b{display:block;font-family:var(--disp);font-weight:700;font-size:20px;letter-spacing:-.02em;margin-bottom:6px}
.ft-venture span{display:block;font-size:14px;line-height:1.5;color:var(--muted)}
.ft-venture em{
  font-style:normal;display:inline-block;margin-top:12px;
  font-family:var(--disp);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
}
.ft-venture:hover em{color:var(--bone)}

.ft-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(36px,6vw,72px);align-items:start}

.ft-socials{display:flex;flex-wrap:wrap;gap:9px}
.ft-socials a{
  font-family:var(--disp);font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  padding:9px 15px;border-radius:999px;border:1px solid var(--line-dark);
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.ft-socials a:hover,.ft-socials a:focus-visible{background:var(--bone);color:var(--ink);border-color:var(--bone)}

.ft-news h3{font-size:clamp(24px,3.2vw,34px);font-weight:800;letter-spacing:-.032em;color:var(--bone);margin-bottom:12px}
.ft-news p{font-size:15px;line-height:1.6;color:var(--muted);max-width:44ch}
.ft-form{margin-top:20px}
.ft-form input[type="text"],.ft-form input[type="email"]{
  width:100%;max-width:340px;display:block;margin:0 0 10px;
  background:var(--ink-2);color:var(--bone);
  border:1px solid var(--line-dark);border-radius:2px;
  padding:14px 16px;font-family:var(--sans);font-size:15px;
}
.ft-form input::placeholder{color:var(--dim)}
.ft-form input:focus{outline:2px solid var(--bone);outline-offset:2px;border-color:var(--bone)}
.ft-form button,.ft-form input[type="submit"]{
  font-family:var(--disp);font-size:13px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  background:var(--bone);color:var(--ink);
  border:1px solid var(--bone);border-radius:2px;
  padding:14px 28px;cursor:pointer;transition:background .16s ease,color .16s ease;
}
.ft-form button:hover,.ft-form input[type="submit"]:hover{background:transparent;color:var(--bone)}

.ft-end{
  margin-top:clamp(44px,6vw,68px);padding-top:22px;border-top:1px solid var(--line-dark);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 30px;
  font-family:var(--disp);font-size:11px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
}
.ft-end a{color:var(--dim)}
.ft-end a:hover{color:var(--bone)}

@media (max-width:820px){
  .ft-grid{grid-template-columns:1fr;gap:44px}
  .ft-venture{border-right:0;border-bottom:1px solid var(--line-dark)}
  .ft-venture:last-child{border-bottom:0}
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* ---------- focus ---------- */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid currentColor;outline-offset:3px;
}

/* ---------- credits: filter chips + works grid ----------
   Replaces the Divi filterable-portfolio and the 68 separate stub pages. */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(30px,4vw,44px)}
.chip{
  font-family:var(--disp);font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  background:transparent;color:var(--soft);
  border:1px solid var(--line);border-radius:999px;
  padding:9px 15px;cursor:pointer;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.chip span{opacity:.55;margin-left:5px;font-variant-numeric:tabular-nums}
.chip:hover{color:var(--text);border-color:var(--soft)}
.chip.is-on{background:var(--text);color:var(--paper);border-color:var(--text)}

.works{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,30px)}
@media (max-width:940px){.works{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:680px){.works{grid-template-columns:repeat(2,minmax(0,1fr))}}

.work__art{aspect-ratio:1/1;overflow:hidden;background:var(--line);border:1px solid var(--line)}
.work__art img{width:100%;height:100%;object-fit:cover}
.work__art--none{background:repeating-linear-gradient(45deg,var(--line) 0 8px,var(--paper) 8px 16px)}
.work__meta{display:flex;flex-direction:column;gap:3px;padding-top:12px}
.work__artist{font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:-.015em;line-height:1.25}
.work__title{font-size:14px;color:var(--soft);line-height:1.35}
.work__roles{
  font-family:var(--disp);font-size:9.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
  margin-top:4px;line-height:1.5;
}
.works__empty{margin-top:30px;color:var(--soft)}

/* ---------- hub page: discipline links ---------- */
.hub{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px);margin:clamp(28px,4vw,44px) 0}
@media (max-width:760px){.hub{grid-template-columns:1fr}}
.hub a{border:1px solid var(--line);background:var(--card);padding:26px 24px 28px;display:block;transition:border-color .16s ease}
.hub a:hover{border-color:var(--soft)}
.hub b{display:block;font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:-.02em;margin-bottom:7px}
.hub span{display:block;font-size:14.5px;line-height:1.55;color:var(--soft)}

/* ---------- galleries and embeds ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:1.8em 0;padding:0}
@media (max-width:680px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gallery li{list-style:none}
.gallery img{aspect-ratio:1/1;object-fit:cover;width:100%;background:var(--line)}
.embed{position:relative;aspect-ratio:16/9;margin:1.8em 0;background:var(--ink)}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.prose .btn{
  display:inline-block;font-family:var(--disp);font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  background:var(--text);color:var(--paper);padding:13px 26px;
}
.prose .btn:hover{background:var(--soft)}

/* ---------- videos ---------- */
.videos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,28px)}
@media (max-width:940px){.videos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.videos{grid-template-columns:1fr}}
.vid__play,.vid iframe{
  display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;
  background:var(--ink);position:relative;cursor:pointer;overflow:hidden;
}
.vid__play img{width:100%;height:100%;object-fit:cover;transition:opacity .18s ease}
.vid__play:hover img{opacity:.72}
.vid__badge{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:56px;height:40px;border-radius:9px;background:rgba(13,14,17,.78);
}
.vid__badge::after{
  content:"";position:absolute;left:52%;top:50%;transform:translate(-50%,-50%);
  border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent var(--bone);
}
.vid__play:hover .vid__badge{background:#c00}
.vid__meta{display:flex;flex-direction:column;gap:3px;padding-top:11px}
.vid__title{font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:-.015em;line-height:1.3}
.vid__artist{
  font-family:var(--disp);font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
}

/* ==========================================================================
   EDITORIAL FRONT PAGE  (direction F, chosen 17 Sep 2026)
   Newsreader is loaded for headlines here only. Archivo stays the display face
   everywhere else; the serif is what makes the front page read editorial
   rather than like another portfolio grid.
   ========================================================================== */
:root{ --serif:"Newsreader",Georgia,"Times New Roman",serif; }

.edhero{background:var(--paper);padding-top:clamp(34px,4.5vw,62px)}
.edtop{display:grid;grid-template-columns:1.45fr .55fr;gap:clamp(28px,4vw,58px);align-items:start}
@media(max-width:900px){.edtop{grid-template-columns:1fr}}

.edlead{display:block}
.edlead figure{margin:0 0 22px;aspect-ratio:16/9;overflow:hidden;background:var(--line)}
.edlead figure img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.edlead:hover figure img{transform:scale(1.02)}
.edlead .k{font:600 10px/1 var(--disp);letter-spacing:.2em;text-transform:uppercase;color:var(--soft)}
.edlead h1{margin-top:12px;font-family:var(--serif);font-weight:600;
 font-size:clamp(29px,4.1vw,50px);line-height:1.07;letter-spacing:-.018em;text-wrap:balance}
.edlead p{margin-top:15px;font-size:17px;line-height:1.6;color:var(--soft);max-width:62ch}
.edlead .more{font-style:normal;display:inline-block;margin-top:16px;
 font:600 11px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--soft);
 border-bottom:1px solid var(--line);padding-bottom:4px}
.edlead:hover .more{color:var(--text);border-bottom-color:var(--text)}

.edside{border-left:1px solid var(--line);padding-left:clamp(20px,2.4vw,34px)}
@media(max-width:900px){.edside{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:28px}}
.edside h2{font:600 10px/1 var(--disp);letter-spacing:.2em;text-transform:uppercase;color:var(--soft);margin-bottom:6px}
.edside__list li{padding:14px 0;border-bottom:1px solid var(--line)}
.edside__list a{font-family:var(--serif);font-size:18px;line-height:1.3;display:block}
.edside__list a:hover{text-decoration:underline;text-underline-offset:3px}
.edside__list span{display:block;margin-top:5px;font:600 9.5px/1 var(--disp);
 letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.edside__all{display:inline-block;margin-top:16px;font:600 11px/1 var(--disp);
 letter-spacing:.14em;text-transform:uppercase;color:var(--soft);
 border-bottom:1px solid var(--line);padding-bottom:4px}
.edside__all:hover{color:var(--text);border-bottom-color:var(--text)}
.edbio{margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.edbio b{font-family:var(--disp);font-size:16px;font-weight:700;letter-spacing:-.02em;display:block;margin-bottom:8px}
.edbio p{font-size:14.5px;line-height:1.6;color:var(--soft)}
.edbio__cta{margin-top:16px}

.edwork__head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
 padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:clamp(24px,3vw,34px)}
.edwork__head .label{margin-bottom:0}
.edwork__head a{font:600 11px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.edwork__head a:hover{color:var(--text)}

.edbook{background:var(--ink);color:var(--bone)}
.edbook__in{display:grid;grid-template-columns:270px 1fr;gap:clamp(30px,5vw,64px);align-items:center;
 padding-top:clamp(52px,6.5vw,84px);padding-bottom:clamp(52px,6.5vw,84px)}
@media(max-width:820px){.edbook__in{grid-template-columns:1fr;gap:30px}
 .edbook__art{max-width:210px}}
.edbook__art img{width:100%;height:auto;display:block;box-shadow:0 18px 44px rgba(0,0,0,.5)}
.edbook__body .label{color:var(--dim)}
.edbook__body h2{font-family:var(--serif);font-weight:600;letter-spacing:-.015em;
 font-size:clamp(25px,3.2vw,40px);line-height:1.12;color:var(--bone);max-width:22ch}
.edbook__body p{margin-top:16px;font-size:16px;line-height:1.6;color:var(--muted);max-width:56ch}
.edbook__cta{margin-top:26px;display:flex;flex-wrap:wrap;gap:11px}
.edbook__cta .btn{background:var(--bone);color:var(--ink);border:1px solid var(--bone)}
.edbook__cta .btn:hover{background:transparent;color:var(--bone)}
.edbook__cta .btn--ghost{background:transparent;color:var(--bone);border-color:var(--line-dark)}
.edbook__cta .btn--ghost:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}

.btn{display:inline-block;font-family:var(--disp);font-size:12px;font-weight:600;
 letter-spacing:.1em;text-transform:uppercase;background:var(--text);color:var(--paper);
 padding:13px 26px;border:1px solid var(--text);transition:background .16s,color .16s}
.btn:hover{background:transparent;color:var(--text)}

.edvid .videos{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:940px){.edvid .videos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.edvid .videos{grid-template-columns:1fr}}

/* The header logo replaces the wordmark. */
.hdr__logo{display:block;color:var(--bone)}
.hdr__logo svg{height:30px;width:auto;display:block}
@media(max-width:560px){.hdr__logo svg{height:26px}}

/* Long release titles (the Demi Lovato credit is a full soundtrack name) wrap
   to three lines and leave the row ragged. Clamp to two. */
.work__title{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.vid__title{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}

/* ---------- contact ---------- */
.ctwrap{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(30px,5vw,68px);align-items:start}
@media(max-width:860px){.ctwrap{grid-template-columns:1fr}}

.ct-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ct-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,22px)}
@media(max-width:560px){.ct-row{grid-template-columns:1fr}}
.ct-field{display:block;margin-bottom:clamp(16px,2.2vw,24px)}
.ct-field > span{
  display:block;margin-bottom:8px;
  font-family:var(--disp);font-size:10px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--soft);
}
.ct-field input,.ct-field textarea,.ct-field select{
  width:100%;background:var(--card);color:var(--text);
  border:1px solid var(--line);border-radius:0;
  padding:14px 15px;font-family:var(--sans);font-size:16px;line-height:1.5;
  transition:border-color .16s ease;
}
.ct-field textarea{resize:vertical;min-height:150px}
.ct-field select{
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235D626B' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:11px;
  padding-right:40px;
}
.ct-field input:focus,.ct-field textarea:focus,.ct-field select:focus{
  outline:2px solid var(--text);outline-offset:-2px;border-color:var(--text);
}
.ct-field input::placeholder,.ct-field textarea::placeholder{color:var(--soft);opacity:.75}
.ct-field input:user-invalid,.ct-field textarea:user-invalid{border-color:#A3302B}

.ct-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 20px;margin-top:6px}
.ct-actions .btn{cursor:pointer}
.ct-actions .btn:disabled{opacity:.5;cursor:default}
.ct-status{font-size:14.5px;line-height:1.5;color:var(--soft)}
.ct-status.is-ok{color:var(--text)}
.ct-status.is-bad{color:#A3302B}
.ct-status a{text-decoration:underline;text-underline-offset:3px}

.ctside{border-left:1px solid var(--line);padding-left:clamp(20px,2.6vw,34px)}
@media(max-width:860px){.ctside{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:28px}}
.ctside h2{
  font-family:var(--disp);font-size:10px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--soft);
  margin-bottom:14px;
}
.ctside h2 + *{margin-bottom:32px}
.ctside__list li{
  position:relative;padding-left:18px;font-size:15px;line-height:1.55;
  color:var(--soft);margin-bottom:10px;
}
.ctside__list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--soft)}
.ctside__socials a{color:var(--soft);border-color:var(--line)}
.ctside__socials a:hover{background:var(--text);color:var(--paper);border-color:var(--text)}
.ctside__direct{font-size:16px;line-height:1.5}
.ctside__direct a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.ctside__direct a:hover{text-decoration-color:currentColor}

/* ==========================================================================
   SECTION PAGES: discipline pages, media hub, photos  (25 Sep 2026)
   ========================================================================== */
.crumb{margin-bottom:16px;font:600 11px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase}
.crumb a{color:var(--dim);text-decoration:none}
.crumb a:hover{color:var(--bone)}
.crumb a::after{content:" /";opacity:.6}
.arthead__lede{margin-top:18px;max-width:58ch;font-size:clamp(16px,1.6vw,18.5px);line-height:1.6;color:rgba(242,239,233,.78)}

.dgroup+.dgroup{margin-top:clamp(48px,6vw,76px)}
.dgroup__head{display:flex;align-items:baseline;gap:12px;border-bottom:1px solid var(--line);
  padding-bottom:12px;margin-bottom:clamp(22px,3vw,32px)}
.dgroup__head h2{font-family:var(--disp);font-weight:700;font-size:clamp(20px,2.2vw,26px);letter-spacing:-.02em}
.dgroup__head span{font:600 11px/1 var(--disp);letter-spacing:.14em;color:var(--dim)}

.cta-band__in{display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap}
.cta-band h2{color:var(--bone);font-family:var(--disp);font-weight:700;font-size:clamp(24px,3vw,34px);letter-spacing:-.025em}
.cta-band p{margin-top:8px;color:rgba(242,239,233,.72);max-width:52ch;line-height:1.6}
.cta-band .btn{display:inline-block;font:600 12px/1 var(--disp);letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;background:var(--bone);color:var(--ink);border:1px solid var(--bone);padding:15px 28px}
.cta-band .btn:hover{background:transparent;color:var(--bone)}

.hub--two{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:18px;margin-bottom:0}
@media (max-width:760px){.hub--two{grid-template-columns:1fr}}

.lanes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.6vw,34px)}
@media (max-width:720px){.lanes{grid-template-columns:1fr}}
.lane{display:block;text-decoration:none;color:inherit;background:var(--card);border:1px solid var(--line);transition:border-color .16s ease}
.lane:hover{border-color:var(--soft)}
.lane__art{margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--ink)}
.lane__art img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.lane:hover .lane__art img{transform:scale(1.03)}
.lane__meta{padding:22px 24px 26px;display:flex;flex-direction:column;gap:6px}
.lane__meta b{font-family:var(--disp);font-weight:700;font-size:clamp(22px,2.4vw,28px);letter-spacing:-.025em}
.lane__meta span{color:var(--soft);font-size:15px;line-height:1.55}
.lane__meta em{font-style:normal;margin-top:8px;font:600 10.5px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}

.photos{columns:3 280px;column-gap:14px;padding:0;margin:0}
.photos li{list-style:none;break-inside:avoid;margin-bottom:14px}
.photo{display:block;width:100%;padding:0;border:0;background:var(--line);cursor:zoom-in}
.photo img{display:block;width:100%;height:auto;transition:opacity .18s ease}
.photo:hover img{opacity:.85}
.lightbox{max-width:none;max-height:none;width:100vw;height:100vh;margin:0;padding:0;border:0;background:rgba(13,14,17,.95)}
.lightbox::backdrop{background:rgba(13,14,17,.9)}
.lightbox[open]{display:flex;align-items:center;justify-content:center}
.lightbox img{max-width:calc(100vw - 120px);max-height:calc(100vh - 100px);object-fit:contain}
@media (max-width:620px){.lightbox img{max-width:100vw}}
.lightbox button{position:absolute;background:transparent;color:var(--bone);border:1px solid var(--line-dark);
  font:600 11px/1 var(--disp);letter-spacing:.14em;text-transform:uppercase;padding:12px 16px;cursor:pointer}
.lightbox button:hover{border-color:var(--bone)}
.lightbox__close{top:18px;right:18px}
.lightbox__nav{top:50%;transform:translateY(-50%);font-size:18px}
.lightbox__prev{left:18px}.lightbox__next{right:18px}
@media (max-width:620px){.lightbox__nav{top:auto;bottom:18px;transform:none}}

/* ---------- books page ---------- */
.bookpage__sub{font-family:var(--serif);font-size:18px!important;color:var(--bone)!important;opacity:.85}
.bookpage__formats{font:600 10.5px/1.4 var(--disp)!important;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)!important}
.bookpage__stores{display:flex;flex-wrap:wrap;gap:8px 22px;margin:22px 0 0;padding:0}
.bookpage__stores li{list-style:none}
.bookpage__stores a{font:600 11px/1 var(--disp);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  text-decoration:none;border-bottom:1px solid var(--line-dark);padding-bottom:4px}
.bookpage__stores a:hover{color:var(--bone);border-bottom-color:var(--bone)}
.pbooks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,40px);padding:0;margin:0}
@media (max-width:860px){.pbooks{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pbooks{grid-template-columns:1fr}}
.pbook{list-style:none}
.pbook__art{aspect-ratio:4/5;background:var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden}
.pbook__art img{max-width:82%;max-height:88%;width:auto;height:auto;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.pbook__meta{padding-top:16px;display:flex;flex-direction:column;gap:5px}
.pbook__meta b{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:-.02em}
.pbook__sub{font-size:14px;color:var(--soft);line-height:1.4}
.pbook__meta p{font-size:15px;color:var(--soft);line-height:1.55;margin-top:2px}
.pbook__links{display:flex;gap:16px;margin-top:8px}
.pbook__links a{font:600 11px/1 var(--disp);letter-spacing:.12em;text-transform:uppercase;color:var(--text);
  text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:4px}
.pbook__links a:hover{border-bottom-color:var(--text)}