/* Telic Engineering B.V. — engine pages (/engines/). Loaded after style.css and notes.css.
   Uses the tokens from style.css and the drawing classes from notes.css; no new colours or fonts. */

/* page head: navy, standard glow plus the faint drawing grid, stats strip along the bottom */
.page-head--engine {
  background:
    radial-gradient(900px 400px at 80% 20%, rgba(0, 69, 112, 0.55), rgba(11, 26, 46, 0) 70%),
    linear-gradient(rgba(166, 200, 224, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(166, 200, 224, 0.045) 1px, transparent 1px),
    var(--navy-900);
  background-size: auto, 40px 40px, 40px 40px, auto;
}
.page-head--engine h1 { max-width: 20ch; }
.eng-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); border-top: 1px solid rgba(166, 200, 224, 0.18); }
.eng-stat { padding: 22px 22px 26px; border-right: 1px solid rgba(166, 200, 224, 0.12); display: flex; flex-direction: column; gap: 6px; }
.eng-stat:first-child { padding-left: 0; }
.eng-stat:last-child { border-right: 0; }
.eng-stat__value { font-size: clamp(28px, 2.8vw, 40px); color: #f1f1f2; line-height: 1.05; font-weight: 300; }
.eng-stat__label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey-500); }
@media (max-width: 760px) {
  .eng-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eng-stat:nth-child(2n) { border-right: 0; }
  .eng-stat:nth-child(2n+1) { padding-left: 0; }
  .eng-stat:nth-child(-n+2) { border-bottom: 1px solid rgba(166, 200, 224, 0.12); }
}

/* sheet 01: drawing across the sheet, numbered list in two columns under it */
.eng-drawing { margin: 0 0 clamp(24px, 3vw, 40px); padding: clamp(8px, 2vw, 24px) 0; border-top: 1.5px solid var(--navy-600); }
.eng-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 56px); }
.eng-points li { font-weight: 300; color: var(--ink-2); }
.eng-points li strong { font-weight: 500; color: var(--navy-700); }
@media (max-width: 900px) { .eng-points { grid-template-columns: 1fr; } }

/* sheet 05: questions */
.faq { border-top: 1.5px solid var(--navy-600); max-width: 980px; }
.faq__item { border-bottom: 0.5px solid rgba(0, 69, 112, 0.4); }
.faq__item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; padding: 18px 0; font-size: 19px; font-weight: 500; color: var(--navy-700); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::before { content: "+"; font-family: var(--font-mono); font-size: 18px; color: var(--blue-500); line-height: 1.4; }
.faq__item[open] summary::before { content: "\2013"; }
.faq__item summary:hover { color: var(--blue-500); }
.faq__item p { margin: -6px 0 0; padding: 0 0 20px 36px; max-width: 72ch; font-size: 16.5px; font-weight: 300; color: var(--ink-2); line-height: 1.6; }

