/* EOTAK, solutions / government.  "The record."
   ---------------------------------------------------------------------------
   This page's whole argument is that we state our compliance position
   precisely, including the parts we do not hold, while the rest of the market
   sells adjectives.  So the page is set as a document rather than as
   marketing: near-monochrome, ledger-ruled, wide margins, a label in the left
   margin and the record in the column beside it.  No photography, the type
   and the rules carry it.  Copper appears three times and is otherwise absent.

   Loads directly after css/core.css and nothing else.  Every primitive it
   needs that core does not already define is written out here.  US English.
   =========================================================================== */

.rec-page{background:var(--bg)}

/* ---------- the page grid: margin label | the record ---------------------- */
.rec-grid{display:grid;grid-template-columns:190px minmax(0,1fr);gap:0 58px;align-items:start}
.rec-col{min-width:0}
.rec-lab{font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mute);line-height:1.8;padding-top:10px}
.rec-lab .sub{display:block;margin-top:10px;font-size:11px;letter-spacing:.04em;
  text-transform:none;color:var(--mute);opacity:.8;line-height:1.6}

/* ---------- shared type ---------------------------------------------------- */
.rec-h2{font-family:var(--font-display);font-size:clamp(25px,2.5vw,34px);font-weight:400;
  letter-spacing:-.026em;line-height:1.12;color:var(--fg);max-width:20ch}
.rec-prose{max-width:62ch;font-size:16.5px;line-height:1.72;color:var(--fg2);font-weight:350;margin-top:18px}
.rec-prose + .rec-prose{margin-top:14px}
.rec-cap{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute)}
.rec-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:34px}

/* ---------- a section is a ruled leaf of the document ---------------------- */
.rec-sec{position:relative}
.rec-sec > .wrap{border-top:1px solid var(--line2);
  padding-top:clamp(40px,5.2vw,66px);padding-bottom:clamp(44px,6vw,82px)}

/* ---------- masthead ------------------------------------------------------- */
.rec-mast{position:relative;overflow:hidden;padding-top:clamp(34px,5vw,66px)}
/* ledger ground, ruled paper, faded out.  Static; there is no motion on this page. */
.rec-mast::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,
    rgba(var(--ovr-rgb),.06) 0 1px,rgba(var(--ovr-rgb),0) 1px 34px);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.95),rgba(0,0,0,0) 76%);
          mask-image:linear-gradient(180deg,rgba(0,0,0,.95),rgba(0,0,0,0) 76%)}
.rec-mast > .wrap{position:relative;z-index:2}

/* the form header, issuing line, subject, scope, pricing */
.rec-file{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.rec-file > div{padding:15px 22px 16px;border-left:1px solid var(--hair2);min-width:0}
.rec-file > div:first-child{border-left:0;padding-left:0}
.rec-file .k{display:block;font-family:var(--font-mono);font-size:9.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.rec-file .v{display:block;font-family:var(--font-mono);font-size:12.5px;color:var(--fg2);
  margin-top:8px;line-height:1.5;font-variant-numeric:tabular-nums}

.rec-mast-in{padding-top:clamp(40px,5.6vw,74px)}
.rec-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute)}
.rec-crumb a{color:var(--mute)}
.rec-crumb a:hover{color:var(--accent-txt)}
.rec-crumb [aria-current]{color:var(--fg2)}
.rec-eyebrow{margin-top:26px}
.rec-h1{font-family:var(--font-display);font-size:clamp(38px,5.3vw,70px);font-weight:300;
  line-height:1.04;letter-spacing:-.032em;color:var(--fg);margin-top:20px;max-width:16ch}
.rec-mast .lede{max-width:58ch;margin-top:26px;font-size:18.5px}

/* the position, in three statements, under one rule */
.rec-pos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(46px,6vw,76px);border-top:1px solid var(--line2)}
.rec-pos > div{padding:24px 28px 34px;border-left:1px solid var(--hair2);min-width:0}
.rec-pos > div:first-child{border-left:0;padding-left:0}
.rec-pos .h{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-txt)}
.rec-pos p{margin-top:13px;font-size:14.5px;line-height:1.66;color:var(--fg2)}

/* ---------- the claim ledger ---------------------------------------------- */
.rec-tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:32px}
.rec-tw:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.rec-tbl{width:100%;min-width:660px;border-collapse:collapse;
  font-size:15px;font-variant-numeric:tabular-nums}
.rec-tbl th{font-family:var(--font-mono);font-size:9.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute);text-align:left;
  padding:0 24px 13px 0;border-bottom:1px solid var(--line2)}
.rec-tbl td{padding:19px 24px 19px 0;border-bottom:1px solid var(--hair2);
  vertical-align:top;color:var(--fg2);line-height:1.55}
.rec-tbl tr:last-child td{border-bottom:1px solid var(--line2)}
.rec-tbl .c-claim{width:45%;color:var(--fg);font-weight:450}
.rec-tbl .c-claim .n{display:block;margin-top:7px;font-size:13px;font-weight:400;
  color:var(--mute);line-height:1.6}
