/*
Theme Name: Polos and Gilets
Theme URI: https://polosandgilets.com
Author: Big Trouble Labs
Description: A single-page theme for the Polos and Gilets podcast, built on the Big Trouble Labs theme structure. Warm near-black ground, one green accent, monospace labels, restrained motion. Fonts served from the theme. No page builder, no framework, no third-party requests. Copy is edited in Settings, then Page Content.
Version: 1.0.2
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: pg
*/

/* ═══ FONTS ═══ */
/* Served from the theme. Nothing is fetched from Google or anywhere else.
   All three are under the SIL Open Font License 1.1; see assets/fonts/. */
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 600;font-display:swap;
  src:url("assets/fonts/instrument-sans-variable-latin.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("assets/fonts/ibm-plex-mono-400-latin.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("assets/fonts/ibm-plex-mono-500-latin.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:700;font-display:swap;
  src:url("assets/fonts/archivo-700-latin.woff2") format("woff2")}
:root{
  color-scheme:dark;

  /* colour, from branding.md */
  --ground:#0e0d0b;
  --ground-lift:#14120f;
  --field:#17140f;
  --field-hi:#1d1913;
  --line-hair:#2a251c;
  --accent:#33e0a0;
  --accent-hi:#6eebbd;
  --accent-dim:#1f9a6c;
  --line:rgba(51,224,160,0.18);
  --line-soft:#2a251c;
  --ink:#f7f5f1;
  --ink-dim:#a39b88;
  --ink-faint:#8a8373;
  --ok:#33e0a0;
  --bad:#d98b6c;

  /* type */
  --font-display:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --font-mark:"Archivo","Arial Black","Helvetica Neue",Arial,sans-serif;

  /* space */
  --panel-max:64rem;
  --radius:2px;

  /* motion */
  --dur-fast:240ms;
  --dur:520ms;
  --stagger:80ms;
  --ease:cubic-bezier(0.2,0.7,0.3,1);
  --travel:12px;

}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font-display);
  font-size:1rem;line-height:1.65;-webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid var(--accent-hi);outline-offset:2px;border-radius:var(--radius)}
a{color:var(--accent)}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:var(--ground);
  padding:.75rem 1.25rem;font-weight:600;text-decoration:none}
.skip:focus{left:1rem;top:1rem}

/* ═══ FIXED CHROME ═══ */
#progress{position:fixed;top:0;left:0;z-index:80;height:2px;width:0%;background:var(--accent);
  transition:width var(--dur-fast) linear}
#rail{position:fixed;right:1.5rem;top:50%;z-index:60;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:flex-end;gap:.75rem}
.rail-btn{appearance:none;background:none;border:0;padding:.35rem 0 .35rem .75rem;cursor:pointer;position:relative;line-height:0;display:block}
.rail-mark{display:block;height:1px;width:14px;background:var(--accent-dim);
  transition:width var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease)}
.rail-btn[aria-current="true"] .rail-mark{width:24px;background:var(--accent)}
.rail-btn:hover .rail-mark{background:var(--accent-hi)}
.rail-label{position:absolute;right:calc(100% + .6rem);top:50%;transform:translateY(-50%);
  font-family:var(--font-mono);font-size:.6875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);white-space:nowrap;opacity:0;transition:opacity var(--dur-fast) var(--ease);pointer-events:none}
