/* ============================================================
   CONTACT PATCH ADVISORY
   CMYK press registration palette — process cyan + magenta
   on press black / uncoated stock.
   ============================================================ */

:root{
  --ground:#E9E6DF; --ground-2:#DFDCD4;
  --ink:#15171A; --ink-2:#4A4E54; --ink-3:#7C8189;
  --rule:#C4C0B6; --rule-2:#A9A499;
  --cyan:#0D6F7D; --cyan-dim:#0D6F7D; --magenta:#A81F58;
  --tape:#15171A; --tape-ink:#E9E6DF;
  --halftone:rgba(21,23,26,.055);

  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --f-body:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --f-disp:"Big Shoulders Display","Public Sans",Impact,sans-serif;

  --wrap:1100px;
  --gut:clamp(18px,4vw,52px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0B0C0E; --ground-2:#101215;
    --ink:#E7E9EB; --ink-2:#A2A8AF; --ink-3:#6C7379;
    --rule:#23272B; --rule-2:#343A40;
    --cyan:#4FC3D2; --cyan-dim:#2A7F8B; --magenta:#D6437A;
    --tape:#E7E9EB; --tape-ink:#0B0C0E;
    --halftone:rgba(231,233,235,.045);
  }
}
:root[data-theme="dark"]{
  --ground:#0B0C0E; --ground-2:#101215;
  --ink:#E7E9EB; --ink-2:#A2A8AF; --ink-3:#6C7379;
  --rule:#23272B; --rule-2:#343A40;
  --cyan:#4FC3D2; --cyan-dim:#2A7F8B; --magenta:#D6437A;
  --tape:#E7E9EB; --tape-ink:#0B0C0E;
  --halftone:rgba(231,233,235,.045);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:82px; }
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--f-body); font-size:16.5px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:radial-gradient(var(--halftone) 1px,transparent 1.1px);
  background-size:4px 4px;
}
main,.topbar,.footer{ position:relative; z-index:1; }

a{ color:var(--cyan); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }
:focus-visible{ outline:2px solid var(--magenta); outline-offset:3px; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding-inline:var(--gut); }
.mono{ font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.disp{
  font-family:var(--f-disp); font-weight:800; text-transform:uppercase;
  line-height:.9; letter-spacing:.005em; text-wrap:balance; margin:0;
}
p{ max-width:64ch; }

/* ---------- crop marks ---------- */
.plate{ position:relative; }
.cm{ position:absolute; width:15px; height:15px; pointer-events:none; }
.cm::before,.cm::after{ content:""; position:absolute; background:var(--cyan-dim); }
.cm::before{ inset-inline-start:0; top:0; width:15px; height:1px; }
.cm::after{ inset-inline-start:0; top:0; width:1px; height:15px; }
.cm-tl{ top:-9px; left:-9px; }
.cm-tr{ top:-9px; right:-9px; transform:scaleX(-1); }
.cm-bl{ bottom:-9px; left:-9px; transform:scaleY(-1); }
.cm-br{ bottom:-9px; right:-9px; transform:scale(-1,-1); }
.cm-tr::before,.cm-bl::after{ background:var(--magenta); }
.wrap.plate > .cm-tl,.wrap.plate > .cm-bl{ left:calc(var(--gut) - 9px); }
.wrap.plate > .cm-tr,.wrap.plate > .cm-br{ right:calc(var(--gut) - 9px); }

/* ---------- committed dark photo plates ---------- */
.dark-plate{
  --ground:#0B0C0E; --ground-2:#101215;
  --ink:#E7E9EB; --ink-2:#A9AFB6; --ink-3:#767D84;
  --rule:#262A2E; --rule-2:#3A4147;
  --cyan:#4FC3D2; --cyan-dim:#2A7F8B; --magenta:#D6437A;
  --tape:#E7E9EB; --tape-ink:#0B0C0E;
  --halftone:rgba(231,233,235,.045);
  background:#0B0C0E; color:var(--ink);
}
.dark-plate::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:radial-gradient(var(--halftone) 1px,transparent 1.1px);
  background-size:4px 4px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  padding:14px 20px; border:1px solid var(--rule-2); color:var(--ink);
  background:transparent; transition:background .14s,border-color .14s,color .14s;
}
.btn:hover{ text-decoration:none; border-color:var(--cyan); color:var(--cyan); }
.btn .ar{ color:var(--magenta); }
.btn-solid{ background:var(--tape); color:var(--tape-ink); border-color:var(--tape); }
.btn-solid:hover{ background:var(--cyan); border-color:var(--cyan); color:var(--tape-ink); }
.btn-solid .ar{ color:inherit; }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }

