/* Admiral Reporting Co. — design mockup
   Register: SLEEK (near-black ground, one hot accent in two values,
   tight uppercase display, structure by hairline and dashed rule). */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,p,dl,dd,ol,ul,figure,blockquote,pre{margin:0}
ol,ul{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
table{border-collapse:collapse}

:root{
  /* ground */
  --ground:#0B0C0E;
  --panel:#14161A;
  --ink:#F1F3F5;
  --body:#A2A9B0;

  /* the one hot accent, two values */
  --accent:#00B5C4;      /* fills and marks; ground ink sits on it at 7.83:1 */
  --accent-text:#2BC4D4; /* small accent text; 9.27:1 on ground, 8.58:1 on panel */

  --hair:rgba(0,181,196,.16);
  --hair-strong:rgba(0,181,196,.30);

  --sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"SF Mono",Menlo,"DejaVu Sans Mono",monospace;

  /* type ladder, derived for this page */
  --t0:0.6875rem;  /* 11 */
  --t1:0.8125rem;  /* 13 */
  --t2:1.0625rem;  /* 17  body */
  --t3:1.375rem;   /* 22 */
  --t4:1.9375rem;  /* 31 */
  --t5:2.875rem;   /* 46 */
  --t6:4rem;       /* 64  H1 = 3.76x body */

  --pad:clamp(20px,5vw,64px);
  --maxw:1240px;
}

body{
  background:var(--ground);
  color:var(--body);
  font-family:var(--sans);
  font-weight:300;
  font-size:var(--t2);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}

a{color:var(--accent-text)}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent-text);outline-offset:3px;
}
.skip{
  position:absolute;left:-9999px;top:0;z-index:60;
  background:var(--accent);color:var(--ground);
  padding:12px 18px;font-size:var(--t1);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
}
.skip:focus{left:0}

.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- mockup banner (ink, never the accent) ---------- */
.mockbar{
  background:#22262B;color:var(--ink);
  font-size:var(--t0);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  text-align:center;padding:9px var(--pad);
}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:50;
  background:var(--ground);
  border-bottom:1px solid var(--hair);
}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:66px}
.mark{
  display:flex;flex-direction:column;line-height:1.05;text-decoration:none;
  padding:6px 0;
}
.mark-a{
  font-size:var(--t3);font-weight:700;color:var(--ink);
  text-transform:uppercase;letter-spacing:-.02em;
}
.mark-b{
  font-size:var(--t0);color:var(--body);
  text-transform:uppercase;letter-spacing:.22em;font-weight:300;
}
.hdr-call{
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  text-decoration:none;padding:8px 0;min-height:44px;justify-content:center;
}
.hdr-call-l{
  font-size:var(--t0);color:var(--body);text-transform:uppercase;letter-spacing:.22em;
}
.hdr-call-n{
  font-family:var(--mono);font-size:var(--t2);color:var(--ink);letter-spacing:.02em;
}
.hdr-call:hover .hdr-call-n{color:var(--accent-text)}

/* ---------- shared type ---------- */
.eyebrow,.kicker{
  font-size:var(--t0);text-transform:uppercase;letter-spacing:.22em;
  color:var(--accent-text);font-weight:700;
}
.eyebrow{display:flex;align-items:center;gap:12px}
.eyebrow-rule{display:block;width:34px;height:2px;background:var(--accent);flex:none}
.kicker{margin-bottom:18px}

h1{
  font-size:clamp(2.25rem,7vw,var(--t6));
  line-height:1.02;font-weight:700;color:var(--ink);
  text-transform:uppercase;letter-spacing:-.03em;
}
h2{
  font-size:clamp(1.5rem,3.6vw,var(--t4));
  line-height:1.2;font-weight:300;color:var(--ink);letter-spacing:-.01em;
}
h3{
  font-size:var(--t3);line-height:1.25;font-weight:300;color:var(--ink);letter-spacing:-.01em;
}
.hot{color:var(--accent-text)}

