/* ==========================================================================
   The Studiolo — stylesheet.css (FULL REBUILD — MOBILE FIXED)
   Fixes:
   1) Logo centered on mobile (hard override)
   2) Equalized spacing rhythm
   3) TOC text sane + one-line rows on mobile
   ========================================================================== */

/* ----------------------------
   Tokens
---------------------------- */
:root{
  /* Core */
  --ink-black: #1f1c19;
  --parchment-white: #f4f1e8;

  /* Accents */
  --martian-vermilion: #dd5735;
  --marginalia-pink: #d774a7;

  /* Type */
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
          "Courier New", monospace;

  /* Layout */
  --max: 1040px;
  --gutter: 24px;

  /* Vertical rhythm */
  --stack: 16px;
  --stack-tight: 10px;
  --stack-loose: 22px;

  /* Tracking */
  --track-ui: 0.18em;
  --track-ui-tight: 0.12em;
  --track-display-wide: 0.045em;

  /* TopDrop */
  --pill-h: 56px;
  --pill-radius: 999px;
  --pill-border: 1px;

  --pill-pad-x: 20px;
  --pill-dot: 14px;
  --pill-dot-gap: 14px;
  --pill-dot-safe: calc(var(--pill-dot) + var(--pill-dot-gap) + 12px);

  /* Dropdown */
  --panel-radius: 18px;
  --panel-gap: 10px;

  /* Shadows */
  --shadow-night: 0 14px 44px rgba(0,0,0,.35);
  --shadow-day:   0 14px 44px rgba(0,0,0,.14);
}

/* ----------------------------
   Themes (DEFAULT = NIGHT)
---------------------------- */
body{
  --bg: var(--ink-black);
  --fg: var(--parchment-white);
  --muted: rgba(244,241,232,.72);
  --hairline: rgba(244,241,232,.18);

  --panel-bg: rgba(31,28,25,.94);
  --panel-fg: var(--parchment-white);
  --panel-line: rgba(244,241,232,.16);

  --pill-bg: rgba(31,28,25,.65);
  --pill-fg: var(--parchment-white);
  --pill-line: rgba(244,241,232,.22);

  --shadow: var(--shadow-night);
}

/* DAY (Inverse) */
body.inverse{
  --bg: var(--parchment-white);
  --fg: var(--ink-black);
  --muted: rgba(31,28,25,.70);
  --hairline: rgba(31,28,25,.18);

  --panel-bg: rgba(244,241,232,.94);
  --panel-fg: var(--ink-black);
  --panel-line: rgba(31,28,25,.16);

  --pill-bg: rgba(244,241,232,.70);
  --pill-fg: var(--ink-black);
  --pill-line: rgba(31,28,25,.22);

  --shadow: var(--shadow-day);
}

/* MARTIAN MODE */
body.martian{
  --bg: var(--martian-vermilion);
  --fg: #000000;
  --muted: rgba(0,0,0,.72);
  --hairline: rgba(0,0,0,.28);

  --panel-bg: var(--martian-vermilion);
  --panel-fg: #000000;
  --panel-line: rgba(0,0,0,.35);

  --pill-bg: rgba(31,28,25,.55);
  --pill-fg: #ffffff;
  --pill-line: rgba(255,255,255,.35);

  --shadow: 0 14px 44px rgba(0,0,0,.35);
}

/* ----------------------------
   Local Fonts
---------------------------- */
@font-face{
  font-family: "RuderPlakatLLVarWeb";
  src: url("../fonts/RuderPlakatLLVarWeb.woff2") format("woff2");
  font-display: swap;
}
@font-face{
  font-family: "RuderPlakatLLVarSub";
  src: url("../fonts/RuderPlakatLLVarSub.woff2") format("woff2");
  font-display: swap;
}

/* ----------------------------
   Base
---------------------------- */
*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--fg);

  font-family: "IBM Plex Sans Condensed", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Mobile-safe baseline */
  font-size: 16px;
  line-height: 1.65;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (min-width: 900px){
  body{ font-size: 18px; }
}

a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; }

hr{
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: var(--stack-loose) 0;
}

/* ----------------------------
   Wrap / Hero
---------------------------- */
.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--stack-loose) var(--gutter) 64px;
}