/* sheet 06: read on */
.eng-more { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--navy-600); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.eng-more li { border-bottom: 0.5px solid rgba(0, 69, 112, 0.4); }
.eng-more a { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 14px; align-items: baseline; padding: 16px 0; color: var(--ink); }
.eng-more a::after { content: "→"; color: var(--blue-500); transition: transform 160ms ease; }
.eng-more a:hover { color: var(--navy-600); }
.eng-more a:hover::after { transform: translateX(4px); }
.eng-more__k { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-500); }
.eng-more__t { font-size: 17px; }
@media (max-width: 1000px) { .eng-more { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .eng-more { grid-template-columns: 1fr; } }

/* hub: engine cards */
.eng-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1.5px solid var(--navy-600); }
.eng-card { border-bottom: 0.5px solid rgba(0, 69, 112, 0.4); }
.eng-card:nth-child(odd) { border-right: 0.5px solid rgba(0, 69, 112, 0.4); }
.eng-card a { display: flex; flex-direction: column; gap: 10px; padding: 28px 28px 32px; height: 100%; color: var(--ink); transition: background-color 160ms ease; }
.eng-card:nth-child(odd) a { padding-left: 0; }
.eng-card a:hover { background: rgba(0, 149, 198, 0.05); color: var(--ink); }
.eng-card__svg { margin-bottom: 6px; }
.eng-card__name { font-size: clamp(30px, 3vw, 42px); font-weight: 500; color: var(--navy-700); letter-spacing: 0.02em; line-height: 1; }
.eng-card__meta { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-500); }
.eng-card__text { font-size: 16.5px; font-weight: 300; color: var(--ink-2); max-width: 46ch; }
.eng-card__go { margin-top: auto; padding-top: 6px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy-600); }
.eng-card__go::after { content: " →"; color: var(--blue-500); }
.eng-card a:hover .eng-card__go { color: var(--blue-500); }
.eng-also { margin-top: clamp(28px, 3vw, 40px); }
@media (max-width: 760px) {
  .eng-cards { grid-template-columns: 1fr; }
  .eng-card:nth-child(odd) { border-right: 0; }
  .eng-card a, .eng-card:nth-child(odd) a { padding: 24px 0 28px; }
}
@media (prefers-reduced-motion: reduce) { .eng-more a::after, .eng-card a { transition: none; } }

/* ---------- blueprint: the engine drawing in the page head, light ink on navy ----------
   Same drawing and animation as the field notes (notes.css / notes.js); only the inks change.
   Field notes are sketches on paper, the engine pages are the blueprint. */
.eng-blueprint { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter) clamp(24px, 3vw, 40px); }
.eng-blueprint .gt { max-width: 1240px; margin: 0 auto; }
.page-head--engine .gt-cl { stroke: rgba(166, 200, 224, 0.55); }
.page-head--engine .gt-case { fill: rgba(107, 173, 223, 0.08); stroke: var(--blue-200); }
.page-head--engine .gt-case--low { fill: rgba(107, 173, 223, 0.04); stroke-opacity: .5; }
.page-head--engine .gt-case--up { fill: rgba(107, 173, 223, 0.13); }
.page-head--engine .gt-hub { fill: rgba(107, 173, 223, 0.06); stroke: var(--blue-200); stroke-opacity: .45; }
.page-head--engine .gt-frame { stroke: var(--blue-200); stroke-opacity: .3; }
.page-head--engine .gt-flanges path { stroke: #e6edf5; }
.page-head--engine .gt-sec text { fill: var(--blue-300); }
.page-head--engine .gt-blades path { fill: #e6edf5; }
.page-head--engine .gt-blades path.b2 { fill: var(--blue-300); }
.page-head--engine .gt-comb { stroke: #ffffff; }
.page-head--engine .gt-halo { opacity: .45; }
.page-head--engine .gt-part-line, .page-head--engine .gt-parts path, .page-head--engine .gt-parts line { stroke: #e6edf5; }
.page-head--engine .gt-parts .gt-shaft { stroke: var(--blue-200); }
.page-head--engine .gt-parts .gt-dash { stroke: var(--blue-300); }
.page-head--engine .gt .gt-box { fill: var(--navy-800); stroke: #e6edf5; }
.page-head--engine .gt .gt-fuel { stroke: var(--blue-300); }
.page-head--engine .gt-tip { fill: #e6edf5; }
.page-head--engine .gt-screen { fill: #04101f; }
.page-head--engine .gt-flow path { stroke: var(--blue-300); opacity: .6; }
.page-head--engine .gt-lead { stroke: var(--blue-300); }
.page-head--engine .gt-pt { fill: var(--blue-300); }
.page-head--engine .gt-ring { stroke: var(--blue-300); }
.page-head--engine .gt-lab { fill: #f1f1f2; }
.page-head--engine .gt-sub { fill: var(--blue-200); }
@media (max-width: 700px) {
  .page-head--engine .gt-legend { border-top-color: rgba(166, 200, 224, 0.18); }
  .page-head--engine .gt-legend__lab { color: #f1f1f2; }
  .page-head--engine .gt-legend__sub { color: var(--blue-200); }
}