/* PacRim shared draft style, 2026-11-01. One cinematic system for silentallies.com, pacrimltd.ca, pacrimlabs.com */
:root{
  --ink:#0b0f14; --ink-2:#111821; --navy:#14233a; --line:rgba(255,255,255,.12);
  --paper:#f3efe6; --text:#e9e6df; --muted:#a8acb3;
  --gold:#c9a45c; --gold-2:#e2c487; --teal:#2bb3a3;
  --display:"Barlow Condensed","Arial Narrow",sans-serif;
  --sans:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Cormorant Garamond",Georgia,serif;
  --wrap:min(1200px,92vw);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--text);font:400 17px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:var(--wrap);margin:0 auto}
.eyebrow{font:600 .78rem/1.5 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}
.display{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:.92}
.serif{font-family:var(--serif)}
.muted{color:var(--muted)}
.accent{color:var(--gold)}
.teal{color:var(--teal)}

/* ---------- header / nav (CSS-only mobile menu) ---------- */
.site-head{position:fixed;inset:0 0 auto 0;z-index:50;background:linear-gradient(rgba(11,15,20,.85),rgba(11,15,20,0));transition:background .3s}
.site-head .bar{display:flex;align-items:center;justify-content:space-between;gap:24px;width:var(--wrap);margin:0 auto;padding:18px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{height:38px;width:auto}
.brand span{font:700 1.05rem/1 var(--display);letter-spacing:.22em;text-transform:uppercase}
.nav{display:flex;gap:26px;list-style:none}
.nav a{text-decoration:none;font:600 .78rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#d7d9dc;padding:6px 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a:focus{color:#fff;border-color:var(--gold)}
.menu-toggle,.menu-btn{display:none}
@media (max-width:900px){
  .menu-btn{display:block;cursor:pointer;width:44px;height:44px;position:relative;z-index:60}
  .menu-btn i,.menu-btn i::before,.menu-btn i::after{position:absolute;left:10px;width:24px;height:2px;background:#fff;content:"";transition:.25s}
  .menu-btn i{top:21px}.menu-btn i::before{left:0;top:-7px}.menu-btn i::after{left:0;top:7px}
  .nav{position:fixed;inset:0;flex-direction:column;justify-content:center;align-items:center;gap:28px;background:rgba(11,15,20,.97);transform:translateY(-100%);transition:transform .35s ease}
  .nav a{font-size:1rem}
  .menu-toggle:checked ~ .nav{transform:none}
  .menu-toggle:checked + .menu-btn i{background:transparent}
  .menu-toggle:checked + .menu-btn i::before{top:0;transform:rotate(45deg)}
  .menu-toggle:checked + .menu-btn i::after{top:0;transform:rotate(-45deg)}
}

/* ---------- buttons ---------- */
.btns{display:flex;flex-wrap:wrap;gap:14px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border:1px solid var(--gold);color:#fff;text-decoration:none;font:600 .78rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;transition:.2s}
.btn:hover,.btn:focus{background:var(--gold);color:var(--ink)}
.btn.solid{background:var(--gold);color:var(--ink)}
.btn.solid:hover{background:var(--gold-2)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;isolation:isolate;overflow:hidden}
.hero .bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;transform:scale(1.04);animation:drift 22s ease-in-out infinite alternate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(11,15,20,.92) 0%,rgba(11,15,20,.55) 45%,rgba(11,15,20,.1) 100%),linear-gradient(0deg,var(--ink) 0%,rgba(11,15,20,0) 40%)}
@keyframes drift{to{transform:scale(1.12) translateX(-1.5%)}}
@media (prefers-reduced-motion:reduce){.hero .bg{animation:none}}
.hero .inner{width:var(--wrap);margin:0 auto;padding:140px 0 72px}
.placeholder-tag{position:absolute;right:16px;top:86px;font:600 .62rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;background:rgba(0,0,0,.55);color:#d9d9d9;padding:7px 10px;border:1px dashed rgba(255,255,255,.35)}
.fig-tag{display:block;margin-top:8px;font-size:.72rem;letter-spacing:.06em;color:var(--muted)}

/* ---------- sections ---------- */
section{position:relative}
.sec{padding:clamp(72px,11vw,150px) 0}
.sec-head{margin-bottom:clamp(36px,5vw,64px)}
.sec-head h2{font:700 clamp(2.4rem,6vw,4.8rem)/.92 var(--display);text-transform:uppercase;margin-top:14px}
.rule{height:1px;background:var(--line);border:0}
.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,90px);align-items:center}
@media (max-width:900px){.grid-2{grid-template-columns:1fr}}
.lede{font:500 clamp(1.25rem,2.2vw,1.6rem)/1.45 var(--serif);color:#f1ede4}

/* status chips */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{font:600 .68rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--line);padding:9px 12px;color:#cfd3d8}
.chip.gold{border-color:var(--gold);color:var(--gold)}
.chip.teal{border-color:var(--teal);color:var(--teal)}

/* credits definition list (A24-style) */
.credits{display:grid;grid-template-columns:auto 1fr;gap:10px 28px;font-size:.95rem}
.credits dt{font:600 .7rem/1.9 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.credits dd{color:#fff}

/* beats */
.beats{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line)}
.beat{background:var(--ink);padding:34px 28px 40px}
.beat .n{font:700 .8rem/1 var(--sans);letter-spacing:.2em;color:var(--gold)}
.beat h3{font:700 1.9rem/1 var(--display);text-transform:uppercase;margin:16px 0 14px}
.beat p{color:#c9ccd1;font-size:.98rem}
@media (max-width:1000px){.beats{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.beats{grid-template-columns:1fr}}

/* quotes */
.pull{position:relative;padding-left:clamp(0px,6vw,90px)}
.pull::before{content:"\201C";position:absolute;left:-6px;top:-.42em;font:700 clamp(7rem,14vw,12rem)/1 var(--serif);color:var(--gold);opacity:.9}
.pull blockquote{font:500 clamp(1.8rem,4.2vw,3.4rem)/1.12 var(--serif);color:#fff;padding-top:clamp(70px,6vw,40px)}
.pull cite{display:block;margin-top:22px;font:600 .75rem/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;font-style:normal;color:var(--gold)}
@media (min-width:700px){.pull blockquote{padding-top:0}}

/* people */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.person{border-top:2px solid var(--gold);padding-top:26px}
.person .mono{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:var(--navy);font:700 1.6rem/1 var(--display);letter-spacing:.06em;color:var(--gold-2);margin-bottom:22px}
.person h3{font:700 2rem/1 var(--display);text-transform:uppercase}
.person .role{font:600 .72rem/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:8px 0 16px}
.person p{color:#c9ccd1;font-size:.97rem}
.person strong{color:#fff;font-weight:600}
@media (max-width:900px){.people{grid-template-columns:1fr}}

/* comps / counters */
.comps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.comp{background:linear-gradient(180deg,var(--navy),var(--ink-2));border:1px solid var(--line);padding:30px 24px 26px;display:flex;flex-direction:column;min-height:280px}
.comp .yr{font:600 .72rem/1 var(--sans);letter-spacing:.22em;color:var(--muted)}
.comp h3{font:700 1.85rem/1 var(--display);text-transform:uppercase;margin:12px 0 auto}
.comp .lbl{font:600 .64rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-top:28px}
.comp .num{font:700 clamp(2.6rem,4vw,3.4rem)/1 var(--display);color:var(--gold);margin-top:10px;font-variant-numeric:tabular-nums}
.comp .src{font-size:.72rem;color:var(--muted);margin-top:10px}
@media (max-width:1000px){.comps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.comps{grid-template-columns:1fr}.comp{min-height:0}}

/* image band */
.band{position:relative;min-height:70vh;display:flex;align-items:center;background-size:cover;background-position:center;isolation:isolate}
.band::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,var(--ink),rgba(11,15,20,.35) 40%,rgba(11,15,20,.35) 60%,var(--ink))}
.setpieces{display:flex;flex-wrap:wrap;gap:10px 34px;margin-top:26px}
.setpieces span{font:700 clamp(1.6rem,4vw,3.2rem)/1 var(--display);letter-spacing:.04em;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.6)}
.setpieces span:nth-child(odd){color:var(--gold-2)}

/* lists */
.ticks{list-style:none;display:grid;gap:14px}
.ticks li{padding-left:22px;position:relative;color:#d2d5da}
.ticks li::before{content:"";position:absolute;left:0;top:.7em;width:10px;height:1px;background:var(--gold)}

/* feed (pacrimltd.ca) */
.feed{display:grid;gap:0}
.post{display:grid;grid-template-columns:150px 1fr auto;gap:28px;padding:30px 0;border-top:1px solid var(--line);align-items:start}
.post:last-child{border-bottom:1px solid var(--line)}
.post time{font:600 .74rem/1.6 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.post h3{font:700 1.7rem/1.05 var(--display);text-transform:uppercase;margin-bottom:8px}
.post p{color:#c9ccd1;font-size:.97rem}
.post .more{font:600 .72rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--teal);text-decoration:none;white-space:nowrap}
@media (max-width:760px){.post{grid-template-columns:1fr;gap:10px}}

/* slate cards */
.slate{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{border:1px solid var(--line);padding:28px 24px;background:var(--ink-2);display:flex;flex-direction:column;gap:12px}
.card h3{font:700 2rem/1 var(--display);text-transform:uppercase}
.card p{color:#c9ccd1;font-size:.95rem}
.card .go{margin-top:auto;font:600 .72rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);text-decoration:none}
@media (max-width:900px){.slate{grid-template-columns:1fr}}

/* contact */
.contact{background:var(--paper);color:var(--ink)}
.contact .eyebrow{color:#8a6a2c}
.contact h2{color:var(--ink)}
.contact .big a{font:700 clamp(1.6rem,4.5vw,3.2rem)/1.1 var(--display);text-transform:uppercase;text-decoration:none;color:var(--ink);border-bottom:2px solid var(--gold);word-break:break-word}
.contact .btn{color:var(--ink)}
.contact .btn.solid{color:var(--ink)}
.contact .meta{color:#4a4f57;font-size:.95rem}

/* footer */
.site-foot{padding:46px 0 60px;border-top:1px solid var(--line);font-size:.82rem;color:var(--muted)}
.site-foot .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:26px;align-items:center}
.logos{display:flex;align-items:center;gap:30px}
.logos img{height:54px;width:auto;opacity:.92}

/* reveal on scroll (progressive enhancement: visible without JS) */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;z-index:99;background:#fff;color:#000;padding:8px}