/* ------------------------------------------------------------------
   fratian.com — MODERN "Command Deck" skin (the unscoped baseline).
   Built on the LegalEagle palette; tokens are configurable in one place.
   ------------------------------------------------------------------ */
:root{
  --bg:#0f1115; --panel:#161a22; --panel2:#1d2230; --border:#2a3142;
  --text:#e6e8ed; --muted:#8a93a6; --accent:#5ea3ff; --accent-hi:#8ec2ff;
  --pass:#3ec56d; --warn:#f0b860; --fail:#ef5e5e;
  --measure:68ch;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Fira Code", Menlo, monospace;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--sans);
      font-size:1.0625rem; line-height:1.6; text-rendering:optimizeLegibility; }
.wrap{ width:100%; max-width:72rem; margin:0 auto; padding:0 1.25rem; }
.section{ padding:1rem 0 3rem; }
a{ color:var(--accent); text-decoration-thickness:1px; text-underline-offset:2px; }
a:hover{ color:var(--accent-hi); }
img{ max-width:100%; }

/* skip link */
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:1rem; top:1rem; background:var(--panel); color:var(--text);
  padding:.5rem .75rem; border:1px solid var(--border); border-radius:8px; z-index:50; }

/* ------------------------------------------------------------- header */
.site-head{ position:sticky; top:0; z-index:20; background:#0b0d11;
  border-bottom:1px solid var(--border); }
.site-head .wrap{ display:flex; align-items:center; gap:1rem; min-height:3.5rem; flex-wrap:wrap; }
.brand{ font-weight:800; letter-spacing:-.02em; color:var(--text); text-decoration:none; font-size:.975rem; }
.brand span{ color:var(--accent); }
.site-nav{ display:flex; gap:1.1rem; font-size:.85rem; margin-right:auto; }
.site-nav a{ color:var(--muted); text-decoration:none; }
.site-nav a:hover,.site-nav a[aria-current]{ color:var(--accent); }

/* --------------------------------------------------- controls (toggles) */
.site-controls{ display:flex; align-items:center; gap:.6rem; }
.lang-pill{ display:inline-flex; border:1px solid var(--border); border-radius:999px; overflow:hidden; }
.lang-pill .lang{ font:600 .72rem/1 var(--mono); padding:.32rem .5rem; color:var(--muted); text-decoration:none; }
.lang-pill .lang:hover{ color:var(--text); }
.lang-pill .lang.is-on{ background:var(--accent); color:#08111f; }
.skin-toggle{ display:inline-flex; align-items:center; border:1px solid var(--border);
  border-radius:8px; overflow:hidden; background:transparent; cursor:pointer; padding:0; }
.skin-toggle .skin-seg{ font:600 .72rem/1 var(--mono); padding:.34rem .6rem; color:var(--muted); }
html[data-theme="modern"] .skin-toggle .skin-seg[data-skin="modern"]{ background:var(--panel2); color:var(--text); }
.skin-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* --------------------------------------------------------------- type */
h1,h2,h3{ font-family:var(--sans); font-weight:800; letter-spacing:-.02em; line-height:1.18; }
.page-title{ font-size:clamp(1.9rem,5vw,2.8rem); margin:1.4rem 0 .5rem; }
.lede{ color:var(--muted); font-size:1.15rem; margin:0 0 .5rem; max-width:52ch; }
.meta{ font:600 .78rem/1.4 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0 0 .35rem; }

/* -------------------------------------------------------------- cards */
.cards{ list-style:none; padding:0; margin:2rem 0 0; columns:18rem 3; column-gap:1rem; }
.card{ display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--border);
  border-radius:12px; overflow:hidden; transition:border-color .15s, transform .15s;
  break-inside:avoid; margin:0 0 1rem; }
.card:hover{ border-color:var(--accent); transform:translateY(-2px); }
.card--soon{ opacity:.7; }
.card--son{ border-style:dashed; border-color:var(--accent); }
.card__img{ aspect-ratio:16/9; width:100%; object-fit:cover; background:var(--panel2); display:block; }
.card__body{ padding:1rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:.45rem; flex:1; }
.card__body h2{ font-size:1.15rem; margin:0; }
.card__body h2 a{ color:var(--text); text-decoration:none; }
.card__body h2 a:hover{ color:var(--accent); }
.card__body p{ margin:0; color:var(--muted); font-size:.95rem; line-height:1.55; }
.tag{ align-self:flex-start; font:600 .68rem/1 var(--mono); letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent); }
.tag--soon{ color:var(--warn); }