.btn{
  display:inline-block;background:var(--accent);color:#08191B;
  font-size:var(--t1);font-weight:700;text-transform:uppercase;letter-spacing:.18em;
  padding:16px 28px;text-decoration:none;border:0;border-radius:0;
  transition:background .35s ease;
}
.btn:hover{background:var(--accent-text)}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;min-height:min(68vh,568px);display:flex;align-items:flex-end;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:-2;will-change:transform}
.hero-media img{
  width:100%;height:100%;object-fit:cover;object-position:60% 50%;
  filter:contrast(1.10) brightness(1.38);
}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:var(--accent);mix-blend-mode:color;opacity:.22;
}
.hero-scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,rgba(6,10,11,.94) 0%,rgba(6,10,11,.86) 32%,rgba(6,10,11,.22) 62%,rgba(6,10,11,0) 100%),
    linear-gradient(180deg,rgba(6,10,11,.62) 0%,rgba(6,10,11,.06) 24%,rgba(6,10,11,.10) 66%,var(--ground) 100%);
}
.hero-in{padding-block:clamp(56px,10vh,112px) clamp(40px,6vh,68px)}
.hero h1{margin:20px 0 24px;max-width:none}
.hero .hot{color:var(--accent)}
.hero-body{max-width:56ch;color:var(--ink);opacity:.86;font-size:var(--t2)}
.hero .btn{margin-top:34px}

/* ---------- specimen ---------- */
.specimen{border-top:1px solid var(--hair);padding-block:clamp(36px,5vw,60px)}
.specimen-grid{display:grid;grid-template-columns:1fr;gap:40px}
.specimen-l h2{margin-bottom:18px}
.specimen-l p+p{margin-top:16px}
.note{font-size:var(--t1);color:var(--body)}
.spoken{
  background:var(--panel);border-left:3px solid var(--accent);
  padding:30px clamp(20px,3vw,36px);
}
.spoken p{
  font-size:clamp(1.25rem,2.6vw,var(--t3));line-height:1.42;color:var(--ink);font-weight:300;
}
.spec-facts{margin-top:26px;border-top:1px dashed var(--hair-strong)}
.spec-facts>div{
  display:flex;justify-content:space-between;gap:20px;
  padding:14px 0;border-bottom:1px dashed var(--hair-strong);
}
.spec-facts dt{
  font-size:var(--t0);text-transform:uppercase;letter-spacing:.2em;color:var(--body);
}
.spec-facts dd{font-family:var(--mono);font-size:var(--t1);color:var(--ink);text-align:right}

/* ---------- sticky diagram bar ---------- */
.stick{
  position:sticky;top:66px;z-index:40;
  background:var(--panel);
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  display:none;
}
.stick-in{display:flex;align-items:center;gap:18px;min-height:52px}
.stick-no{
  font-family:var(--mono);font-size:var(--t1);color:var(--ground);
  background:var(--accent);padding:3px 8px;flex:none;
}
.stick-lbl{
  font-size:var(--t0);text-transform:uppercase;letter-spacing:.22em;
  color:var(--ink);flex:none;
}
.stick-txt{
  font-family:var(--mono);font-size:var(--t1);color:var(--body);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:opacity .5s ease;
}
.stick-txt.swap{opacity:0}

/* ---------- spine ---------- */
.spine{padding-block:clamp(44px,6vw,72px) 0;border-top:1px solid var(--hair)}
.spine>.wrap{margin-bottom:clamp(26px,4vw,42px)}
.state{border-top:1px dashed var(--hair-strong)}
.state:last-child{border-bottom:1px dashed var(--hair-strong)}
.state-in{
  display:grid;grid-template-columns:1fr;gap:22px;
  padding-block:clamp(24px,3vw,34px);
}
.state-l{display:block}
.state-l>p:not(.state-no):not(.state-clock){margin-top:14px;max-width:52ch}
.state-no{
  font-family:var(--mono);font-size:var(--t1);
  color:var(--ground);background:var(--accent);padding:3px 8px;
}
.state-l h3{color:var(--ink)}
.state-clock{
  font-family:var(--mono);font-size:var(--t1);color:var(--body);
  letter-spacing:.04em;
}
.state-r>*+*{margin-top:16px}
.state-r p{max-width:70ch}

