/* Noah Koshy — shared theme.
   Every page loads this. Palette and type live here; everything else is an
   inline style on the element itself, so a page can be edited in isolation.
   Change a value here and every page changes with it. */
:root {
  --kraft:      #e8dcc2;   /* page ground */
  --paper:      #f6efdf;   /* cards, masthead */
  --paper-warm: #faf4e4;   /* photo mounts */
  --paper-lit:  #fbf6ea;   /* active process step */
  --ink:        #23252e;   /* body text */

  --navy:  #2a3f5f;        /* section inks, in order */
  --plum:  #5c3a52;
  --sage:  #40563c;
  --ochre: #6d5220;
  --teal:  #1f5f5c;
  --pen:   #a8412c;        /* handwriting, annotations */

  --display: 'Instrument Serif', Georgia, serif;
  --body:    'Inter Tight', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;
  --hand:    'Caveat', cursive;
}

html { scroll-behavior: smooth; }
html, body {
  margin: 0; padding: 0;
  background: var(--kraft);
  background-image: radial-gradient(rgba(120,90,40,0.07) 1px, transparent 1px);
  background-size: 3px 3px;
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
a { color: var(--navy); text-decoration: none; border-bottom: 1px solid rgba(42,63,95,0.3); transition: color .15s, border-color .15s; }
a:hover { color: var(--pen); border-bottom-color: var(--pen); }
::selection { background: rgba(168,65,44,0.2); }
@keyframes nk-nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* Empty image frames. Each one is a <figure data-figure> with a comment above it
   saying what belongs there; replace the whole figure with a real <img>. */
figure[data-figure] {
  margin: 0; width: 100%;
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg, rgba(35,37,46,0.05) 0 6px, transparent 6px 12px);
  border: 1px dashed rgba(35,37,46,0.26);
}
figure[data-figure] figcaption {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(35,37,46,0.5); text-align: center; padding: 8px 12px; line-height: 1.5;
}
figure[data-figure] img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Tinted frames. The s02 screens and s03 process artefacts carry the hatch from
   the approved design as an inline background, so they read as an intentional
   placeholder rather than a broken image, and stay presentable when a project
   has thin material. They drop the dashed outline and sit their caption
   bottom-left, where the old inline label was. */
figure[data-figure][data-tint] { align-items: flex-end; justify-content: flex-start; border: 0; }
figure[data-figure][data-tint] figcaption { font-size: 9.5px; color: inherit; text-align: left; padding: 0; }

@media print {
  [data-index], [data-nav] { display: none !important; }
  html, body { background: #fff; }
}

/* Hover states. In the source design these were per-element hover styles; here
   each element carries data-hover="name" and the rule lives once, below. */
[data-hover] { transition: box-shadow .2s, transform .2s, color .15s, background .15s; }
[data-hover="lift"]:hover       { box-shadow: 0 14px 30px rgba(60,40,20,0.22); }
[data-hover="pen"]:hover        { color: var(--pen); }
[data-hover="invert"]:hover     { background: var(--navy); color: var(--paper); }
[data-hover="raise"]:hover      { transform: translateY(-8px) scale(1.014) !important; box-shadow: 0 18px 38px rgba(60,40,20,0.2); }
[data-hover^="slide-"]:hover    { transform: translateX(4px) !important; }
[data-hover="slide-navy"]:hover  { color: var(--navy); }
[data-hover="slide-sage"]:hover  { color: var(--sage); }
[data-hover="slide-plum"]:hover  { color: var(--plum); }
[data-hover="slide-ochre"]:hover { color: var(--ochre); }