/* ============================================================
   Mike Cutillo — Personal Portfolio Deck
   Editorial / monograph aesthetic. Independent of AugmentED.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;0,6..72,800;1,6..72,400;1,6..72,600;1,6..72,700;1,6..72,800&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* Palette — warm paper + ink + a single signal accent */
  --paper:        #F4EEE2;
  --paper-2:      #ECE3D1;
  --paper-edge:   #DCCFB6;
  --ink:          #15110D;
  --ink-2:        #2C261F;
  --ink-3:        #5A4F40;
  --ink-4:        #8A7E6B;
  --ink-5:        #C9BFAA;

  --accent:       #C4451A;     /* signal terracotta */
  --accent-deep:  #8E2C0A;
  --accent-tint:  #F2D7C8;

  --moss:         #4A5B3A;     /* secondary editorial */
  --plum:         #5A1E3D;

  /* Type families */
  --font-serif:   "Newsreader", "Times New Roman", Georgia, serif;
  --font-sans:    "Geist", "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --font-mono:    "Geist Mono", "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* Slide tokens (1920x1080) */
  --pad-x:        110px;
  --pad-y:        96px;

  /* Type scale */
  --fs-eyebrow:   18px;
  --fs-folio:     16px;
  --fs-tag:       18px;
  --fs-small:     22px;
  --fs-body:      28px;
  --fs-body-lg:   32px;
  --fs-h5:        30px;
  --fs-h4:        38px;
  --fs-h3:        56px;
  --fs-h2:        80px;
  --fs-h1:        120px;
  --fs-display:   180px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #1a1a1a; }

deck-stage { background: #1a1a1a; }
deck-stage > section {
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  position: relative;
  overflow: hidden;
}

/* ===== Editorial paper texture: gentle fibre noise via SVG ===== */
deck-stage > section::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.045 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 1;
  z-index: 1;
  mix-blend-mode: multiply;
}

/* ===== Dark / hero variant (deep ink) ===== */
.dk {
  background: var(--ink) !important;
  color: var(--paper) !important;
}
.dk::before { mix-blend-mode: screen; opacity: 0.6; }

/* ===== Frame ===== */
.frame {
  position: absolute; inset: 0;
  padding: var(--pad-y) var(--pad-x);
  display: flex; flex-direction: column;
  z-index: 2;
}

/* ===== Editorial chrome — top hairline + slug ===== */
.edhead {
  position: absolute; top: 32px; left: var(--pad-x); right: var(--pad-x);
  z-index: 3;
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink-5);
  font-family: var(--font-mono);
  font-size: var(--fs-folio);
  color: var(--ink-3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.dk .edhead { border-bottom-color: rgba(244,238,226,0.18); color: rgba(244,238,226,0.55); }
.edhead .slug-l { font-weight: 500; }
.edhead .slug-r { font-weight: 500; }

.edfoot {
  position: absolute; bottom: 32px; left: var(--pad-x); right: var(--pad-x);
  z-index: 3;
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 14px;
  border-top: 1px solid var(--ink-5);
  font-family: var(--font-mono);
  font-size: var(--fs-folio);
  color: var(--ink-3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.dk .edfoot { border-top-color: rgba(244,238,226,0.18); color: rgba(244,238,226,0.55); }

.folio-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
}
.dk .folio-num { color: var(--paper); }

/* ===== Type ===== */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.dk .eyebrow { color: var(--accent); }

.h-display {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-display);
  line-height: 0.88;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
}
.dk .h-display { color: var(--paper); }

.h-1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: 0.95;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0;
}
.dk .h-1 { color: var(--paper); }

.h-2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1.0;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0;
}
.dk .h-2 { color: var(--paper); }

.h-3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1.05;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0;
}
.dk .h-3 { color: var(--paper); }

.italic { font-style: italic; }

.body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--ink-2);
  font-weight: 400;
}
.dk .body { color: rgba(244,238,226,0.78); }

.body-lg {
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  line-height: 1.4;
  color: var(--ink-2);
  font-weight: 400;
}
.dk .body-lg { color: rgba(244,238,226,0.85); }

.lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 36px;
  line-height: 1.3;
  color: var(--ink-2);
  font-weight: 400;
}
.dk .lede { color: rgba(244,238,226,0.85); }

strong, b { font-weight: 600; color: var(--ink); }
.dk strong, .dk b { color: var(--paper); }

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
  color: var(--ink-3);
  font-weight: 400;
}
.dk .mono { color: rgba(244,238,226,0.7); }

/* ===== Pull-quote / drop cap helpers ===== */
.dropcap::first-letter {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 5.5em;
  line-height: 0.85;
  float: left;
  margin: 0.05em 0.08em 0 -0.04em;
  color: var(--accent);
}

.pq {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 44px;
  line-height: 1.25;
  color: var(--ink);
  border-left: 3px solid var(--accent);
  padding: 8px 0 8px 32px;
  margin: 0;
}
.dk .pq { color: var(--paper); border-left-color: var(--accent); }

/* ===== Stats — editorial numerals ===== */
.stat {
  display: flex; flex-direction: column; gap: 6px;
}
.stat .n {
  font-family: var(--font-serif);
  font-weight: 500;
  font-style: italic;
  font-size: 96px;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.stat .n .sym {
  font-style: normal;
  font-weight: 400;
  color: var(--accent);
}
.dk .stat .n { color: var(--paper); }

.stat .lbl {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: 0;
}
.dk .stat .lbl { color: rgba(244,238,226,0.85); }

.stat .src {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.dk .stat .src { color: rgba(244,238,226,0.55); }

/* ===== Accent rule ===== */
.acc-rule {
  height: 4px;
  width: 88px;
  background: var(--accent);
  border: none;
  margin: 0;
}

/* ===== Tag pill ===== */
.tag {
  display: inline-flex; align-items: center;
  padding: 8px 18px;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  border: 1px solid var(--ink-5);
  background: transparent;
  white-space: nowrap;
}
.dk .tag { color: var(--paper); border-color: rgba(244,238,226,0.3); }
.tag--accent { color: var(--accent); border-color: var(--accent); }
.tag--filled { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.dk .tag--filled { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* ===== Photo frame — editorial polaroid style ===== */
.photo {
  background: #fff;
  padding: 14px 14px 50px;
  box-shadow: 0 18px 36px rgba(21,17,13,0.18);
  position: relative;
}
.photo img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
}
.photo .cap {
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-3);
  text-align: center;
}

/* ===== Buttons used in chat demo ===== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px;
  font-family: var(--font-sans);
  font-size: 18px; font-weight: 500;
  background: var(--ink); color: var(--paper);
  border: none; cursor: pointer;
  transition: opacity 200ms;
}
.btn:hover { opacity: 0.86; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--accent { background: var(--accent); color: #fff; }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink-5);
}

/* ===== Links — clickable in PDF, no visual change ===== */
deck-stage > section a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  transition: opacity 150ms;
}
deck-stage > section a:hover { opacity: 0.7; }

/* ===== Animation ===== */
@keyframes p { 0%,100% {opacity:1} 50% {opacity:0.4} }
.pulse { animation: p 1.4s ease-in-out infinite; }