/* =============================================================
   edwinbreton.github.io: "case file" stylesheet

   How this file is organized:
     1. Design tokens (colors, fonts, sizes) as CSS custom properties
     2. Base page (paper, ink, links)
     3. Typed rule divider
     4. Navigation (the file index)
     5. Intake header (home page hero)
     6. Polaroids + tape
     7. Evidence board (art grid)
     8. Case log (blog list) + entry pages
     9. Footer, focus, small screens
   ============================================================= */


/* 1. DESIGN TOKENS -------------------------------------------
   Custom properties start with "--" and are read with var().
   Change a value here and it updates everywhere it is used.  */
:root {
  color-scheme: light;               /* the paper stays white, even in dark mode */

  --paper:      #fdfcf9;             /* bright, barely-warm white */
  --ink:        #24221f;             /* faded black typewriter ribbon */
  --ink-soft:   #67625b;             /* second-carbon gray: dates, rules */
  --ribbon-red: #a3241b;             /* red half of a two-color ribbon */
  --pen-blue:   #27386a;             /* ballpoint, for Polaroid captions */
  --manila:     #ead9a6;             /* text selection, folder accents */
  --tape:       rgba(232, 222, 186, 0.82);
  --polaroid:   #fefefd;

  --font-typed: "Courier Prime", "Courier New", Courier, monospace;
  --font-worn:  "Special Elite", "Courier Prime", "Courier New", monospace;
  --font-hand:  "Reenie Beanie", "Bradley Hand", "Segoe Print", cursive;

  --measure: 64ch;                   /* comfortable line length */
  --step--1: 0.875rem;
  --step-0:  1.0625rem;
  --step-1:  1.375rem;
  --step-2:  1.875rem;
  --step-3:  clamp(2.25rem, 7vw, 3.25rem);
}


/* 2. BASE PAGE ----------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-typed);
  font-size: var(--step-0);
  line-height: 1.65;
  background-color: var(--paper);
  /* Paper texture: an SVG noise filter, drawn by the browser, so
     there is no image file to download. Two layers: fine grain
     plus a soft, uneven tone. The radial gradient darkens edges. */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .29 0 0 0 0 .24 0 0 0 .075 0'/%3E%3C/filter%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .4 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(110, 96, 70, 0.09) 100%);
  /* Ink bleed: a hair of blur makes type look struck, not rendered */
  text-shadow: 0 0 0.6px rgba(36, 34, 31, 0.45);
}

::selection { background: var(--manila); color: var(--ink); }

.sheet {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

h1, h2, h3 {
  font-family: var(--font-worn);
  font-weight: 400;                  /* Special Elite only has one weight */
  line-height: 1.2;
  letter-spacing: 0.01em;
  margin: 0 0 0.75rem;
}
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }

p, ul, ol { max-width: var(--measure); margin: 0 0 1.1rem; }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { color: var(--ribbon-red); }

.muted { color: var(--ink-soft); }


/* 3. TYPED RULE ----------------------------------------------
   Every <hr> becomes a row of typed underscores. ::before adds
   generated content; overflow: hidden trims it to the width.  */
hr {
  border: 0;
  height: 1.7em;
  margin: 2.25rem 0;
  overflow: hidden;
  color: var(--ink-soft);
  font-family: var(--font-typed);
  line-height: 1.7;
  letter-spacing: 0.08em;            /* tiny gaps between strikes, like a real typewriter */
}
hr::before {
  content: "________________________________________________________________________________________________________________________________";
  display: block;
  white-space: nowrap;
}


/* 4. FILE INDEX (main nav) ----------------------------------- */
.file-index {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin-bottom: 2.5rem;
}
.file-index a { text-decoration: none; }
.file-index a::before { content: "["; }
.file-index a::after  { content: "]"; }
.file-index a[aria-current="page"] { color: var(--ribbon-red); }
.file-index a[aria-current="page"]::before { content: "[x "; }


/* 5. INTAKE HEADER (home hero) -------------------------------
   Grid: typed form on the left, taped portrait on the right.  */
.intake {
  display: grid;
  grid-template-columns: 1fr 13rem;
  gap: 2rem;
  align-items: start;
}
.intake > * { min-width: 0; }           /* lets grid columns shrink on phones */

.intake__file {
  color: var(--ribbon-red);
  margin-bottom: 0.25rem;
}

.intake__name {
  font-size: var(--step-3);
  margin-bottom: 1.5rem;
}

.intake__fields { margin: 0; max-width: 30rem; }

/* Each row: LABEL . . . . . . . value
   The dt grows (flex: 1) and its ::after fills the gap with dots. */