.rail-btn:hover .rail-label,.rail-btn:focus-visible .rail-label{opacity:1}
@media(max-width:900px){#rail{display:none}}

/* ═══ MASTHEAD ═══ */
.masthead{padding:3rem 1.5rem 0;display:flex;justify-content:center;
  background:radial-gradient(ellipse 90% 70% at 50% 40%,var(--ground-lift) 0%,var(--ground) 100%)}
.lockup{display:flex;align-items:center;gap:1rem;text-decoration:none;color:var(--ink)}
.lockup svg{height:56px;width:auto;display:block;flex:none}
.lockup .wm{font-family:var(--font-mark);font-weight:700;text-transform:uppercase;letter-spacing:.055em;
  font-size:1.35rem;line-height:1.02}
.lockup .wm span{display:block}
@media(min-width:760px){.masthead{padding:3.5rem 2.5rem 0}.lockup svg{height:64px}.lockup .wm{font-size:1.55rem}}

/* ═══ LAYOUT ═══ */
.stage{position:relative;padding:3rem 1.5rem;
  background:radial-gradient(ellipse 90% 70% at 50% 40%,var(--ground-lift) 0%,var(--ground) 100%)}
.stage + .stage{border-top:1px solid var(--line-soft)}
#s1{padding:1.5rem 1.5rem 3.27rem}
@media(min-width:760px){.stage{padding:4.75rem 2.5rem}#s1{padding:2.21rem 2.5rem 5.43rem}}
.panel{width:100%;max-width:var(--panel-max);margin:0 auto;position:relative}
.bracketed{padding:2.5rem}
@media(max-width:480px){.bracketed{padding:2rem 1.25rem}}
.br{position:absolute;width:18px;height:18px;opacity:.5;transform:scale(.4);transition:transform var(--dur) var(--ease)}
.br-tl{top:0;left:0;border-top:1px solid var(--accent);border-left:1px solid var(--accent);transform-origin:top left}
.br-tr{top:0;right:0;border-top:1px solid var(--accent);border-right:1px solid var(--accent);transform-origin:top right}
.br-br{bottom:0;right:0;border-bottom:1px solid var(--accent);border-right:1px solid var(--accent);transform-origin:bottom right}
.br-bl{bottom:0;left:0;border-bottom:1px solid var(--accent);border-left:1px solid var(--accent);transform-origin:bottom left}
.in-view .br{transform:scale(1)}
.in-view .br-tr{transition-delay:var(--stagger)}
.in-view .br-br{transition-delay:calc(var(--stagger)*2)}
.in-view .br-bl{transition-delay:calc(var(--stagger)*3)}

/* ═══ TYPE ═══ */
.eyebrow{font-family:var(--font-mono);font-size:.75rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin:0 0 1.25rem}
.display{font-size:clamp(2.5rem,4.26vw,2.94rem);font-weight:600;letter-spacing:-.02em;line-height:1.03;margin:0}
.headline{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:600;letter-spacing:-.015em;line-height:1.15;margin:0}
.standfirst{font-size:clamp(1.15rem,1.8vw,1.4rem);line-height:1.5;color:var(--ink-dim);margin:1.35rem 0 0}
.body{color:var(--ink-dim);margin:1.5rem 0 0;font-size:1.0625rem;line-height:1.7}
.meta{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.04em;color:var(--ink-faint);margin:2.25rem 0 0}
.meta a{color:var(--accent);text-decoration:none}
.meta a:hover{text-decoration:underline}
.test-line{font-family:var(--font-mono);font-size:.8125rem;line-height:1.7;letter-spacing:.01em;color:var(--accent);margin:1.75rem 0 0}

/* ═══ BUTTONS ═══ */
.btns{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.25rem}
.btn{display:inline-block;padding:.85rem 1.6rem;background:var(--accent);color:var(--ground);font-weight:600;
  font-size:.9375rem;text-decoration:none;border:1px solid var(--accent);border-radius:var(--radius);cursor:pointer;
  font-family:var(--font-display);
  transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.btn:hover{background:var(--accent-hi);border-color:var(--accent-hi)}
.btn-ghost{background:transparent;color:var(--accent);border-color:var(--accent-dim)}
.btn-ghost:hover{background:transparent;color:var(--accent-hi);border-color:var(--accent-hi)}

/* ═══ PULL ═══ */
.pull{margin:2.75rem 0 0;padding:0 0 0 1.5rem;border-left:2px solid var(--accent)}
.pull p{margin:0;font-size:clamp(1.35rem,2.6vw,1.85rem);font-weight:600;line-height:1.25;letter-spacing:-.012em;color:var(--ink)}

/* ═══ CARDS ═══ */
.cards{margin:2.75rem 0 0;display:grid;gap:1rem;grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr}
.card{background:var(--field);border:1px solid var(--line-soft);border-radius:var(--radius);padding:1.75rem 1.5rem;
  transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.card:hover{background:var(--field-hi);border-color:var(--accent-dim)}
.card h3{margin:0 0 .75rem;font-size:1.125rem;font-weight:600;letter-spacing:-.01em}
.card p{margin:0;color:var(--ink-dim);font-size:.9375rem;line-height:1.6}
@media(max-width:860px){.cards{grid-template-columns:1fr;grid-auto-rows:auto}}

/* ═══ RULED LIST ═══ */
.ruled{list-style:none;padding:0;margin:2.75rem 0 0;display:flex;flex-direction:column;gap:1.5rem}
.ruled li{display:grid;grid-template-columns:20px 1fr;gap:1.25rem;align-items:baseline;color:var(--ink-dim);font-size:1.0625rem;line-height:1.7}
.ruled li::before{content:"";display:block;height:1px;background:var(--accent);position:relative;top:.72em}
.ruled strong{color:var(--ink);font-weight:500}

/* ═══ STEPS ═══ */
.steps{list-style:none;padding:0;margin:2.75rem 0 0;display:flex;flex-direction:column;gap:1.6rem;counter-reset:step}
.steps li{display:grid;grid-template-columns:2.25rem 1fr;gap:1.25rem;color:var(--ink-dim);counter-increment:step;font-size:1.0625rem;line-height:1.7}
.steps li::before{content:counter(step,decimal-leading-zero);font-family:var(--font-mono);font-size:.75rem;letter-spacing:.1em;color:var(--accent-dim);padding-top:.35em}
.steps strong{color:var(--ink);font-weight:500}

/* ═══ ACCENT RULE PANEL ═══ */
.panel.accent-rule{border-left:2px solid var(--accent);padding-left:1.75rem}
/* ═══ FORM ═══ */
.form{margin:2.75rem 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem 1.5rem;align-items:start}
.form.two{grid-template-columns:repeat(2,1fr)}
.field-full{grid-column:1/-1}
@media(max-width:760px){.form,.form.two{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.5rem}
.field label{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.field .opt{text-transform:none;letter-spacing:0}
.field input,.field textarea{background:var(--field);border:1px solid var(--line-soft);border-radius:var(--radius);color:var(--ink);
  font-family:var(--font-display);font-size:1rem;padding:.8rem .9rem;width:100%;
  transition:border-color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease)}
.field input:hover,.field textarea:hover{border-color:var(--accent-dim)}
.field input:focus,.field textarea:focus{border-color:var(--accent);background:var(--field-hi);outline:2px solid var(--accent-hi);outline-offset:1px}
.field textarea{min-height:8rem;resize:vertical;line-height:1.55}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{font-size:.8125rem;color:var(--ink-faint);line-height:1.55;margin:0;grid-column:1/-1}
.consent a{color:var(--accent)}
.form .btn{margin-top:.25rem}

/* ═══ LEGAL PAGE ═══ */
.doc{max-width:var(--panel-max);margin:0 auto;padding:3.5rem 1.5rem 5rem}
@media(min-width:760px){.doc{padding:5rem 2.5rem 7rem}}
.backlink{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;display:inline-block;margin-bottom:2.5rem;color:var(--accent)}
.doc h1{font-size:clamp(2.1rem,4.4vw,3.2rem);font-weight:600;letter-spacing:-.02em;line-height:1.06;margin:0}
.lede{font-size:clamp(1.1rem,1.7vw,1.3rem);line-height:1.55;color:var(--ink-dim);margin:1.35rem 0 0}
.stamp{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.04em;color:var(--ink-faint);margin:1.75rem 0 0;padding-bottom:2.5rem;border-bottom:1px solid var(--line-soft)}
.doc h2{font-size:clamp(1.3rem,2.2vw,1.7rem);font-weight:600;letter-spacing:-.012em;line-height:1.2;margin:3.5rem 0 0}
.doc p{margin:1.25rem 0 0;color:var(--ink-dim);font-size:1.0625rem;line-height:1.7}
.doc p strong{color:var(--ink);font-weight:500}
.doc ul{margin:1.25rem 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:1rem}
.doc li{display:grid;grid-template-columns:20px 1fr;gap:1.25rem;align-items:baseline;color:var(--ink-dim);font-size:1.0625rem;line-height:1.7}
.doc li::before{content:"";display:block;height:1px;background:var(--accent);position:relative;top:.78em}
.doc li strong{color:var(--ink);font-weight:500}
.tbl{width:100%;border-collapse:collapse;margin:1.25rem 0 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:1rem 1.25rem 1rem 0;border-bottom:1px solid var(--line-soft);color:var(--ink-dim);font-size:1rem;line-height:1.6}
.tbl th{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);font-weight:500}
.tbl tr:last-child td,.tbl tr:last-child th{border-bottom:0}
.tblwrap{overflow-x:auto}

/* ═══ FOOTER ═══ */
.foot{background:var(--ground);border-top:1px solid var(--line);padding:3.5rem 1.5rem}
@media(min-width:760px){.foot{padding:4rem 2.5rem}}
.foot-inner{max-width:var(--panel-max);margin:0 auto;display:flex;flex-direction:column;gap:1.5rem;
  font-family:var(--font-mono);font-size:.75rem;line-height:1.9;letter-spacing:.03em;color:var(--ink-faint)}
.foot-mark{display:flex;align-items:center;gap:.75rem}
.foot-mark svg{height:32px;width:auto}
.foot-mark span{font-family:var(--font-mark);font-weight:700;font-size:.95rem;letter-spacing:.055em;text-transform:uppercase;color:var(--ink)}
.foot-contact{display:flex;flex-wrap:wrap;gap:.5rem 2rem;color:var(--ink-dim)}
.foot-legal span{display:block}
.foot a{color:var(--accent);text-decoration:none}
.foot a:hover{text-decoration:underline}

/* ═══ REVEAL ═══ */
.js .rv{opacity:0;transform:translateY(var(--travel));transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.js .in-view .rv{opacity:1;transform:none}
.js .in-view .rv-1{transition-delay:var(--stagger)}
.js .in-view .rv-2{transition-delay:calc(var(--stagger)*2)}
.js .in-view .rv-3{transition-delay:calc(var(--stagger)*3)}
.js .in-view .rv-4{transition-delay:calc(var(--stagger)*4)}
.js .in-view .rv-5{transition-delay:calc(var(--stagger)*5)}
.js .in-view .rv-6{transition-delay:calc(var(--stagger)*6)}
@media(prefers-reduced-motion:reduce){
  .js .rv,.js .in-view .rv{opacity:1;transform:none;transition:none}
  .br,.in-view .br{transform:scale(1);transition:none}
  #progress{transition:none}
  html{scroll-behavior:auto}
}


/* ═══ HOST ═══ */
.host{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:start}
.has-photo .host{grid-template-columns:minmax(0,1fr) 15rem}
@media(max-width:760px){.has-photo .host{grid-template-columns:1fr}.host-photo{max-width:15rem;order:-1}}
.host-photo{margin:0}
.host-photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);border:1px solid var(--line-soft)}
.links{display:flex;flex-wrap:wrap;gap:1rem 2rem;margin:2.25rem 0 0;padding:0;list-style:none}
.links a{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);text-decoration:none}
.links a:hover{color:var(--accent-hi);text-decoration:underline}
.links svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ═══ MARK ═══ */
.mark{fill:var(--accent)}

/* ═══ FORM NOTICES ═══ */
.notice{margin:2.5rem 0 0;padding:1rem 1.25rem;border-radius:var(--radius);
  border:1px solid var(--line-soft);font-size:.9375rem;line-height:1.6}
.notice-ok{border-color:var(--ok);color:var(--ok)}
.notice-bad{border-color:var(--bad);color:var(--bad)}
.notice a{color:var(--accent)}
.doc .btn{margin-top:1rem}

/* ═══ LEGAL PAGE: keep label, lede and stamp styles over the general .doc p rule ═══ */
.doc .eyebrow{font-family:var(--font-mono);font-size:.75rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin:0 0 1.25rem;line-height:1.65}
.doc .lede{font-size:clamp(1.1rem,1.7vw,1.3rem);line-height:1.55;color:var(--ink-dim);margin:1.35rem 0 0}
.doc .stamp{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.04em;color:var(--ink-faint);
  margin:1.75rem 0 0;padding-bottom:2.5rem;border-bottom:1px solid var(--line-soft)}