/* ---------- top bar + section buttons ---------- */
.topbar{ position:sticky; top:0; background:var(--ground); border-bottom:1px solid var(--rule); }
.topbar .wrap{ display:flex; align-items:center; gap:14px; min-height:56px; flex-wrap:wrap; padding-block:9px; }
.mark{
  font-family:var(--f-disp); font-weight:800; text-transform:uppercase;
  font-size:20px; letter-spacing:.02em; line-height:1; white-space:nowrap; color:var(--ink);
}
.mark span{ color:var(--cyan); }
.navbtns{ display:flex; gap:8px; margin-left:auto; flex-wrap:wrap; }
.navbtns a{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  padding:9px 13px; border:1px solid var(--rule); color:var(--ink-2);
  transition:border-color .14s,color .14s;
}
.navbtns a:hover{ border-color:var(--cyan); color:var(--cyan); text-decoration:none; }
.navbtns a.now{ border-color:var(--tape); background:var(--tape); color:var(--tape-ink); }

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding:clamp(54px,9vw,110px) 0 clamp(46px,6vw,78px);
  border-bottom:1px solid var(--rule);
}
.hero-photo{
  position:absolute; top:0; right:0; bottom:0; left:34%;
  background-image:url("../img/hero.jpg"); background-size:cover; background-position:56% 44%;
  filter:saturate(.7) contrast(1.05);
}
.hero-photo::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg,#0B0C0E 0%,rgba(11,12,14,.93) 24%,rgba(11,12,14,.35) 62%,rgba(11,12,14,.12) 100%),
    linear-gradient(0deg,#0B0C0E 0%,rgba(11,12,14,0) 30%),
    linear-gradient(180deg,#0B0C0E 0%,rgba(11,12,14,0) 16%);
}
.hero > .wrap{ position:relative; z-index:2; max-width:var(--wrap); }
.hero-in{ max-width:580px; }
.eyebrow{ display:inline-flex; align-items:center; gap:9px; color:var(--ink-3); margin-bottom:26px; }
.dot{ width:6px; height:6px; background:var(--magenta); display:inline-block; }
h1.disp{ font-size:clamp(42px,7.2vw,88px); margin:0; }
h1.disp em{ font-style:normal; display:block; color:var(--cyan); }
.hero-sub{ font-size:clamp(17px,2.1vw,20px); line-height:1.55; color:var(--ink-2); margin:26px 0 0; max-width:46ch; font-weight:300; }
.hero-sub b{ color:var(--ink); font-weight:600; }
.spec{ margin-top:36px; border-top:1px solid var(--rule); max-width:560px; }
.spec div{ display:flex; gap:14px; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--rule); font-family:var(--f-mono); font-size:11.5px; }
.spec dt{ color:var(--ink-3); text-transform:uppercase; letter-spacing:.12em; font-size:10.5px; margin:0; white-space:nowrap; }
.spec dd{ margin:0; text-align:right; }
.live{ color:var(--cyan); }

/* ---------- sections ---------- */
section{ padding:clamp(56px,7.5vw,96px) 0; border-bottom:1px solid var(--rule); }
.exh{ display:flex; align-items:baseline; gap:12px; color:var(--ink-3); margin-bottom:20px; }
.exh b{ color:var(--magenta); font-weight:600; }
.exh i{ font-style:normal; flex:1; height:1px; background:var(--rule); transform:translateY(-3px); }
h2.disp{ font-size:clamp(32px,5.2vw,60px); margin-bottom:22px; }
.lede{ font-size:clamp(17px,2vw,19px); line-height:1.6; color:var(--ink-2); max-width:60ch; }

