/* ==========================================================================
   TrackOps — landing page
   Direction: a typeset operations document.
   White page, black ink, one accent (brand red #db0404) used semantically.
   No gradients, no glows, no cards, no scroll animation. See
   docs/08-ai-design-patterns-to-avoid.md for the rules this is built against.
   ========================================================================== */

@font-face{font-family:"Kamerik";src:url("assets/fonts/Kamerik105Cyrillic-Book.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Kamerik";src:url("assets/fonts/Kamerik105Cyrillic-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Kamerik";src:url("assets/fonts/Kamerik105Cyrillic-Light.woff2") format("woff2");font-weight:300;font-display:swap}

:root{
  --paper:#ffffff;
  --field:#f4f4f2;
  --ink:#111111;
  --ink-2:#54524d;
  --ink-3:#8b887f;
  --rule:#dcdcd9;
  --rule-strong:#111111;
  --red:#db0404;
  --red-dk:#a80303;
  --blue:#194689;   /* second ink, used for the commercial side of the figures */

  --serif:"Iowan Old Style","Charter","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:"Kamerik",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --gutter:64px;
  --margin-col:132px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{width:min(1080px,90%);margin:0 auto}
/* the text block keeps a consistent measure; the space to its right is margin,
   not an empty column waiting to be filled */
.measure{max-width:760px}

/* --- the page grid: a narrow annotation column, then the text column ------ */
.row{display:grid;grid-template-columns:var(--margin-col) minmax(0,1fr);gap:0 var(--gutter)}
.margin{position:relative}
.num{
  display:block;font-family:var(--serif);font-size:2.6rem;line-height:1;
  color:var(--red);font-weight:400;margin-bottom:6px;
}
.mlabel{font-size:.82rem;line-height:1.5;color:var(--ink-3)}
.col{min-width:0}

/* a note set in the margin, the way a manual annotates its own clauses */
.marginal{
  margin-top:26px;padding-top:12px;border-top:1px solid var(--rule);
  font-family:var(--serif);font-style:italic;font-size:.92rem;line-height:1.45;
  color:var(--ink-2);
}
/* the structural rule down the gutter: it is what makes the page read as a
   ruled document rather than a column of text floating in white */
.sec .margin::after{
  content:"";position:absolute;top:-92px;bottom:-92px;
  right:calc(var(--gutter) / -2);width:1px;background:var(--rule);
}

/* --- masthead ------------------------------------------------------------ */
.mast{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--rule)}
.mast-in{display:flex;align-items:center;gap:36px;height:82px}
.mast .mast-in{width:min(1440px,94%)}
.mark img{height:42px;width:auto}
.mast-nav{display:flex;gap:26px;margin-left:auto}
.mast-nav a{font-size:.92rem;color:var(--ink-2);text-decoration:none;padding-bottom:2px;
  border-bottom:1px solid transparent}
.mast-nav a:hover{color:var(--ink);border-bottom-color:var(--red)}
.menu-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--rule);
  font-family:var(--sans);font-size:.9rem;color:var(--ink);padding:6px 14px;cursor:pointer;border-radius:2px}

/* --- controls ------------------------------------------------------------ */
.button{
  display:inline-block;background:var(--red);color:#fff;text-decoration:none;
  font-size:.95rem;font-weight:700;padding:12px 22px;border-radius:2px;
  transition:background .18s ease;
}
.button:hover{background:var(--red-dk)}
.textlink{
  color:var(--ink);text-decoration:none;font-size:.95rem;
  border-bottom:1px solid var(--rule);padding-bottom:2px;transition:border-color .18s ease;
}
.textlink:hover{border-bottom-color:var(--red)}
.actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:34px}

/* --- opening ------------------------------------------------------------- */
.opening{padding:96px 0 84px}
h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.1rem,6.2vw,4.4rem);line-height:1.02;letter-spacing:-.02em;
  max-width:22ch;
}
.standfirst{
  margin-top:28px;max-width:52ch;
  font-size:clamp(1.08rem,1.6vw,1.32rem);line-height:1.5;color:var(--ink-2);
}

