/* ============================================================
   CODEX · youcef.io
   A hand-assembled zine / almanac / field journal
   ============================================================ */

:root {
  --paper: #f3ede2;
  --paper-shade: #e9e1d0;
  --paper-deep: #ddd2bb;
  --ink: #141110;
  --ink-soft: #2a2522;
  --ink-fade: #6b625a;
  --stamp: #c0392b;   /* deep vermilion, one accent */
  --stamp-dark: #8e2a20;
  --rule: #1a1613;
  --gutter: 64px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { background: var(--paper); color: var(--ink); overflow-x: hidden; }
html, body { max-width: 100%; }

body {
  font-family: 'EB Garamond', 'Hoefler Text', Georgia, serif;
  font-size: 18px;
  line-height: 1.5;
  overflow-x: hidden;
  /* paper texture: grain + subtle vignette + fold-line */
  background:
    radial-gradient(1400px 800px at 50% -200px, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1200px 900px at 80% 120%, rgba(192,57,43,.04), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.08  0 0 0 0 0.07  0 0 0 0 0.06  0 0 0 0.22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    var(--paper);
  background-size: auto, auto, 240px 240px, auto;
}

/* ===== type ===== */
.display { font-family: 'UnifrakturCook', 'Cormorant Garamond', serif; font-weight: 700; }
.didone  { font-family: 'Playfair Display', 'Didot', serif; font-weight: 900; letter-spacing: -.02em; }
.grot    { font-family: 'Archivo Black', 'Helvetica Neue', Impact, sans-serif; letter-spacing: -.01em; }
.mono    { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; }
.serif   { font-family: 'EB Garamond', serif; }
.arabic  { font-family: 'Amiri', 'Scheherazade New', 'Traditional Arabic', serif; font-weight: 700; font-feature-settings: "kern" 1, "liga" 1; }

.smallcaps { font-variant-caps: all-small-caps; letter-spacing: .12em; }
.uppercase { text-transform: uppercase; letter-spacing: .14em; }

/* ===== layout primitives ===== */
.page {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
}

.rule        { border: 0; border-top: 1px solid var(--rule); }
.rule-thick  { border: 0; border-top: 3px solid var(--rule); }
.rule-double { border: 0; border-top: 3px double var(--rule); }
.rule-dash   { border: 0; border-top: 1px dashed var(--rule); }

/* folio marks in margins */
.folio {
  position: absolute;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .15em;
  color: var(--ink-fade);
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

/* ===== registration marks & crop marks ===== */
.crop-mark {
  position: absolute;
  width: 20px; height: 20px;
  pointer-events: none;
}
.crop-mark::before, .crop-mark::after {
  content: ''; position: absolute; background: var(--ink);
}
.crop-mark::before { width: 1px; height: 100%; left: 50%; }
.crop-mark::after  { height: 1px; width: 100%; top: 50%; }

.reg-mark {
  width: 18px; height: 18px; border: 1px solid var(--ink); border-radius: 50%;
  position: relative; display: inline-block;
}
.reg-mark::before, .reg-mark::after {
  content: ''; position: absolute; background: var(--ink);
}
.reg-mark::before { width: 1px; height: 26px; left: 50%; top: -5px; }
.reg-mark::after  { height: 1px; width: 26px; top: 50%; left: -5px; }

/* ===== stamp ===== */
.stamp {
  display: inline-block;
  border: 3px solid var(--stamp);
  color: var(--stamp);
  padding: 6px 14px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  transform: rotate(-6deg);
  position: relative;
  background: transparent;
}
.stamp::after {
  /* bleed / ink imperfections */
  content: '';
  position: absolute; inset: -2px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='40'><filter id='r'><feTurbulence baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.75  0 0 0 0 0.23  0 0 0 0 0.17  0 0 0 3 -1.2'/><feComposite in2='SourceGraphic' operator='in'/></filter><rect width='100%' height='100%' filter='url(%23r)' opacity='0.35'/></svg>");
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* tape / sticker */
.tape {
  position: absolute;
  width: 120px; height: 26px;
  background: rgba(232, 207, 120, .55);
  border-left: 1px dashed rgba(120,100,40,.3);
  border-right: 1px dashed rgba(120,100,40,.3);
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
}

/* links */
a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); }
a:hover { color: var(--stamp); border-bottom-color: var(--stamp); }

/* utility */
.hand { font-family: 'Caveat', 'Homemade Apple', cursive; }
.ink-red { color: var(--stamp); }
.bg-ink { background: var(--ink); color: var(--paper); }

/* margin note */
.marginalia {
  font-family: 'Caveat', cursive;
  color: var(--stamp-dark);
  font-size: 22px;
  line-height: 1.1;
  transform: rotate(-3deg);
}

/* blackletter drop cap */
.dropcap::first-letter {
  font-family: 'UnifrakturCook', serif;
  font-size: 5.2em;
  float: left;
  line-height: 0.85;
  padding: 6px 10px 0 0;
  color: var(--stamp);
}

/* ===== masthead ===== */
.masthead-title {
  font-family: 'UnifrakturCook', serif;
  font-size: clamp(80px, 13vw, 220px);
  line-height: .82;
  letter-spacing: -.02em;
}

.kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ===== card ===== */
.card {
  background: var(--paper);
  border: 1px solid var(--ink);
  position: relative;
}
.card.shade { background: var(--paper-shade); }
.card.deep  { background: var(--paper-deep); }

/* grid overlay */
.grid-bg {
  background-image:
    linear-gradient(to right, rgba(20,17,16,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20,17,16,.06) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* halftone */
.halftone {
  background-image: radial-gradient(circle at 2px 2px, var(--ink) 1px, transparent 1.5px);
  background-size: 5px 5px;
}
.halftone-red {
  background-image: radial-gradient(circle at 2px 2px, var(--stamp) 1px, transparent 1.5px);
  background-size: 5px 5px;
}

/* photo treatment */
.photo-halftone {
  filter: grayscale(1) contrast(1.1) brightness(1.05);
  mix-blend-mode: multiply;
}
.photo-red {
  filter: grayscale(1) contrast(1.15);
  mix-blend-mode: multiply;
}

/* diagonal ticker */
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker-track {
  display: inline-flex;
  white-space: nowrap;
  animation: ticker 40s linear infinite;
}

/* shake-on-hover */
@keyframes wobble {
  0%,100% { transform: rotate(-1deg); }
  50%     { transform: rotate(1deg); }
}
.wobble:hover { animation: wobble .4s ease-in-out infinite; }

/* print-plate shift (poor registration effect) */
.misregister {
  position: relative;
  display: inline-block;
}
.misregister::before {
  content: attr(data-text);
  position: absolute;
  left: 2px; top: 1px;
  color: var(--stamp);
  mix-blend-mode: multiply;
  opacity: .7;
  pointer-events: none;
}

/* constellation dots */
.star {
  position: absolute;
  width: 4px; height: 4px;
  background: var(--ink);
  border-radius: 50%;
}
.star.big { width: 7px; height: 7px; }
.star.red { background: var(--stamp); }

/* typewriter caret */
@keyframes caret { 0%,50% { opacity: 1;} 51%,100% { opacity: 0;} }
.caret::after { content: '▌'; animation: caret 1s steps(1) infinite; color: var(--stamp); }

/* scribble underline */
.scribble {
  position: relative;
  display: inline-block;
}
.scribble::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px; height: 10px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 10' preserveAspectRatio='none'><path d='M2 7 C 30 2, 60 9, 90 5 S 150 2, 180 7 S 230 3, 238 6' stroke='%23c0392b' stroke-width='2.2' fill='none' stroke-linecap='round'/></svg>") center/100% 100% no-repeat;
}

/* dossier ribbon */
.ribbon {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  padding: 4px 12px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* hover lift (but printed) */
.lift { transition: transform .25s ease, box-shadow .25s ease; }
.lift:hover { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--ink); }

/* button */
.btn {
  display: inline-block;
  border: 2px solid var(--ink);
  background: var(--paper);
  padding: 10px 18px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .15s;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn.red   { border-color: var(--stamp); color: var(--stamp); }
.btn.red:hover { background: var(--stamp); color: var(--paper); }

/* focus */
:focus-visible { outline: 2px solid var(--stamp); outline-offset: 3px; }

/* draggable cursor */
.draggable { cursor: grab; user-select: none; touch-action: none; }
.draggable:active { cursor: grabbing; }

/* barcode */
.barcode {
  display: inline-flex;
  gap: 1px;
  align-items: stretch;
}
.barcode > span {
  display: block;
  background: var(--ink);
  width: 2px;
  height: 40px;
}

/* ===== selections ===== */
::selection { background: var(--stamp); color: var(--paper); }

/* scroll marquee bar */
.edge-bar {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 8px 0;
  font-family: 'Archivo Black', sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: 12px;
}

/* keyboard hint */
.kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  border: 1px solid var(--ink);
  border-bottom-width: 2px;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--paper);
}

/* star background on NOW */
.starfield {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* cards stack */
.stack {
  position: relative;
  perspective: 1200px;
}

/* page turn shadow */
.fold-shadow {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,0,0,.04) 49%,
    rgba(0,0,0,.1) 50%,
    rgba(0,0,0,.04) 51%,
    transparent 100%);
}

/* commandline */
.cmdline {
  position: fixed;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  display: flex; gap: 8px; align-items: center;
  border-radius: 2px;
  box-shadow: 0 6px 24px rgba(0,0,0,.3);
  z-index: 200;
  min-width: 420px;
}
.cmdline input {
  background: transparent; border: 0; outline: 0;
  color: var(--paper); font: inherit; flex: 1;
}

/* ==========================================================
   RESPONSIVE · keep the codex intact, shrink the plates
   ========================================================== */

/* Wide tablet */
@media (max-width: 1180px) {
  :root { --gutter: 40px; }
}

/* Tablet */
@media (max-width: 980px) {
  :root { --gutter: 28px; }
  body { font-size: 17px; }

  /* tighten a handful of multi-col grids at tablet size */
  .page [style*="grid-template-columns: 1.1fr 2fr 1fr"],
  .page [style*="grid-template-columns: 1fr 120px 1.35fr"],
  .page [style*="grid-template-columns: 1.6fr 1fr"],
  .page [style*="grid-template-columns: 1.15fr 1fr"],
  .page [style*="grid-template-columns: 1.2fr 1fr"],
  .page [style*="grid-template-columns: 1.1fr 1fr"],
  .page [style*="grid-template-columns: 1fr 1.2fr"],
  .page [style*="grid-template-columns: 1fr 1.35fr"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* 5-column mastehad info row -> 2 + 2 + 1 style */
  .page [style*="grid-template-columns: repeat(5, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

/* Phone & narrow tablet — stack the volume */
@media (max-width: 760px) {
  :root { --gutter: 16px; }
  body { font-size: 15.5px; line-height: 1.5; }

  /* Collapse every inline-defined grid to a single column */
  .page [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  /* Header rows (title on left, kicker on right) wrap cleanly */
  .page [style*="justify-content: space-between"][style*="align-items: baseline"],
  .page [style*="justify-content:space-between"][style*="align-items:baseline"],
  .page [style*="justify-content: space-between"][style*="align-items: center"],
  .page [style*="justify-content: space-between"][style*="align-items: flex-end"],
  .page [style*="justify-content: space-between"][style*="align-items: flex-start"],
  .page [style*="justify-content: space-between"][style*="flex-wrap"] {
    flex-wrap: wrap !important;
    row-gap: 10px !important;
  }

  /* Right-aligned banners → left on mobile */
  .page h2[style*="text-align: right"],
  .page h2[style*="text-align:right"],
  .page div[style*="text-align: right"] {
    text-align: left !important;
  }

  /* Kill out-of-flow writing-mode badges on phone (vertical lat/lon in Dispatch) */
  .mono[style*="writing-mode"] { display: none !important; }

  /* Masthead title stays majestic but within bounds */
  .masthead-title { font-size: clamp(56px, 14vw, 100px) !important; word-break: break-word; }

  /* Photo (Dispatch) */
  .page img[alt="Youcef"] {
    width: 100% !important;
    height: auto !important;
    max-width: 320px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }
  .polaroid {
    display: block !important;
    max-width: 340px;
    margin: 0 auto;
  }

  /* Vitals table inside Dispatch card */
  .card table td:first-child { width: 86px !important; font-size: 11px !important; }
  .card table td { padding: 6px 6px !important; font-size: 12px !important; }

  /* Cards: gentler padding on phone */
  .card { padding: 16px; }

  /* Drop cap scaled */
  .dropcap::first-letter { font-size: 4em; padding: 4px 8px 0 0; }

  /* Tape and stamps proportional */
  .tape  { width: 80px !important; height: 22px !important; }
  .stamp { font-size: 11px !important; padding: 4px 10px !important; letter-spacing: .14em; }

  /* Edge marquee bar smaller */
  .edge-bar { font-size: 10px; letter-spacing: .16em; }

  /* Command-line floating input becomes full width */
  .cmdline {
    min-width: 0 !important;
    width: calc(100vw - 24px) !important;
    left: 12px !important;
    right: 12px !important;
    transform: none !important;
    font-size: 12px !important;
    padding: 8px 12px !important;
  }

  /* Command-line prompt (collapsed /) sits bottom-right still */
  /* already fine — but nudge in a bit */

  /* Featured sigil in Bestiary (140px) — shrink */
  .bestiary-sigil { font-size: 72px !important; }

  /* Ledger: drop the desktop-only 4-col header row */
  .ledger-head { display: none !important; }
  /* Ledger rows collapse — remove heavy dividers between stacked cells */
  .ledger-row > div { border-right: 0 !important; border-bottom: 1px dashed rgba(20,17,16,.2) !important; }
  .ledger-row > div:last-child { border-bottom: 0 !important; }
  .ledger-crest { padding: 12px !important; }
  .ledger-crest .didone { font-size: 36px !important; }

  /* Almanac: spine hugs the left */
  .almanac-spine { left: 70px !important; }
  .page .almanac-row { grid-template-columns: 70px 1fr !important; }
  .almanac-row .didone { font-size: 24px !important; }
  .almanac-row h4 { font-size: 20px !important; }

  /* Marginalia sheet: less padding, tighter binding holes */
  .marginalia-sheet  { padding: 24px 16px 24px 52px !important; }
  .marginalia-holes  { left: 18px !important; }
  .marginalia-sheet h4,
  .marginalia-sheet .didone { font-size: 19px !important; }
  .marginalia-sheet .hand  { font-size: 20px !important; }

  /* Marginalia quote block: collapse the big quote brackets */
  .page .quote-row { grid-template-columns: 1fr !important; text-align: center !important; }
  .quote-row > .didone { display: none !important; }

  /* Now constellation height shortens on phone */
  .constellation { height: 440px !important; }
  .constellation .mono {
    font-size: 9px !important;
    letter-spacing: .1em !important;
    white-space: normal !important;
    max-width: 110px;
    margin-left: auto !important;
    margin-right: auto !important;
    line-height: 1.15;
  }
  .constellation > .mono[style*="position: absolute"] {
    font-size: 9px !important;
    letter-spacing: .14em !important;
  }

  /* Gazetteer: map doesn't need its large plate label on phone */
  .gaz-plate-label { font-size: 9px !important; letter-spacing: .1em !important; }

  /* Gazetteer index rows */
  .page .gaz-index-row { grid-template-columns: 38px 1fr 64px !important; padding: 12px 12px !important; }
  .gaz-index-row .didone { font-size: 18px !important; }

  /* Oracle reply card min-height smaller */
  .oracle-reply { min-height: 240px !important; }

  /* Colophon social links */
  .page .social-row { grid-template-columns: 96px 1fr 30px !important; padding: 12px 14px !important; }
  .social-row .didone { font-size: 18px !important; }

  /* Pantry jar row: stack label / bar / score cleanly */
  .page .pantry-jar {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 10px 0 !important;
  }
  .pantry-jar .pantry-score { text-align: left !important; }

  /* Afterword wax seal shrinks so it doesn't overflow */
  .wax-seal {
    width: 70px !important; height: 70px !important;
    bottom: -20px !important; right: -8px !important;
  }
  .wax-seal .display { font-size: 28px !important; }

  /* Photo polaroid hand-signed row wraps */
  .polaroid-cap { flex-wrap: wrap !important; gap: 4px !important; }

  /* Atelier SVG workbench — let it shorten */
  .atelier-svg { height: 180px !important; }

  /* Tables that show vitals scroll if too wide */
  .page table { width: 100% !important; }

  /* Prevent tall ticker text from going offscreen */
  .ticker-track > span { padding-right: 28px !important; }

  /* Section paddings */
  section.page { padding-top: 30px !important; padding-bottom: 40px !important; }

  /* Masthead top colophon strip wraps */
  .mast-meta { flex-wrap: wrap !important; row-gap: 4px !important; }

  /* The "THE CODEX · A FIELD JOURNAL · EST. 2002" row — hide middle piece */
  .mast-sub > span:nth-child(2) { display: none !important; }

  /* Masthead grid center slot keeps title centered */
  .mast-title-wrap { text-align: left !important; }

  /* Stamp / folio on right strip left-align on mobile */
  .mast-right { text-align: left !important; }

  /* Dispatch middle marks column — hide vertical flourishes */
  .dispatch-marks { display: none !important; }

  /* Masthead info 5-col row → 2 cols */
  .page .mast-info { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

  /* Now four-card footer */
  .page .now-footer { grid-template-columns: repeat(2, 1fr) !important; }
  .now-footer > div { border-right: 0 !important; border-bottom: 1px solid var(--ink) !important; }
  .now-footer > div:nth-child(2) { border-right: 0 !important; }
  .now-footer > div:last-child,
  .now-footer > div:nth-last-child(2) { border-bottom: 0 !important; }

  /* Colophon footer 4-col */
  .page .colophon-foot { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
}

/* Small phone */
@media (max-width: 440px) {
  :root { --gutter: 12px; }
  body { font-size: 15px; }
  .display { line-height: .9 !important; }
  .didone  { line-height: 1 !important; }
  .dropcap::first-letter { font-size: 3.4em; }
  .stamp   { font-size: 10px !important; padding: 3px 8px !important; }
  .btn     { padding: 8px 12px; font-size: 11px; letter-spacing: .14em; }
}

/* Tiny screens: last-ditch clamps */
@media (max-width: 360px) {
  .masthead-title { font-size: 44px !important; }
}