.rec-tbl .c-stat{width:27%}
.rec-tbl .c-held{width:28%;font-family:var(--font-mono);font-size:12.5px;
  letter-spacing:.02em;color:var(--fg2);line-height:1.6}
.rec-tbl .c-held .x{color:var(--mute)}

.st{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);
  font-size:12.5px;letter-spacing:.02em;line-height:1.4}
.st::before{content:"";width:8px;height:8px;flex:none;border:1px solid var(--line2)}
.st-a{color:var(--accent-txt)}
.st-a::before{background:var(--accent);border-color:var(--accent)}
.st-b{color:var(--fg)}
.st-b::before{background:var(--fg3);border-color:var(--fg3)}
.st-c{color:var(--mute)}
.st-c::before{background:none}
.rec-foot-note{margin-top:20px;max-width:66ch;font-size:14px;line-height:1.7;color:var(--mute)}

/* ---------- two sentences, kept apart ------------------------------------- */
.rec-two{display:grid;grid-template-columns:1fr 1fr;margin-top:32px;
  border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.rec-two > div{padding:30px 36px 34px;min-width:0}
.rec-two > div:first-child{padding-left:0;border-right:2px solid var(--accent)}
.rec-two .who{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-txt)}
.rec-two p{margin-top:15px;font-size:16.5px;line-height:1.62;color:var(--fg);font-weight:350}

.rec-refuse{margin-top:36px;max-width:70ch}
.rec-struck{margin-top:16px;font-family:var(--font-display);font-size:clamp(20px,2.2vw,29px);
  font-weight:300;line-height:1.3;letter-spacing:-.02em;color:var(--fg3);
  text-decoration:line-through;text-decoration-color:var(--accent);text-decoration-thickness:2px}
.rec-why{margin-top:18px;max-width:60ch;font-size:15.5px;line-height:1.72;color:var(--fg2)}

/* ---------- the lexicon: words we will not use ---------------------------- */
.rec-lex{margin-top:30px;border-top:1px solid var(--line2)}
.rec-lex > div{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.4fr);gap:0 48px;
  padding:27px 0;border-bottom:1px solid var(--hair2)}
.rec-lex > div:last-child{border-bottom:1px solid var(--line2)}
.rec-lex .term{font-family:var(--font-display);font-size:clamp(18px,1.75vw,23px);font-weight:350;
  letter-spacing:-.018em;line-height:1.26;color:var(--fg)}
.rec-lex p{font-size:15.5px;line-height:1.7;color:var(--fg2)}
.rec-lex .auth{margin-top:13px;font-family:var(--font-mono);font-size:10px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}

/* ---------- ruled key/value rows (gaps, and what every plan carries) ------ */
.rec-rows{margin-top:30px;border-top:1px solid var(--line2)}
.rec-rows > div{display:grid;grid-template-columns:210px minmax(0,1fr);gap:0 44px;
  padding:22px 0;border-bottom:1px solid var(--hair2)}
.rec-rows > div:last-child{border-bottom:1px solid var(--line2)}
.rec-rows .t{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg);padding-top:3px;line-height:1.5}
.rec-rows p{font-size:15.5px;line-height:1.7;color:var(--fg2)}

/* ---------- terms of supply ----------------------------------------------- */
.rec-price{display:flex;flex-wrap:wrap;align-items:flex-end;gap:34px clamp(40px,6vw,86px);
  margin-top:32px;padding-bottom:30px;border-bottom:1px solid var(--line2)}
.rec-price .fig{font-family:var(--font-display);font-size:clamp(38px,4.4vw,56px);font-weight:300;
  letter-spacing:-.036em;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
.rec-price .u{margin-top:13px;font-family:var(--font-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mute);font-variant-numeric:tabular-nums}
.rec-price .flat{font-family:var(--font-mono);font-size:12.5px;line-height:1.65;color:var(--fg2);
  max-width:26ch;padding-bottom:4px}

/* ---------- the signature block ------------------------------------------- */
.rec-sign > .wrap{border-top:1px solid var(--line2);
  padding-top:clamp(46px,5.6vw,74px);padding-bottom:clamp(60px,7vw,100px)}
.rec-sign h2{font-family:var(--font-display);font-size:clamp(30px,3.5vw,48px);font-weight:300;
  letter-spacing:-.03em;line-height:1.06;color:var(--fg);margin-top:22px;max-width:16ch}
.rec-sign .lede{max-width:54ch;margin-top:24px}
.rec-meta{margin-top:38px;padding-top:22px;border-top:1px solid var(--hair2);
  font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);font-variant-numeric:tabular-nums}