/* --- contents ------------------------------------------------------------
   A document opens with its contents. It doubles as navigation and tells the
   reader how long the argument is before they commit to it. */
.contents{margin-top:64px;border-top:2px solid var(--ink);max-width:760px}
.contents-title{
  font-family:var(--serif);font-style:italic;font-size:1.05rem;
  color:var(--ink-2);padding:14px 0 4px;
}
.contents ol{list-style:none}
.contents a{
  display:grid;grid-template-columns:34px 190px minmax(0,1fr);align-items:baseline;
  gap:0 16px;padding:13px 0;border-bottom:1px solid var(--rule);
  text-decoration:none;transition:background .15s ease;
}
.contents a:hover{background:#faf9f7}
.contents a:hover .c-t{border-bottom-color:var(--red)}
.c-n{font-family:var(--serif);font-size:1.15rem;color:var(--red)}
.c-t{font-weight:700;font-size:1rem;border-bottom:1px solid transparent;padding-bottom:1px}
.c-d{font-size:.92rem;color:var(--ink-2)}

/* --- figures -------------------------------------------------------------
   Drawn schematics, not decoration. Each is numbered and captioned. */
/* figures are allowed to break the text measure, as they do in print */
.fig{margin-top:44px;max-width:884px}
.fig svg{width:100%;height:auto;display:block;font-family:var(--sans)}
figcaption,.caption{
  margin-top:16px;padding-top:12px;border-top:1px solid var(--rule);
  font-size:.88rem;line-height:1.55;color:var(--ink-2);max-width:62ch;
}
.fig-n{color:var(--red);font-weight:700;margin-right:10px}

/* timeline (Fig. 2) */
.tl .grid line{stroke:var(--rule)}
.tl .axis{stroke:var(--ink)}
.tl .hr text{font-size:10.5px;fill:var(--ink-3);text-anchor:middle}
.tl .hr text.end{text-anchor:end}
.tl .rowl text{font-size:11.5px;fill:var(--ink-2);text-anchor:start}
.tl .leg{fill:var(--ink)}
.tl .svc{fill:var(--red)}
.tl .mk{fill:var(--red)}
.tl .inbar{font-size:10.5px;fill:#fff}
.tl .legl{font-size:10.5px;fill:var(--ink-2);text-anchor:end}
.tl .mkl{font-size:10.5px;fill:var(--ink-2)}
.tl .key text{font-size:10.5px;fill:var(--ink-3)}
.tl .est{fill:none;stroke:var(--ink);stroke-width:1}
.tl .mk-open{fill:#fff;stroke:var(--red);stroke-width:1.5}
.tl .mk-new{fill:#fff;stroke:var(--ink-3);stroke-width:1.5}

/* record map (Fig. 3) */
.map .box{fill:#fff;stroke:var(--ink);stroke-width:1}
.map .out{stroke:var(--red)}
.map .fin{stroke:var(--blue)}
.map .fin+text,.map text.fin-t{fill:var(--blue)}
.map .link-fin{stroke:var(--blue);stroke-dasharray:3 4}
.map marker.fin path{fill:var(--blue)}
.map .note-t{font-size:10px;fill:var(--ink-3);text-anchor:start}
.map .grp{fill:none;stroke:var(--rule);stroke-dasharray:3 4}
.map .link{stroke:var(--ink-3);stroke-width:1;fill:none}
.map marker path{fill:var(--ink-3);stroke:none}
.map text{font-size:11.5px;fill:var(--ink);text-anchor:middle}
.map .list text{font-size:10px;fill:var(--ink-2);text-anchor:start}
.map .cap{font-size:9.5px;fill:var(--ink-3);letter-spacing:.05em}

/* --- specimen ------------------------------------------------------------ */
.plate{background:var(--field);padding:64px 0 56px;border-top:1px solid var(--rule)}
.sheet{
  background:#fff;max-width:940px;margin:0 auto;
  box-shadow:0 1px 2px rgba(0,0,0,.12),0 18px 40px rgba(0,0,0,.10);
}
.sheet-head{
  background:var(--red);display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:14px 26px;
}
.sheet-head img{height:22px;width:auto;filter:brightness(0) invert(1)}
.sheet-head span{color:#fff;font-size:.92rem;font-weight:700;letter-spacing:.02em}
.sheet-foot{height:12px;background:var(--red)}
.sheet-body{padding:34px 26px 30px}
.sheet-body h4{
  font-family:var(--sans);font-size:.78rem;font-weight:700;color:var(--ink-3);
  letter-spacing:.04em;margin:30px 0 8px;
}
.ident{width:100%;border-collapse:collapse;font-size:.88rem}
.ident th{
  text-align:left;font-weight:400;color:var(--ink-3);width:14%;
  padding:5px 12px 5px 0;vertical-align:top;
}
.ident td{padding:5px 34px 5px 0;font-weight:700}
.sched{width:100%;border-collapse:collapse;font-size:.86rem}
.sched th{
  text-align:left;font-weight:700;padding:7px 14px 7px 0;
  border-bottom:1.5px solid var(--ink);white-space:nowrap;
}
.sched td{padding:8px 14px 8px 0;border-bottom:1px solid var(--rule);color:var(--ink-2)}
.sched td:first-child{color:var(--ink)}
.caption{max-width:940px;margin-left:auto;margin-right:auto}

/* --- sections ------------------------------------------------------------ */
.sec{padding:78px 0;border-top:1px solid var(--rule)}
h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.85rem,3.3vw,2.85rem);line-height:1.06;letter-spacing:-.015em;
  max-width:19ch;margin-bottom:30px;
}
.prose{max-width:62ch}
.prose p+p{margin-top:18px}
.prose p{color:var(--ink-2)}
/* rubrication: the body of the document opens with a red initial, which is
   what red was for centuries before it was a brand colour */
.lead p:first-child::first-letter{
  float:left;font-family:var(--serif);font-size:3.7em;line-height:.78;
  color:var(--red);padding:.06em .1em 0 0;
}
.note+.prose,.data+.prose,.spec+.prose,.clauses+.prose,.fig+.prose{margin-top:34px}
h3.sub{
  font-family:var(--serif);font-weight:400;font-size:1.5rem;letter-spacing:-.01em;
  margin:52px 0 16px;
}
/* a footnote, set the way a manual sets one: smaller, indented, with a rule
   above it. No coloured bar. */
.note{
  max-width:56ch;margin-top:26px;padding-top:14px;border-top:1px solid var(--rule);
  font-size:.92rem;line-height:1.6;color:var(--ink-2);
}
.aside{
  max-width:62ch;margin-top:34px;padding-top:16px;border-top:1px solid var(--rule);
  font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--ink-2);
}

/* --- tables -------------------------------------------------------------- */
.data{width:100%;max-width:760px;border-collapse:collapse;margin-top:34px;font-size:.98rem}
.data th{
  text-align:left;font-weight:700;font-size:.84rem;color:var(--ink-2);
  letter-spacing:.015em;padding:0 22px 11px 0;border-bottom:1.5px solid var(--ink);
}
.data td{padding:15px 22px 15px 0;border-bottom:1px solid var(--rule);vertical-align:top;color:var(--ink-2)}
.data td:first-child{color:var(--ink);font-weight:700;width:30%}
.matrix th:not(:first-child),.matrix td:not(:first-child){width:16%;text-align:left}
.matrix td:first-child{width:auto;font-weight:400;color:var(--ink)}
.matrix .y{color:var(--ink);font-weight:700}
.matrix .n{color:var(--ink-3)}
.log td{font-size:.92rem}
.log td:first-child{font-family:var(--mono);font-size:.86rem;font-weight:400;width:16%}
.log td:nth-child(2){font-family:var(--mono);font-size:.86rem}

/* --- specification list -------------------------------------------------- */
.spec{margin-top:34px;max-width:760px;border-top:1.5px solid var(--ink)}
.spec dt{
  font-weight:700;font-size:1.02rem;padding-top:20px;
}
.spec dd{
  max-width:62ch;padding:6px 0 20px;border-bottom:1px solid var(--rule);color:var(--ink-2);
}

/* --- numbered clauses ---------------------------------------------------- */
.clauses{list-style:none;counter-reset:clause;border-top:1.5px solid var(--ink);
  margin-top:34px;max-width:760px}
.clauses li{
  counter-increment:clause;position:relative;
  padding:22px 0 24px 52px;border-bottom:1px solid var(--rule);
}
.clauses li::before{
  content:counter(clause) ".";position:absolute;left:0;top:20px;
  font-family:var(--serif);font-size:1.4rem;color:var(--red);
}
.clauses h3{font-size:1.05rem;font-weight:700;margin-bottom:6px}
.clauses p{color:var(--ink-2)}

/* --- questions ----------------------------------------------------------- */
.qa{max-width:64ch;border-top:1.5px solid var(--ink);margin-top:30px}
.qa h3{
  font-family:var(--serif);font-weight:400;font-size:1.28rem;letter-spacing:-.01em;
  padding-top:26px;margin-bottom:8px;
}
.qa p{color:var(--ink-2);padding-bottom:26px;border-bottom:1px solid var(--rule)}

/* --- close --------------------------------------------------------------- */
.close{background:var(--field);border-top:1px solid var(--rule);padding:78px 0}
.close h2{margin-bottom:20px}

/* --- colophon -------------------------------------------------------------
   A document ends with a colophon: who made it, what it covers, where to write.
   Set as a proper four-column block under a heavy rule, not a row of links. */
.colophon{background:var(--field);border-top:1px solid var(--rule);margin-top:0}
.colophon .wrap{width:min(1440px,94%)}
.colo-top{
  display:grid;grid-template-columns:1.7fr 1fr 1fr 1.1fr;gap:44px;
  padding:48px 0 42px;
}
.colo-brand img{height:46px;width:auto;margin-bottom:18px}
.colo-brand p{font-size:.9rem;line-height:1.6;color:var(--ink-2);max-width:34ch}
.colo-col{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.colo-h{
  font-family:var(--serif);font-style:italic;font-size:.98rem;color:var(--ink);
  margin-bottom:8px;
}
.colo-col a,.colo-col span{font-size:.9rem;color:var(--ink-2);text-decoration:none}
.colo-col a{border-bottom:1px solid transparent;padding-bottom:1px}
.colo-col a:hover{color:var(--ink);border-bottom-color:var(--red)}
.colo-foot{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px;
  padding:20px 0 44px;border-top:1px solid var(--rule);
  font-size:.84rem;color:var(--ink-3);
}
.colo-foot strong{color:var(--ink);font-weight:700}
.colo-foot a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule)}
.colo-foot a:hover{color:var(--ink);border-bottom-color:var(--red)}
.colo-foot .sep{color:var(--rule)}
/* on wide screens the credit is pushed to the far right of the line */
.colo-credit{margin-left:auto}

/* --- scroll regions ------------------------------------------------------
   Wide tables and schematics keep their proportions and scroll inside their
   own region rather than compressing into something unreadable. */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.scroll .sched{min-width:520px}
.scroll .log{min-width:520px}
.scroll .tl{min-width:700px}
.scroll .map{min-width:820px}

/* --- responsive ----------------------------------------------------------
   Ladder, widest first:
   1600+  large desktop, the measure grows a little
   1160   the masthead sheds its button, the nav tightens
   1000   the nav becomes a menu; margin column narrows
    860   the annotation column folds into the text column
    620   the specimen's identification block folds to two columns
    560   the colophon goes to one column
    480   tightest phones
   short   landscape phones, where vertical space is the constraint
   ------------------------------------------------------------------------ */

@media(min-width:1600px){
  :root{--margin-col:164px;--gutter:76px}
  .wrap{width:min(1220px,88%)}
  .fig{max-width:980px}
  body{font-size:18px}
}

@media(max-width:1160px){
  .mast .button{display:none}
  .mast-nav{gap:20px}
  .mast-nav a{font-size:.88rem}
  :root{--margin-col:118px;--gutter:52px}
}

@media(max-width:1000px){
  :root{--margin-col:96px;--gutter:40px}
  .mast-in{height:74px}
  .mark img{height:38px}
  .mast-nav{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);
    flex-direction:column;gap:0;margin:0;border-bottom:1px solid var(--rule);
    padding:0 5% 12px;box-shadow:0 12px 24px rgba(0,0,0,.06);
  }
  .mast-nav.open{display:flex}
  .mast-nav a{padding:14px 0;font-size:1rem;border-bottom:1px solid var(--rule)}
  .mast-nav a:hover{border-bottom-color:var(--rule)}
  .menu-toggle{display:block}
  .colo-top{grid-template-columns:repeat(3,1fr);gap:34px 40px}
  .colo-brand{grid-column:1 / -1}
  .colo-brand p{max-width:60ch}
}

@media(max-width:860px){
  body{font-size:16px}
  .row{grid-template-columns:1fr;gap:0}
  .margin{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;margin-bottom:20px}
  .num{font-size:1.7rem;margin-bottom:0}
  .mlabel{font-size:.86rem}
  .marginal{width:100%;margin-top:14px;padding-top:10px}
  .opening .margin,.close .margin{display:none}
  .sec .margin::after{display:none}
  .contents{margin-top:44px}
  .contents a{grid-template-columns:26px minmax(0,1fr);gap:0 12px}
  .contents .c-d{grid-column:2;margin-top:3px}
  .sec{padding:60px 0}
  .opening{padding:56px 0 52px}
  h1{max-width:none}
  h2{max-width:24ch}
  .sheet-body{padding:24px 18px 22px}
  .plate{padding:44px 0 40px}
  .fig{margin-top:34px}
}

@media(max-width:620px){
  /* the identification block folds from four columns to two */
  .ident tr{display:grid;grid-template-columns:38% 1fr;column-gap:12px}
  .ident th,.ident td{width:auto;padding:4px 0}
  .ident tr+tr{border-top:1px solid var(--rule);margin-top:8px;padding-top:8px}
  .data td:first-child{width:38%}
}

@media(max-width:560px){
  .colo-top{grid-template-columns:1fr 1fr;gap:28px 24px;padding:38px 0 32px}
  .colo-brand img{height:40px}
  /* Sections | Modules sit side by side; Enquiries spans full width, centred */
  .colo-col:last-child{grid-column:1 / -1;align-items:center;text-align:center}
}

@media(max-width:480px){
  .wrap{width:92%}
  .data{font-size:.92rem}
  .data td{padding:12px 12px 12px 0}
  .data th{padding-right:12px}
  .actions{gap:16px;margin-top:28px;justify-content:center;text-align:center}
  .actions .button{width:100%;text-align:center}
  .colo-credit{margin-left:0}
  .sec{padding:50px 0}
  .qa h3{font-size:1.16rem}
  .spec dd{padding-bottom:18px}
  .sheet-head{padding:12px 16px}
  .sheet-head img{height:18px}
  .sheet-head span{font-size:.82rem}
}

/* landscape phones: the sticky masthead must not eat the viewport */
@media(max-height:520px) and (orientation:landscape){
  .mast-in{height:58px}
  .mark img{height:30px}
  .opening{padding:40px 0 36px}
}

/* --- print --------------------------------------------------------------- */
@media print{
  .mast,.menu-toggle,.actions{display:none}
  body{font-size:11pt}
  .plate,.close{background:none}
}