.render{background:var(--panel);border-top:2px solid var(--accent);padding:16px clamp(16px,2.4vw,26px);min-width:0}
.render-lbl{
  font-size:var(--t0);text-transform:uppercase;letter-spacing:.2em;
  color:var(--accent-text);margin-bottom:12px;font-weight:700;
}
.render--wave{color:var(--accent)}
.render--wave svg{width:100%;height:72px}
.mono{
  font-family:var(--mono);font-size:var(--t2);line-height:1.7;color:var(--ink);
  overflow-wrap:anywhere;word-break:normal;
}
.mono--dim{color:var(--body)}
.bad{
  color:var(--accent-text);
  border-bottom:2px solid var(--accent);
  padding-bottom:1px;
}
.good{color:var(--ink);border-bottom:2px solid var(--accent);padding-bottom:1px}
.page{
  white-space:pre;overflow-x:auto;font-size:var(--t1);line-height:1.85;
  color:var(--ink);
}
.defects{border-top:1px dashed var(--hair-strong)}
.defects li{
  display:flex;gap:16px;align-items:baseline;flex-wrap:wrap;
  padding:12px 0;border-bottom:1px dashed var(--hair-strong);
  font-size:var(--t1);
}
.d-tag{
  font-size:var(--t0);text-transform:uppercase;letter-spacing:.2em;
  color:var(--accent-text);font-weight:700;flex:none;min-width:11ch;
}
.shot{position:relative;overflow:hidden;aspect-ratio:16/9}
.shot img{
  width:100%;height:100%;object-fit:cover;object-position:50% 46%;
  filter:contrast(1.10);
}
.shot::after{
  content:"";position:absolute;inset:0;
  background:var(--accent);mix-blend-mode:color;opacity:.22;pointer-events:none;
}

/* ---------- full-bleed band ---------- */
.band{position:relative;isolation:isolate;overflow:hidden}
.band-media{position:absolute;inset:0;z-index:-2}
.band-media img{
  width:100%;height:100%;object-fit:cover;
  filter:contrast(1.10);
}
.band-media::after{content:"";position:absolute;inset:0;background:var(--accent);mix-blend-mode:color;opacity:.22}
.band-scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,rgba(6,10,11,.93) 0%,rgba(6,10,11,.80) 40%,rgba(6,10,11,.14) 100%),
    linear-gradient(180deg,var(--ground) 0%,rgba(6,10,11,.10) 18%,rgba(6,10,11,.12) 80%,var(--ground) 100%);
}
.band-in{padding-block:clamp(56px,7.5vw,92px);max-width:min(var(--maxw),100%)}
.band h2{max-width:24ch;margin-bottom:22px}
.band p{max-width:60ch;color:var(--ink);opacity:.86}

/* ---------- turnaround ---------- */
.turn{padding-block:clamp(40px,6vw,68px);border-top:1px solid var(--hair)}
.turn h2{margin-bottom:20px;max-width:20ch}
.turn-lede{max-width:74ch}
.warn{
  margin-top:22px;margin-bottom:22px;
  font-size:var(--t0);text-transform:uppercase;letter-spacing:.2em;font-weight:700;
  color:var(--accent-text);border-left:3px solid var(--accent);padding:10px 0 10px 14px;
}
.tblwrap{overflow-x:auto}
.tblwrap:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}
.tbl{width:100%;min-width:720px;font-size:var(--t1)}
.tbl th,.tbl td{
  text-align:left;padding:16px 18px 16px 0;
  border-bottom:1px dashed var(--hair-strong);vertical-align:top;
}
.tbl thead th{
  font-size:var(--t0);text-transform:uppercase;letter-spacing:.2em;
  color:var(--body);font-weight:700;border-bottom:1px solid var(--hair-strong);
}
.tbl tbody th{color:var(--ink);font-weight:700;font-size:var(--t2);white-space:nowrap}
.tbl td{color:var(--body)}
.tbl .num{font-family:var(--mono);color:var(--ink)}
.tbl .yes{color:var(--accent-text);font-family:var(--mono)}
.tbl .no{color:var(--ink);font-family:var(--mono)}
.tbl tbody tr:hover td,.tbl tbody tr:hover th{background:#16191D}

/* ---------- what we do not do ---------- */
.nots{padding-block:clamp(40px,6vw,68px);border-top:1px solid var(--hair)}
.nots h2{margin-bottom:clamp(24px,3vw,38px);max-width:26ch}
.notlist{counter-reset:n;display:grid;grid-template-columns:1fr;gap:0}
.notlist li{
  counter-increment:n;
  border-top:1px dashed var(--hair-strong);
  padding-block:18px;
  display:grid;grid-template-columns:1fr;gap:10px;
}
.notlist li:last-child{border-bottom:1px dashed var(--hair-strong)}
.notlist li::before{
  content:counter(n,decimal-leading-zero);
  font-family:var(--mono);font-size:var(--t1);color:var(--accent-text);
  letter-spacing:.1em;
}
.notlist h3{font-size:var(--t3)}
.notlist p{max-width:74ch}

/* ---------- close ---------- */
.close{position:relative;isolation:isolate;overflow:hidden;border-top:1px solid var(--hair)}
.close-media{position:absolute;inset:0;z-index:-2}
.close-media img{
  width:100%;height:100%;object-fit:cover;
  filter:contrast(1.06);
}
.close-media::after{content:"";position:absolute;inset:0;background:var(--accent);mix-blend-mode:color;opacity:.20}
.close-scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,var(--ground) 0%,rgba(6,10,11,.62) 22%,rgba(6,10,11,.80) 100%);
}
.close-in{
  padding-block:clamp(46px,6.5vw,80px);
  display:grid;grid-template-columns:1fr;gap:44px;
}
.close-l h2{margin-bottom:20px;max-width:22ch}
.close-l p{max-width:52ch;color:var(--ink);opacity:.88}
.close-l .btn{margin-top:28px}
.contact{border-top:1px dashed var(--hair-strong)}
.contact>div{padding:16px 0;border-bottom:1px dashed var(--hair-strong)}
.contact dt{
  font-size:var(--t0);text-transform:uppercase;letter-spacing:.22em;color:var(--body);
  margin-bottom:6px;
}
.contact dd{color:var(--ink);font-size:var(--t2);line-height:1.55}
.contact dd a{font-family:var(--mono);color:var(--accent-text);display:inline-block;padding:11px 0;line-height:1.3}