/* ---------- exhibit plate -------------------------------------------------
   The page is a document, so its photograph is a PLATE: full-bleed, crisp
   hairline above and below, no soft cinematic vignette.  That is deliberate
   -- the other solutions pages fade their plates into black on every edge;
   a record has square edges.  Near-monochrome for the same reason the rest
   of the page is: nothing here is decoration, so nothing here is colourful.
   ------------------------------------------------------------------------- */
.rec-exhibit{margin:0;padding:0}
.rec-exhibit-img{width:100%;height:clamp(190px,29vh,340px);overflow:hidden;
  border-top:1px solid var(--hair2);border-bottom:1px solid var(--hair2);
  background:var(--bg2)}
.rec-exhibit-img img{width:100%;height:100%;object-fit:cover;object-position:center 44%;
  display:block;filter:saturate(.22) contrast(1.05) brightness(.62)}
:root[data-theme="light"] .rec-exhibit-img img{
  filter:saturate(.20) contrast(.95) brightness(1.02) opacity(.80)}
.rec-exhibit figcaption{display:block;
  padding-top:clamp(24px,2.8vw,36px);padding-bottom:clamp(4px,1vw,14px)}
.rec-exhibit figcaption p{margin:0;max-width:60ch;font-size:15.5px;line-height:1.72;
  font-weight:350;color:var(--fg2)}

/* ---------- signature ground ----------------------------------------------
   One photograph behind the closing block.  isolation:isolate keeps the
   z-index:-1 layer inside this section rather than dropping it behind the
   page ground, and the mask ends on an explicit zero-alpha stop of the same
   hue so the edge dissolves instead of cutting off.  Radii stay at or below
   50% or the falloff never reaches zero inside the box.
   ------------------------------------------------------------------------- */
.rec-sign{position:relative;isolation:isolate}
.rec-sign-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.rec-sign-bg img{width:100%;height:100%;object-fit:cover;object-position:center 46%;
  display:block;filter:saturate(.18) contrast(1.02) brightness(.36);
  mask-image:radial-gradient(42% 52% at 78% 50%,
    rgba(0,0,0,1) 0%, rgba(0,0,0,.50) 48%, rgba(0,0,0,0) 100%)}
:root[data-theme="light"] .rec-sign-bg img{
  filter:saturate(.16) contrast(.95) brightness(1.14) opacity(.40)}

/* =========================================================================
   RESPONSIVE.  Nothing may widen the document: the ledger scrolls inside
   .rec-tw above 760px and stacks into labelled blocks below it, so there is
   never a horizontal scrollbar on <body> at 390, 1440 or 1920.
   ========================================================================= */
@media (max-width:1100px){
  .rec-grid{gap:0 40px;grid-template-columns:164px minmax(0,1fr)}
  .rec-two > div{padding:26px 28px 30px}
}
@media (max-width:980px){
  .rec-grid{grid-template-columns:1fr;gap:16px}
  .rec-lab{padding-top:0}
  .rec-lab .sub{display:inline;margin-top:0}
  .rec-lab .sub::before{content:" \00b7 "}
}
@media (max-width:900px){
  .rec-file{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rec-file > div{padding:14px 18px 15px}
  .rec-file > div:nth-child(3){border-left:0;padding-left:0;border-top:1px solid var(--hair2)}
  .rec-file > div:nth-child(4){border-top:1px solid var(--hair2)}
}
@media (max-width:820px){
  .rec-pos{grid-template-columns:1fr}
  .rec-pos > div{padding:22px 0 24px;border-left:0;border-top:1px solid var(--hair2)}
  .rec-pos > div:first-child{border-top:0;padding-top:22px}
  .rec-two{grid-template-columns:1fr}
  .rec-two > div{padding:26px 0 30px}
  .rec-two > div:first-child{border-right:0;border-bottom:2px solid var(--accent)}
  .rec-lex > div{grid-template-columns:1fr;gap:12px}
  .rec-rows > div{grid-template-columns:1fr;gap:9px}
}
@media (max-width:760px){
  /* the ledger stops being a table and becomes labelled blocks */
  .rec-tbl{min-width:0}
  .rec-tbl thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .rec-tbl tr{display:block;padding:20px 0;border-bottom:1px solid var(--hair2)}
  .rec-tbl tr:last-child{border-bottom:1px solid var(--line2)}
  .rec-tbl td{display:block;width:auto!important;padding:0;border:0}
  .rec-tbl tr:last-child td{border:0}
  .rec-tbl td + td{margin-top:12px}
  .rec-tbl td[data-l]::before{content:attr(data-l);display:block;margin-bottom:6px;
    font-family:var(--font-mono);font-size:9.5px;font-weight:500;letter-spacing:.2em;
    text-transform:uppercase;color:var(--mute)}
}
@media (max-width:520px){
  .rec-exhibit-img{height:clamp(150px,24vh,210px)}
  .rec-file{grid-template-columns:1fr}
  .rec-file > div{padding:13px 0 14px;border-left:0;border-top:1px solid var(--hair2)}
  .rec-file > div:first-child{border-top:0}
  .rec-price{gap:26px 40px}
}