/* julianandmolly.com — a woodcut broadside */

:root {
  --paper:      #f2e9db;
  --ink:        #211c17;
  --ink-soft:   #5b5046;
  --red:        #bc4630;
  --red-text:   #a33823;
  --gold:       #d19a34;
  --green:      #3d6b55;

  --measure: 46rem;
  --serif: "IM Fell English", "Hoefler Text", Georgia, serif;
  --caps:  "IM Fell English SC", "IM Fell English", Georgia, serif;
  --wood:  "Rye", "IM Fell English SC", Georgia, serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #1a1511;
    --ink:        #efe2cd;
    --ink-soft:   #b3a48e;
    --red:        #d9634a;
    --red-text:   #d9634a;
    --gold:       #dcab4c;
    --green:      #6ba184;
  }
}
:root[data-theme="dark"] {
  --paper:      #1a1511;
  --ink:        #efe2cd;
  --ink-soft:   #b3a48e;
  --red:        #d9634a;
  --red-text:   #d9634a;
  --gold:       #dcab4c;
  --green:      #6ba184;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: clamp(1rem, 4vw, 3.5rem) clamp(0.75rem, 3vw, 2rem);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.02rem, 0.94rem + 0.4vw, 1.2rem);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

/* Press grain over everything */
.grain {
  position: fixed;
  inset: -50%;
  pointer-events: none;
  z-index: 9;
  opacity: 0.4;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .grain { mix-blend-mode: screen; opacity: 0.16; }
}
:root[data-theme="dark"] .grain { mix-blend-mode: screen; opacity: 0.16; }

/* The printed sheet */
.broadside {
  position: relative;
  width: 100%;
  max-width: var(--measure);
  padding: clamp(2rem, 5vw, 3.4rem) clamp(1.1rem, 4vw, 3.4rem) clamp(1.8rem, 4vw, 2.8rem);
  background: var(--paper);
  text-align: center;
}

/* Type */
.eyebrow {
  margin: 0 0 clamp(0.9rem, 2.5vw, 1.4rem);
  font-family: var(--wood);
  font-size: clamp(0.66rem, 0.6rem + 0.35vw, 0.82rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.eyebrow .pip {
  font-size: 0.62em;
  color: var(--red);
  vertical-align: 0.18em;
  margin: 0 0.35em;
  letter-spacing: 0;
}

.names {
  margin: 0;
  font-family: var(--caps);
  font-weight: 400;
  font-size: clamp(2.9rem, 1.5rem + 7vw, 5.6rem);
  line-height: 0.94;
  letter-spacing: 0.035em;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.names .name { display: block; }
.names .amp {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.52em;
  line-height: 1;
  color: var(--red);
  margin: 0.06em 0 0.02em;
}

.emblem-wrap {
  margin: clamp(0.6rem, 2vw, 1.4rem) auto clamp(0.4rem, 1.5vw, 1rem);
  max-width: 36rem;
}
.emblem { display: block; width: 100%; height: auto; overflow: visible; }

/* Woodcut ink roles */
.f-ink   { fill: var(--ink); }
.f-paper { fill: var(--paper); }
.f-red   { fill: var(--red); }
.f-gold  { fill: var(--gold); }
.f-green { fill: var(--green); }
.s-ink   { stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }
.s-paper { stroke: var(--paper); stroke-linecap: round; stroke-linejoin: round; }
.rays    { transform-origin: 320px 96px; animation: turn 240s linear infinite; }
@keyframes turn { to { transform: rotate(360deg); } }

.lede {
  margin: 0 auto;
  max-width: 30rem;
  font-size: clamp(1.12rem, 1rem + 0.6vw, 1.42rem);
  line-height: 1.55;
  text-wrap: balance;
}

/* Let the sentence find its own breaks on narrow screens. */
@media (max-width: 34rem) {
  .lede .wide-only { display: none; }
}

.band {
  margin: clamp(1.3rem, 3.5vw, 2rem) auto clamp(1rem, 2.5vw, 1.3rem);
  max-width: 22rem;
}
.band svg { display: block; width: 100%; height: auto; }

.coda {
  margin: 0;
  font-style: italic;
  font-size: clamp(0.9rem, 0.85rem + 0.25vw, 1.02rem);
  color: var(--ink-soft);
}

.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Entrance: the sheet comes off the press.
   Gated on .js so the page is never left invisible without scripting. */
.js .reveal {
  opacity: 0;
  animation: press 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: var(--d, 0ms);
}
@keyframes press {
  from { opacity: 0; transform: translateY(10px) scale(0.995); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; animation: none; }
  .rays { animation: none; }
}

@media print {
  body { background: #fff; padding: 0; }
  .grain { display: none; }
}

/* 404 */
.broadside--small { max-width: 34rem; }
.emblem-wrap--small { max-width: 12rem; margin-bottom: clamp(1rem, 3vw, 1.6rem); }
.names--small {
  display: block;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem);
  margin-bottom: clamp(0.9rem, 2.5vw, 1.3rem);
}
.link {
  color: var(--red-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
.link:hover { color: var(--ink); }