/* ---------- footer ---------- */
.foot{
  border-top:1px solid var(--hair);
  padding-block:clamp(32px,4vw,48px);
  font-size:var(--t1);line-height:1.55;
}
.foot p{max-width:88ch}
.foot p+p{margin-top:11px}
.foot-lead{
  font-size:var(--t2);color:var(--ink);text-transform:uppercase;
  letter-spacing:.12em;font-weight:700;
}
.foot-end{
  margin-top:26px;font-size:var(--t0);text-transform:uppercase;letter-spacing:.2em;
  color:var(--body);
}

/* ---------- motion ---------- */
.rv{opacity:0;transform:translateY(14px)}
.rv.in{opacity:1;transform:none;transition:opacity 1s ease-out,transform 1s ease-out}

/* ---------- breakpoints ---------- */
@media (min-width:760px){
  .specimen-grid{grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,90px)}
  .state-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,4vw,52px)}
  .state-l{display:block}
  .state-l h3{margin:14px 0 8px}
  .state-no{display:inline-block}
  .notlist li{grid-template-columns:64px 1fr;gap:0 24px}
  .notlist li::before{grid-row:span 2;padding-top:6px}
  .close-in{grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,90px)}
}
@media (min-width:1000px){
  .stick{display:block}
  .state-in{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .rv{opacity:1;transform:none}
}

@media (forced-colors:active){
  .btn,.state-no,.stick-no{border:1px solid}
  .render,.spoken{border:1px solid}
}

/* phone: keep everything inside the viewport */
@media (max-width:520px){
  .tbl{min-width:560px}
  .page{font-size:0.75rem}
  .hero h1{max-width:none}
}

/* grid children must be allowed to shrink, or a wide <pre> widens the page */
.state-in>*,.specimen-grid>*,.close-in>*,.notlist li>*{min-width:0}
.state-r>*{min-width:0;max-width:100%}

.state-l .state-no{display:inline-block}
.state-l h3{margin:12px 0 6px}
@media (min-width:760px){
  .shot{aspect-ratio:16/7}
}

.shot--page img{object-position:62% 78%}

/* specificity: .band p / .close-l p were outranking .kicker and repainting it ink */
.band .kicker,.close-l .kicker{color:var(--accent-text);opacity:1}
/* the transcript illustration must be reachable and readable on a phone */
.page{outline-offset:3px}
.page:focus-visible{outline:2px solid var(--accent-text)}
@media (max-width:520px){
  .page{font-size:0.6875rem;line-height:1.75}
  .tbl{min-width:600px;font-size:0.75rem}
  .tbl th,.tbl td{padding:13px 14px 13px 0}
}