/* --------------------------------------- Raised-Panel reading surface */
.reading{ background:var(--panel); border:1px solid var(--border); border-radius:12px;
  padding:1.5rem clamp(1rem,4vw,2.25rem); margin:1.5rem auto 2.5rem; max-width:52rem; }
.prose{ color:var(--text); }
.prose > *{ max-width:var(--measure); }
.prose{ font-size:1.08rem; line-height:1.7; }
.prose p{ margin:0 0 1rem; }
.prose h2,.prose h3{ margin:2rem 0 .6rem; }
.prose img,.prose figure{ max-width:100%; border-radius:8px; }
.prose figure{ margin:1.5rem 0; }
.prose figcaption{ color:var(--muted); font-size:.85rem; margin-top:.4rem; }
.prose a{ color:var(--accent); }
.prose blockquote{ margin:1.2rem 0; padding-left:1rem; border-left:3px solid var(--border); color:var(--muted); }
.prose hr{ border:0; border-top:1px solid var(--border); margin:2rem 0; }

/* chapter pager */
.pager{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  border-top:1px solid var(--border); padding-top:1.25rem; margin-top:2rem; }
.pager a{ display:flex; flex-direction:column; gap:.15rem; text-decoration:none; color:var(--accent); max-width:48%; }
.pager a.next{ text-align:right; margin-left:auto; }
.pager .dir{ font:600 .72rem/1 var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.pager .t{ font-weight:700; }

/* comments (preserved from old blog) */
.comments{ margin-top:2.5rem; border-top:1px solid var(--border); padding-top:1.25rem; }
.comments h2{ font-size:1.1rem; }
.comment{ background:var(--panel2); border:1px solid var(--border); border-radius:10px;
  padding:.8rem 1rem; margin:.75rem 0; }
.comment[data-depth="1"]{ margin-left:1.5rem; }
.comment__head{ font-size:.85rem; margin-bottom:.3rem; }
.comment__who{ font-weight:700; color:var(--text); }
.comment__when{ color:var(--muted); }

/* ------------------------------------------------------------- footer */
.site-foot{ border-top:1px solid var(--border); color:var(--muted); font-size:.85rem; }
.site-foot .wrap{ display:flex; flex-direction:column; gap:.35rem; padding:1.5rem 1.25rem; }
.site-foot a{ color:var(--muted); }
.site-foot a:hover{ color:var(--accent); }

/* machine-translation notice */
.mt-notice{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  background:rgba(94,163,255,.08); border:1px solid var(--border);
  border-left:3px solid var(--accent); border-radius:8px;
  padding:.6rem .85rem; margin:0 0 1.25rem; font-size:.85rem; color:var(--muted); }
.mt-notice .mt-en{ font:600 .8rem/1 var(--mono); color:var(--accent); text-decoration:none; }
.mt-notice .mt-x{ margin-left:auto; background:none; border:0; color:var(--muted);
  font-size:1.1rem; line-height:1; cursor:pointer; padding:0 .2rem; }
.mt-notice .mt-x:hover{ color:var(--text); }
.mt-notice[hidden]{ display:none !important; }

/* car-history photo slots */
.car-photo{ border:1px dashed var(--border); color:var(--muted); background:var(--panel2);
  border-radius:10px; padding:2.5rem 1rem; text-align:center; font:600 .85rem/1.5 var(--mono);
  margin:1rem 0; }
.car-img{ display:block; width:100%; border-radius:10px; margin:1rem 0; }
.car-fig{ margin:1rem 0; }
.car-fig .car-img{ margin:0; }
.car-cap{ color:var(--muted); font:400 .8rem/1.4 var(--sans); font-style:italic; margin-top:.4rem; }

/* retro-only ornaments never show in modern */
.retro-only{ display:none; }
.retro-hot{ display:none; }

@media (max-width:560px){ .site-nav{ order:3; width:100%; margin:0; } }