/* ---------- who ---------- */
.who{ display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:clamp(26px,4vw,54px); align-items:start; }
.who p{ margin:0 0 15px; }
.who p:last-of-type{ margin-bottom:0; }
.portrait{ margin:0; position:relative; }
.portrait img{ display:block; width:100%; height:auto; filter:saturate(.82) contrast(1.03); }
.portrait figcaption{ margin-top:10px; color:var(--ink-3); }
.portrait figcaption b{ color:var(--ink); font-weight:600; }
.tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:26px; }
.tags li{
  list-style:none; font-family:var(--f-mono); font-size:11px; letter-spacing:.06em;
  color:var(--ink); border:1px solid var(--rule-2); padding:6px 10px;
}
.tags li.hi{ border-color:var(--cyan); color:var(--cyan); }
.note{
  margin-top:26px; border-left:2px solid var(--magenta); padding:2px 0 2px 16px;
  font-size:14.5px; color:var(--ink-2); max-width:66ch;
}

/* ---------- services ---------- */
/* four services: 2x2 on wide, single column on narrow — never an orphan cell */
.svcs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); margin-top:clamp(30px,4vw,44px); }
@media (max-width:860px){ .svcs{ grid-template-columns:minmax(0,1fr); } }
.svc{ background:var(--ground); padding:24px clamp(18px,2vw,24px) 26px; }
.svc .n{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; color:var(--magenta); }
.svc h3{ font-family:var(--f-disp); text-transform:uppercase; font-weight:800; font-size:clamp(21px,2.4vw,26px); line-height:.98; letter-spacing:.01em; margin:10px 0 10px; }
.svc > p{ font-size:14.5px; color:var(--ink-2); margin:0 0 14px; }
.svc ul{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.svc li{ position:relative; font-size:14px; line-height:1.45; color:var(--ink-2); padding:8px 0 8px 15px; border-bottom:1px solid var(--rule); }
.svc li:last-child{ border-bottom:none; }
.svc li::before{ content:""; position:absolute; left:0; top:16px; width:7px; height:1px; background:var(--cyan); }

/* ---------- experience ---------- */
.xp{ margin-top:clamp(28px,3.6vw,42px); border-top:1px solid var(--rule-2); }
.xp-row{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:clamp(14px,2.4vw,28px); padding:15px 0; border-bottom:1px solid var(--rule); align-items:baseline; }
.xp-yr{ font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; color:var(--ink-3); white-space:nowrap; }
.xp-org{ font-family:var(--f-disp); text-transform:uppercase; font-weight:700; font-size:19px; letter-spacing:.01em; line-height:1.05; margin:0 0 3px; }
.xp-role{ font-size:14px; color:var(--ink-2); line-height:1.45; }
.xp-role em{ font-style:normal; color:var(--ink-3); }

.matters{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); margin-top:clamp(28px,3.6vw,42px); }
.matter{ background:var(--ground-2); padding:20px; }
.matter .k{ display:flex; gap:9px; align-items:center; font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.matter .k b{ color:var(--cyan); font-weight:600; }
.matter .k b.act{ color:var(--magenta); }
.matter h4{ font-family:var(--f-disp); text-transform:uppercase; font-weight:700; font-size:20px; line-height:1.02; letter-spacing:.01em; margin:11px 0 8px; }
.matter p{ margin:0; font-size:14px; line-height:1.5; color:var(--ink-2); }

/* ---------- photo bands ---------- */
.band{
  position:relative; overflow:hidden; height:clamp(210px,32vw,380px);
  background-size:cover; background-position:center 42%;
  border-bottom:1px solid var(--rule); filter:saturate(.72) contrast(1.04);
}
.band-sx{ background-image:url("../img/band-sx.jpg"); background-position:center 38%; }
.band::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg,rgba(11,12,14,.96) 0%,rgba(11,12,14,.15) 46%),
             linear-gradient(180deg,rgba(11,12,14,.7) 0%,rgba(11,12,14,0) 30%);
}
.band-cap{ position:absolute; z-index:2; left:0; right:0; bottom:0; padding-bottom:clamp(14px,2.4vw,22px); }
.band-cap .wrap{ color:#A9AFB6; }
.band-cap b{ color:#4FC3D2; font-weight:600; }
.band-cap span{ color:#E7E9EB; }

/* ---------- contact ---------- */
.contact{ position:relative; overflow:hidden; }
.contact-photo{
  position:absolute; inset:0;
  background-image:url("../img/band-night.jpg"); background-size:cover; background-position:64% 50%;
  filter:saturate(.66) contrast(1.05);
}
.contact-photo::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg,#0B0C0E 0%,rgba(11,12,14,.94) 34%,rgba(11,12,14,.55) 68%,rgba(11,12,14,.35) 100%),
    linear-gradient(0deg,#0B0C0E 0%,rgba(11,12,14,0) 42%),
    linear-gradient(180deg,#0B0C0E 0%,rgba(11,12,14,0) 22%);
}
.contact > .wrap{ position:relative; z-index:2; }
.cmeta{ margin-top:34px; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:22px; }
.cmeta .k{ display:block; font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px; }
.cmeta div{ font-size:15px; color:var(--ink); line-height:1.5; }

/* ---------- inquiry form ---------- */
.form{ margin-top:clamp(30px,4vw,42px); border:1px solid var(--rule-2); padding:clamp(20px,3vw,30px); background:rgba(11,12,14,.55); max-width:760px; }
.form-k{ color:var(--cyan); margin-bottom:18px; }
.fgrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.f-full{ grid-column:1 / -1; }
.form label{ display:block; font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px; }
.form input,.form select,.form textarea{
  width:100%; background:transparent; border:1px solid var(--rule-2); color:var(--ink);
  font-family:var(--f-body); font-size:15px; padding:11px 12px; border-radius:0; -webkit-appearance:none; appearance:none;
}
.form select{ background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%); background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:34px; }
.form select option{ background:#101215; color:#E7E9EB; }
.form textarea{ min-height:110px; resize:vertical; line-height:1.5; }
.form input:focus,.form select:focus,.form textarea:focus{ outline:none; border-color:var(--cyan); }
.form input::placeholder,.form textarea::placeholder{ color:var(--ink-3); }
.form-foot{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:20px; }
.form button{ font-family:inherit; cursor:pointer; }
.form-hint{ font-family:var(--f-mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); line-height:1.6; max-width:34ch; }
@media (max-width:640px){ .fgrid{ grid-template-columns:minmax(0,1fr); } }

/* ---------- footer ---------- */
.footer{ padding:26px 0 40px; }
.footer .wrap{ display:flex; gap:16px; justify-content:space-between; flex-wrap:wrap; color:var(--ink-3); }
.footer p{ margin:0; font-size:12px; max-width:62ch; }
.credit{ color:var(--ink-3); }
.reg{ display:inline-flex; gap:5px; align-items:center; }
.reg i{ width:8px; height:8px; display:block; border-radius:50%; }

@media (max-width:900px){
  .hero-photo{ left:0; background-position:62% 40%; }
  .hero-photo::after{
    background:linear-gradient(0deg,#0B0C0E 10%,rgba(11,12,14,.82) 48%,rgba(11,12,14,.62) 100%),
               linear-gradient(180deg,#0B0C0E 0%,rgba(11,12,14,0) 22%);
  }
  .contact-photo::after{
    background:linear-gradient(0deg,#0B0C0E 8%,rgba(11,12,14,.86) 52%,rgba(11,12,14,.66) 100%),
               linear-gradient(180deg,#0B0C0E 0%,rgba(11,12,14,0) 20%);
  }
  .who{ grid-template-columns:1fr; }
  .portrait{ max-width:290px; }
}
@media (max-width:600px){
  .xp-row{ grid-template-columns:1fr; gap:4px; }
  .navbtns{ width:100%; margin-left:0; }
  .navbtns a{ flex:1; text-align:center; }
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ transition:none !important; } }
/* ================= NEWS INDEX ================= */
.post-list{ margin-top:clamp(30px,4vw,44px); border-top:1px solid var(--rule-2); }
.post-item{ display:grid; grid-template-columns:150px minmax(0,1fr); gap:clamp(16px,3vw,36px); padding:24px 0; border-bottom:1px solid var(--rule); }
.post-date{ font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; color:var(--ink-3); }
.post-tag{ display:block; margin-top:8px; font-family:var(--f-mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--magenta); }
.post-item h3{ font-family:var(--f-disp); text-transform:uppercase; font-weight:800; font-size:clamp(22px,2.8vw,30px); line-height:.98; letter-spacing:.01em; margin:0 0 9px; }
.post-item h3 a{ color:var(--ink); }
.post-item h3 a:hover{ color:var(--cyan); text-decoration:none; }
.post-item p{ margin:0 0 12px; font-size:15px; color:var(--ink-2); }
.readmore{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--cyan); }

/* ================= ARTICLE ================= */
.article{ padding:clamp(46px,6vw,76px) 0 clamp(52px,7vw,90px); }
.article-head{ max-width:760px; }
.article-meta{ display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; color:var(--ink-3); margin-bottom:22px; }
.article-meta b{ color:var(--magenta); font-weight:600; }
.article h1{ font-family:var(--f-disp); font-weight:800; text-transform:uppercase; line-height:.92; letter-spacing:.005em; font-size:clamp(34px,5.6vw,62px); margin:0 0 20px; text-wrap:balance; }
.standfirst{ font-size:clamp(17px,2.1vw,20px); line-height:1.55; color:var(--ink-2); font-weight:300; max-width:60ch; margin:0; }
.article-body{ max-width:660px; margin-top:clamp(32px,4vw,46px); }
.article-body h2{ font-family:var(--f-disp); text-transform:uppercase; font-weight:800; font-size:clamp(22px,2.8vw,30px); line-height:1; letter-spacing:.01em; margin:38px 0 14px; }
.article-body h3{ font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); margin:30px 0 10px; font-weight:600; }
.article-body p{ margin:0 0 17px; font-size:16.5px; line-height:1.68; color:var(--ink-2); max-width:none; }
.article-body p strong,.article-body li strong{ color:var(--ink); font-weight:600; }
.article-body ul{ list-style:none; margin:0 0 20px; padding:0; }
.article-body li{ position:relative; padding:8px 0 8px 20px; border-top:1px solid var(--rule); font-size:15.5px; line-height:1.55; color:var(--ink-2); }
.article-body li::before{ content:""; position:absolute; left:0; top:17px; width:9px; height:1px; background:var(--cyan); }
.pull{ border-left:2px solid var(--magenta); padding:4px 0 4px 18px; margin:26px 0; font-size:17px; line-height:1.55; color:var(--ink); font-weight:300; }
.article-body table{ width:100%; border-collapse:collapse; font-size:14.5px; margin:0 0 22px; }
.article-body th,.article-body td{ text-align:left; padding:9px 14px 9px 0; border-bottom:1px solid var(--rule); vertical-align:top; }
.article-body thead th{ font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:500; border-bottom:1px solid var(--rule-2); }
.tablewrap{ overflow-x:auto; }
.disclaim{ margin-top:38px; padding-top:18px; border-top:1px solid var(--rule-2); font-size:13px; line-height:1.6; color:var(--ink-3); }
.srcs{ margin-top:26px; }
.srcs .k{ font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:9px; }
.srcs li{ border:none; padding:4px 0 4px 20px; font-size:14px; }
.article-foot{ margin-top:clamp(34px,4vw,50px); padding-top:26px; border-top:1px solid var(--rule-2); max-width:660px; }

@media (max-width:640px){ .post-item{ grid-template-columns:1fr; gap:8px; } }

/* ---------- photo fallbacks ----------
   If a background image fails to decode for any reason, these keep the
   section reading as a deliberate dark plate rather than an empty box. */
.hero-photo,.contact-photo{ background-color:#0B0C0E; }
.band{ background-color:#14171A; }
.portrait img{ background:#101215; min-height:120px; }