/* ─────────────────────────────────────────────────────────────────
   SHIFTERS — look: "Institutional Playful"
   Overrides colors, fonts, and shapes. styles.css is untouched.

   To switch looks:
     • Comment out the <link href="look.css"> in index.html → sketch mode
     • Swap for look-v2.css etc. → different theme
   ───────────────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap");

/* ── color tokens ─────────────────────────────────────────────── */
:root {
  --paper:      #FFFFFF;
  --paper-2:    #F1F1EF;
  --ink:        #0C0C0C;
  --ink-soft:   #3C3C3C;
  --ink-faint:  #9C9C9C;
  --line:       #0C0C0C;
  --accent:     #FFE500;
  --accent-ink: #0C0C0C;
  --grid:       rgba(0,0,0,.032);
}

html, body { background: var(--paper); }

/* sticky nav requires overflow to be visible on the page wrapper */
.wf.sk-paper { overflow: visible; }

/* ── full-bleed layout: sections centered up to 1200px ─────────── */
.wf .section {
  padding-left:  max(48px, calc(50vw - 600px));
  padding-right: max(48px, calc(50vw - 600px));
}

/* ── font overrides ───────────────────────────────────────────── */
body                  { font-family: 'DM Sans', system-ui, sans-serif; }
.hand                 { font-family: 'Space Grotesk', sans-serif; }
.script               { font-family: 'DM Sans', sans-serif; font-style: italic; font-weight: 300; }
.mono                 { font-family: 'Space Mono', monospace; letter-spacing: .01em; }

.sk-h1                { font-family: 'Space Grotesk', sans-serif; letter-spacing: -.025em; line-height: .92; }
.sk-h2                { font-family: 'Space Grotesk', sans-serif; letter-spacing: -.02em; }
.sk-eyebrow           { font-family: 'Space Mono', monospace; letter-spacing: .12em; }
.sk-body              { font-family: 'DM Sans', sans-serif; line-height: 1.5; }
.sk-small             { font-family: 'DM Sans', sans-serif; }
.sk-btn               { font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: .01em; }
.sk-chip              { font-family: 'DM Sans', sans-serif; }
.event-row .name      { font-family: 'Space Grotesk', sans-serif; }
.event-row .date      { font-family: 'Space Grotesk', sans-serif; }
.tl-card .hand        { font-family: 'Space Grotesk', sans-serif; }
.cities-track .city   { font-family: 'Space Grotesk', sans-serif; letter-spacing: -.01em; font-size: 18px; }
.cities-track         { padding: 10px 0; gap: 32px; }
.cities-track .city   { gap: 32px; }
.cities-track .city::after { width: 16px; height: 16px; font-size: 10px; }
.sk-email input       { font-family: 'DM Sans', sans-serif; }
.sk-email button      { font-family: 'Space Grotesk', sans-serif; font-weight: 700; }

/* ── shape: precise boxes, keep pill buttons ──────────────────── */
.sk-box               { border-radius: 3px; }
.fmt-card             { border-radius: 4px; }
.sk-img               { border-radius: 3px; }
.sk-note              { border-radius: 3px; box-shadow: 4px 4px 0 var(--ink); }
.event-modal          { border-radius: 4px; box-shadow: 6px 8px 0 rgba(0,0,0,.2); }

/* ── squiggle → clean dot rule ────────────────────────────────── */
.sk-squiggle {
  height: 1px;
  background: none;
  border-top: 2px dashed var(--ink);
  opacity: .25;
}

/* ── hr → clean rule ──────────────────────────────────────────── */
.sk-hr {
  clip-path: none;
  height: 1px;
  background: var(--line);
  opacity: .18;
}

/* ── tighter grid on paper ────────────────────────────────────── */
.sk-paper {
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
}
.sk-paper::after { box-shadow: none; }

/* ── city photo treatment ────────────────────────────────────────
   Remove this block to go back to unfiltered photos.              */
.sk-img[data-photo^="amsterdam"],
.sk-img[data-photo^="washington"],
.sk-img[data-photo^="barcelona"] {
  filter: brightness(1.4) contrast(0.92) saturate(1.15);
}
.sk-img[data-photo^="amsterdam"]::after,
.sk-img[data-photo^="washington"]::after,
.sk-img[data-photo^="barcelona"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  mix-blend-mode: soft-light;
  opacity: 0.4;
  pointer-events: none;
}

/* ── highlight inside dark box: solid yellow, not half-gradient ── */
.sk-box.ink .hl { background: var(--accent); padding: 2px 6px; }


/* ── car-arrow: square ────────────────────────────────────────── */
.car-arrow { border-radius: 3px; }

/* ── hide post-it annotations (remove this line to bring them back) */
.sk-note { display: none !important; }

/* ── note: clean accent card, keep Caveat for handwritten contrast */
.sk-note {
  background: var(--accent);
  border: 1.5px solid var(--ink);
  color: var(--ink);
  transform: none;
  box-shadow: 3px 3px 0 var(--ink);
}
.sk-note.r  { transform: rotate(1.5deg); }
.sk-note.r3 { transform: rotate(2.5deg); }

/* ── nav script span: Space Grotesk italic for .events ─────────── */
.script { font-style: italic; }