.hero{
  position: relative;
  padding-top: 62px; /* room for sticky TopDrop */
}

/* Address (desktop = absolute) */
.address{
  position: absolute;
  top: var(--stack-loose);
  right: var(--gutter);

  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: var(--track-ui-tight);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
  pointer-events: none;
}

/* Logo (desktop default = left aligned) */
.logo{
  width: min(360px, 78vw);
  height: auto;
  display: block;
  margin: var(--stack) 0 var(--stack-loose);
}

/* ----------------------------
   Tabs
---------------------------- */
.tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  padding: var(--stack) 0 var(--stack);
}

.tab{
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: var(--track-ui);
  text-transform: uppercase;

  color: var(--fg);
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: transparent;

  transition: border-color 160ms ease, background 160ms ease;
}

.tab:hover{
  border-color: rgba(255,255,255,.38);
  text-decoration: none;
}
body:not(.martian) .tab:hover{
  border-color: rgba(221,87,53,.65);
}

.tab[aria-current="page"],
.tab.active{
  border-color: rgba(221,87,53,.85);
}
body.martian .tab[aria-current="page"],
body.martian .tab.active{
  border-color: rgba(255,255,255,.75);
}

/* Toggle stack */
.toggles{
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.toggleRow{
  display: inline-flex;
  gap: 10px;
  align-items: center;

  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  color: var(--muted);
}

.toggleRow input{
  width: 16px;
  height: 16px;
}

#inverseToggle{ accent-color: var(--martian-vermilion); }
#martianToggle{ accent-color: var(--marginalia-pink); }

/* ----------------------------
   Headings
---------------------------- */
h1{
  font-family: "RuderPlakatLLVarWeb", "RuderPlakatLLVarSub", sans-serif;
  font-size: clamp(40px, 8vw, 86px);
  line-height: .95;
  margin: var(--stack-loose) 0 var(--stack-tight);
  letter-spacing: var(--track-display-wide);

  font-variation-settings: "wght" 300;
  font-weight: 300;
}

.subhead{
  font-family: "Old Standard TT", "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(18px, 4.6vw, 26px);
  line-height: 1.35;
  margin: 0 0 var(--stack-loose);
  color: var(--muted);
}

.body{
  max-width: 78ch;
}

/* Section label */
.section-title{
  margin: 34px 0 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-size: 15px;
  color: var(--fg);
  font-family: var(--mono);
}

blockquote{
  margin: var(--stack-loose) 0;
  padding: 10px 14px;
  border-left: 3px solid var(--hairline);
  color: var(--muted);
  font-size: 20px;
}

/* Lists */
.body ul{
  margin: 10px 0 0 22px;
  padding: 0;
}
.body li{
  margin: 6px 0;
}

/* ----------------------------
   TOC (Base)
---------------------------- */
ul.toc{
  margin: var(--stack) 0 0;
  padding: 0;
  list-style: none;

  font-size: 1rem;
  line-height: 1.55;
}

ul.toc li{
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 10px;
  margin: 6px 0;
  min-width: 0;
}

ul.toc .n{
  width: 28px;
  text-align: right;
  font-weight: 500;
  color: var(--muted);
  flex: 0 0 auto;
}

ul.toc a{
  color: var(--fg);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 0 1 auto;
}
ul.toc a:hover{ text-decoration: underline; }

ul.toc .dots{
  flex: 1 1 auto;
  border-bottom: 1px dotted var(--hairline);
  transform: translateY(-3px);
  min-width: 12px;
}

ul.toc .p{
  width: 34px;
  text-align: right;
  font-weight: 500;
  color: var(--muted);
  flex: 0 0 auto;
}

/* Footer */
.footer{
  margin-top: 28px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  color: var(--muted);
}

/* ==========================================================================
   TOPDROP
   ========================================================================== */

.topdrop{
  position: sticky;
  top: 0;
  z-index: 999;
  padding: var(--stack) var(--gutter) 0;
  pointer-events: none;
}

.topdrop-inner{
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.topdrop-stack{
  pointer-events: auto;
  position: relative;
}

.pill{
  position: relative;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: var(--pill-h);
  border-radius: var(--pill-radius);
  border: var(--pill-border) solid var(--pill-line);
  background: var(--pill-bg);
  color: var(--pill-fg);
  box-shadow: var(--shadow);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.pill:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.32);
  box-shadow: 0 18px 56px rgba(0,0,0,.38);
}
body.inverse .pill:hover{
  background: rgba(31,28,25,.06);
  border-color: rgba(31,28,25,.28);
  box-shadow: 0 18px 56px rgba(0,0,0,.16);
}

.pillLabel{
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  padding: 0 var(--pill-pad-x);
  padding-right: calc(var(--pill-pad-x) + var(--pill-dot-safe));

  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  line-height: 1;
  user-select: none;
  white-space: nowrap;
}

.pill:focus-visible{
  outline: 2px solid rgba(221,87,53,.75);
  outline-offset: 3px;
}
body.martian .pill:focus-visible{
  outline-color: rgba(255,255,255,.85);
}

.pillDot{
  position: absolute;
  right: var(--pill-dot-gap);
  width: var(--pill-dot);
  height: var(--pill-dot);
  border-radius: 999px;
  background: var(--marginalia-pink);
  box-shadow: 0 0 0 2px rgba(0,0,0,.15);
  pointer-events: none;
}

.topdrop-stack .panel{ display: none; }
.topdrop-stack[data-open="1"] .panel{ display: block; }

.panel{
  pointer-events: auto;

  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% + var(--panel-gap));

  width: 100%;
  min-width: 260px;
  max-width: 520px;

  border-radius: var(--panel-radius);
  border: 1px solid var(--panel-line);
  background: var(--panel-bg);
  color: var(--panel-fg);
  box-shadow: var(--shadow);
  overflow: hidden;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.panelList{
  list-style: none;
  margin: 0;
  padding: 8px 0;
}

.panelList a{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  padding: 14px 16px;

  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: var(--track-ui);
  text-transform: uppercase;

  color: var(--panel-fg);
  text-decoration: none;
}

.panelList li + li a{
  border-top: 1px solid var(--panel-line);
}

.panelList a:hover{
  background: rgba(221,87,53,.10);
  text-decoration: none;
}
body.martian .panelList a:hover{
  background: rgba(255,255,255,.10);
}

/* ==========================================================================
   RESPONSIVE (MOBILE)
   ========================================================================== */
@media (max-width: 720px){
  :root{
    --gutter: 18px;
    --pill-pad-x: 14px;
    --pill-dot-gap: 12px;
    --pill-h: 54px;

    --stack: 14px;
    --stack-tight: 9px;
    --stack-loose: 18px;
  }

  .hero{
    padding-top: 58px;
  }

  /* Address becomes centered block */
  .address{
    position: static;
    margin: var(--stack-loose) 0 var(--stack);
    text-align: center;
    pointer-events: auto;
    font-size: 12px;
  }

  /* Tabs center */
  .tabs{
    justify-content: center;
    gap: 8px;
    padding: var(--stack) 0 var(--stack);
  }

  /* Toggles center under tabs */
  .toggles{
    width: 100%;
    align-items: center;
    margin-top: var(--stack-tight);
  }

  /* H1 a touch smaller on mobile */
  h1{
    font-size: clamp(38px, 10vw, 56px);
  }

  blockquote{
    font-size: 18px;
  }

  /* --- HARD FIX #1: LOGO CENTERING (wins) --- */
  img.logo{
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: var(--stack) !important;
    margin-bottom: var(--stack-loose) !important;
    width: min(420px, 86vw) !important;
    height: auto !important;
  }

  /* --- HARD FIX #2: TOC OVERSIZE / STACKING (wins) --- */
  ul.toc{
    font-size: 15px !important;
    line-height: 1.45 !important;
  }

  ul.toc li{
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 10px !important;
    margin: 8px 0 !important;
    min-width: 0 !important;
  }

  ul.toc .n{
    width: 24px !important;
    flex: 0 0 auto !important;
  }

  ul.toc a{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  ul.toc .dots{
    flex: 1 1 auto !important;
    min-width: 10px !important;
  }

  ul.toc .p{
    width: 26px !important;
    flex: 0 0 auto !important;
  }
}

/* Optional: simplify TOC on very small screens */
@media (max-width: 420px){
  ul.toc .dots{ display:none !important; }
  ul.toc .p{ display:none !important; }
}