.intake__fields div {
  display: flex;
  align-items: baseline;
  gap: 1ch;
}
.intake__fields dt {
  flex: 1;
  display: flex;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.intake__fields dt::after {
  content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .";
  flex: 1;
  width: 0;                          /* start at zero, then grow: keeps the long */
  min-width: 0;                      /* dot string from widening the page */
  overflow: hidden;
  white-space: nowrap;
  color: var(--ink-soft);
}

.intake__fields dd { margin: 0; text-align: right; }


/* 6. POLAROIDS + TAPE ----------------------------------------
   Set --tilt on any polaroid to change its angle, e.g.
   <figure class="polaroid" style="--tilt: 3deg">              */
.polaroid {
  --tilt: -2deg;
  position: relative;
  margin: 0;
  padding: 0.7rem 0.7rem 0;
  background: var(--polaroid);
  transform: rotate(var(--tilt));
  box-shadow:
    0 1px 1px rgba(40, 30, 10, 0.08),
    0 8px 16px -8px rgba(40, 30, 10, 0.4);
}

.polaroid img {
  display: block;
  width: 100%;
  aspect-ratio: 1;                   /* square, like real instant film */
  object-fit: cover;                 /* crop instead of squish */
  background: #d8d3c6;
  filter: saturate(0.82) contrast(1.05) sepia(0.08);
}

.polaroid figcaption {
  padding: 0.5rem 0.25rem 1rem;
  min-height: 3.4rem;                /* the thick bottom border of the film */
  font-family: var(--font-hand);
  font-size: 1.6rem;
  line-height: 1;
  text-align: center;
  color: var(--pen-blue);
  text-shadow: none;
}

/* The tape strip. clip-path gives it torn, uneven ends. */
.polaroid::before {
  content: "";
  position: absolute;
  top: -0.85rem;
  left: 50%;
  width: 6.25rem;
  height: 1.8rem;
  transform: translateX(-50%) rotate(calc(var(--tilt) * -1.4 + 1deg));
  background: var(--tape);
  mix-blend-mode: multiply;
  clip-path: polygon(0 6%, 4% 0, 96% 4%, 100% 0, 97% 26%, 100% 52%, 97% 76%, 100% 100%, 4% 96%, 0 100%, 3% 72%, 0 48%, 3% 24%);
  z-index: 1;
}

.exhibit {
  display: block;
  margin-bottom: 0.15rem;
  font-family: var(--font-typed);
  font-size: var(--step--1);
  color: var(--ribbon-red);
}


/* 7. EVIDENCE BOARD (art grid) -------------------------------
   auto-fill makes as many columns as fit; min() keeps a single
   column from overflowing very narrow phones.                 */
.evidence-board {
  list-style: none;
  padding: 0;
  margin: 2.75rem 0 1rem;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr));
  gap: 3.25rem 2.25rem;
}

/* :nth-child() varies the angles so the board looks hand-placed */
.evidence-board li:nth-child(3n + 1) .polaroid { --tilt: -2.5deg; }
.evidence-board li:nth-child(3n + 2) .polaroid { --tilt: 1.75deg; top: 0.6rem; }
.evidence-board li:nth-child(3n)     .polaroid { --tilt: -0.75deg; }

.evidence-board--recent { grid-template-columns: repeat(3, 1fr); }

.section-foot { margin-top: 1.5rem; }


/* 8. CASE LOG (blog) ----------------------------------------- */
.log { list-style: none; padding: 0; }
.log li { margin-bottom: 1.75rem; }
.log time { display: block; color: var(--ink-soft); font-size: var(--step--1); }
.log h3 { margin: 0.1rem 0 0.35rem; }
.log p { margin: 0; }

.entry__meta { color: var(--ink-soft); margin-bottom: 0.25rem; }
.entry h1 { font-size: var(--step-3); margin-bottom: 2rem; }
.entry .polaroid { max-width: 18rem; margin: 2.5rem auto 2.75rem; }


/* 9. FOOTER, FOCUS, SMALL SCREENS ---------------------------- */
.page-foot { color: var(--ink-soft); font-size: var(--step--1); }
.page-foot p { margin-bottom: 0.4rem; }

:focus-visible {
  outline: 2px dashed var(--ribbon-red);
  outline-offset: 3px;
}

@media (max-width: 40rem) {
  .sheet { padding: 1.75rem 1.25rem 3rem; }

  .intake { grid-template-columns: 1fr; }
  .intake .polaroid { width: 12rem; margin: 0.5rem auto 0; }

  .evidence-board--recent { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; }
  .evidence-board--recent li:nth-child(3) { display: none; }
}