/* ==========================================================================
   stevencaputo.com — Cucina dei Ribelli
   Dark academic splash. No JavaScript, no external fonts, no trackers.
   ========================================================================== */

:root {
  /* --- Ink & parchment ------------------------------------------------- */
  --ink-900: #080706;
  --ink-800: #0d0b09;
  --ink-700: #14110d;
  --ink-600: #1e1913;

  --parchment:      #e9e0cb;
  --parchment-dim:  #c4b89c;
  --parchment-mid:  #b8ac91;
  --parchment-low:  #8a8069;

  --gold-hi:  #e3c583;
  --gold:     #c9a24a;
  --gold-low: #8a6c2c;

  --oxblood:  #6d2b26;

  /* --- The splash photograph -------------------------------------------
     First URL wins. Drop a local file at assets/img/hero.jpg (via FTP) and
     it takes over automatically; until then the Bluesky original shows.

     Swap in any of these for a different bake:
       Altamura semolina  bafkreiakv5o6relfo3g4qbojkybpddkmuwwyuefmejzvgq4vfex7nukhfi
       Focaccia "promised land"
                          bafkreigpynh4xvfay7a4exfumfvmd53flncq25ldpevxcihzav7icv7udq
       Cocoa + tart cherry
                          bafkreifi27gmzdkmfdquslibkjsgecn3e6tfiwtw35x7bcmxlq2qrsa7ve
       Tomato + Calabrian chili focaccia
                          bafkreiaikdwfiokcztc2rltnukjgguu5h3xqcnhwqtr3mtkqnido7lmtoy
       Leonar-dough da Vinci, 3 months cold
                          bafkreiejnitx3fzjzblhzug5mq5grdjfketyp7yoarxiktrboex4qtftnm
     -------------------------------------------------------------------- */
  --hero-local:  url("/assets/img/hero.jpg");
  --hero-remote: url("https://cdn.bsky.app/img/feed_fullsize/plain/did:plc:nm6fjc64ioi4hcrpea2mu43i/bafkreiakv5o6relfo3g4qbojkybpddkmuwwyuefmejzvgq4vfex7nukhfi");

  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino,
                  "Book Antiqua", Georgia, "Times New Roman", serif;

  --measure: 34rem;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--ink-900);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--ink-800);
  color: var(--parchment);
  font-family: var(--font-display);
  font-size: 100%;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.filters { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --------------------------------------------------------------------------
   The plate — full-bleed engraved splash
   -------------------------------------------------------------------------- */

.plate {
  position: relative;
  isolation: isolate;              /* contain the blend stack */
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: clamp(1.5rem, 5vw, 4rem);
  background: var(--ink-800);
}

.plate > div[aria-hidden="true"],
.plate__photo {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* 1 — the photograph, pushed toward a high-contrast plate ------------------ */
.plate__photo {
  background-image: var(--hero-local), var(--hero-remote);
  background-size: cover;
  background-position: 50% 45%;
  background-repeat: no-repeat;
  background-color: var(--ink-700);
  filter: grayscale(1) contrast(1.55) brightness(0.62);
  transform: scale(1.03);          /* hides filter edge softening */
  z-index: 0;
}

/* 2 — engraver's hatching -------------------------------------------------- */
.plate__hatch {
  z-index: 1;
  mix-blend-mode: overlay;
  opacity: 0.34;
  background-image:
    repeating-linear-gradient(
      48deg,
      rgba(255, 255, 255, 0.16) 0px,
      rgba(255, 255, 255, 0.16) 0.5px,
      transparent 0.5px,
      transparent 3px
    ),
    repeating-linear-gradient(
      -42deg,
      rgba(0, 0, 0, 0.22) 0px,
      rgba(0, 0, 0, 0.22) 0.5px,
      transparent 0.5px,
      transparent 5px
    );
}

/* 3 — gold duotone --------------------------------------------------------- */
.plate__duotone {
  z-index: 2;
  mix-blend-mode: color;
  opacity: 0.92;
  background-image: linear-gradient(
    165deg,
    #3a2c14 0%,
    var(--gold-low) 38%,
    var(--gold) 62%,
    #4a3418 100%
  );
}

/* 4 — paper grain ---------------------------------------------------------- */
.plate__grain {
  z-index: 3;
  mix-blend-mode: soft-light;
  opacity: 0.5;
  background-color: #808080;
  filter: url(#grain);
}

/* 5 — vignette, so the type always has ground to sit on -------------------- */
.plate__vignette {
  z-index: 4;
  background:
    radial-gradient(
      120% 92% at 50% 42%,
      rgba(8, 7, 6, 0.10) 0%,
      rgba(8, 7, 6, 0.55) 46%,
      rgba(8, 7, 6, 0.88) 78%,
      rgba(8, 7, 6, 0.97) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(8, 7, 6, 0.72) 0%,
      rgba(8, 7, 6, 0.18) 30%,
      rgba(8, 7, 6, 0.40) 66%,
      rgba(8, 7, 6, 0.92) 100%
    );
}

/* 6 — the ruled frame ------------------------------------------------------ */
.plate__frame {
  z-index: 5;
  inset: clamp(0.75rem, 2.4vw, 1.75rem);
  border: 1px solid rgba(201, 162, 74, 0.30);
  outline: 1px solid rgba(201, 162, 74, 0.13);
  outline-offset: 5px;
}

/* --------------------------------------------------------------------------
   Content
   -------------------------------------------------------------------------- */

.plate__content {
  position: relative;
  z-index: 10;
  max-width: var(--measure);
  padding: clamp(1rem, 4vw, 2.5rem);
  text-align: center;
  animation: rise 1100ms cubic-bezier(0.16, 0.84, 0.32, 1) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.overline {
  margin: 0 0 clamp(1.1rem, 3vw, 1.9rem);
  font-size: clamp(0.66rem, 1.5vw, 0.78rem);
  font-style: italic;
  font-variant: small-caps;
  letter-spacing: 0.42em;
  text-indent: 0.42em;             /* balance the trailing tracking */
  text-transform: lowercase;
  color: var(--gold-hi);
  opacity: 0.86;
}

.wordmark {
  margin: 0;
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: 0.02em;
  color: var(--parchment);
  text-shadow: 0 1px 24px rgba(8, 7, 6, 0.85);
}

.wordmark__given,
.wordmark__family { display: block; }

.wordmark__given {
  font-size: clamp(2.1rem, 8.2vw, 4.1rem);
  font-style: italic;
  letter-spacing: 0.005em;
  color: var(--parchment-dim);
}

.wordmark__family {
  font-size: clamp(2.9rem, 12.5vw, 6.4rem);
  font-variant: small-caps;
  letter-spacing: 0.07em;
  text-indent: 0.07em;
}

.fleuron {
  margin: clamp(1.1rem, 3vw, 1.7rem) 0 clamp(1.2rem, 3vw, 1.8rem);
  line-height: 0;
}

.fleuron svg {
  width: min(240px, 62%);
  height: auto;
  stroke: var(--gold);
  stroke-width: 1;
  fill: var(--gold);
  opacity: 0.72;
}

/* --- Epigraph: the starter gets the last word ----------------------------- */

.epigraph {
  margin: 0;
}

.tagline {
  margin: 0;
  font-size: clamp(1.18rem, 3.6vw, 1.62rem);
  font-style: italic;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--parchment);
  text-shadow: 0 1px 16px rgba(8, 7, 6, 0.8);
  text-wrap: balance;
}

.attribution {
  margin-top: clamp(0.7rem, 2vw, 1rem);
  font-size: clamp(0.76rem, 1.9vw, 0.88rem);
  font-style: italic;
  letter-spacing: 0.13em;
  color: var(--gold-hi);
  opacity: 0.9;
  text-shadow: 0 1px 14px rgba(8, 7, 6, 0.85);
}

.subtitle {
  margin: 0 auto;
  max-width: 30rem;
  font-size: clamp(0.86rem, 2.2vw, 0.98rem);
  line-height: 1.72;
  color: var(--parchment-mid);
  text-shadow: 0 1px 14px rgba(8, 7, 6, 0.8);
}

.subtitle em {
  color: var(--gold-hi);
  font-style: italic;
}

/* --- The way in ----------------------------------------------------------- */

.portal {
  display: block;
  width: min(23rem, 88%);
  margin: clamp(1.7rem, 4.5vw, 2.6rem) auto 0;
  padding: 1.15rem 1.4rem 1rem;
  text-align: center;
  text-decoration: none;
  color: var(--parchment);
  border: 1px solid rgba(201, 162, 74, 0.42);
  outline: 1px solid rgba(201, 162, 74, 0.14);
  outline-offset: 4px;
  background: linear-gradient(180deg, rgba(201, 162, 74, 0.07), transparent 70%);
  transition: border-color 300ms ease, background 300ms ease, transform 300ms ease;
}

.portal:hover,
.portal:focus-visible {
  border-color: var(--gold-hi);
  background: linear-gradient(180deg, rgba(201, 162, 74, 0.17), rgba(201, 162, 74, 0.04) 70%);
  transform: translateY(-2px);
}
.portal:focus-visible { outline-color: var(--gold); }

/* Sits over the top rule and punches a gap in it. */
.portal__mark {
  display: block;
  width: 2.2rem;
  margin: -1.75rem auto 0.55rem;
  font-size: 1rem;
  line-height: 1;
  color: var(--gold);
  background: var(--ink-800);
}

.portal__title {
  display: block;
  font-size: clamp(1.06rem, 3vw, 1.3rem);
  font-variant: small-caps;
  letter-spacing: 0.22em;
  line-height: 1.2;
  color: var(--gold-hi);
}

.portal__sub {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.74rem;
  font-style: italic;
  letter-spacing: 0.08em;
  color: var(--parchment-low);
}

/* --- Elsewhere ------------------------------------------------------------ */

.marks {
  margin-top: clamp(1.9rem, 5vw, 2.7rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.marks__sep { color: var(--gold-low); }

.mark {
  position: relative;
  padding: 0.3em 0.1em;
  font-size: clamp(0.7rem, 1.7vw, 0.8rem);
  font-variant: small-caps;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-decoration: none;
  color: var(--gold-hi);
  transition: color 220ms ease;
}

.mark::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.22em;
  bottom: 0.16em;
  height: 1px;
  background: currentColor;
  opacity: 0.34;
  transform: scaleX(0.999);
  transform-origin: center;
  transition: opacity 220ms ease;
}

.mark:hover,
.mark:focus-visible { color: #f3e2b6; }
.mark:hover::after,
.mark:focus-visible::after { opacity: 1; }

.mark:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 5px;
}

/* --- Colophon ------------------------------------------------------------- */

.colophon {
  margin: clamp(2.4rem, 6vw, 3.4rem) 0 0;
  font-size: clamp(0.64rem, 1.5vw, 0.72rem);
  font-style: italic;
  letter-spacing: 0.14em;
  color: var(--parchment-low);
  opacity: 0.75;
}

.colophon__rule {
  display: block;
  width: 46px;
  height: 1px;
  margin: 0 auto 1.05rem;
  background: linear-gradient(
    to right,
    transparent,
    rgba(201, 162, 74, 0.55),
    transparent
  );
}

/* --------------------------------------------------------------------------
   Conditions
   -------------------------------------------------------------------------- */

/* Short landscape phones: keep everything on one screen. */
@media (max-height: 560px) and (orientation: landscape) {
  .plate { min-height: auto; padding-block: 2.5rem; }
  .colophon { margin-top: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .plate__content { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* Graceful on displays that can't blend — drop the duotone rather than
   leave a flat gold sheet over the photograph. */
@supports not (mix-blend-mode: color) {
  .plate__duotone { opacity: 0; }
  .plate__photo { filter: sepia(0.55) contrast(1.35) brightness(0.66); }
}

@media print {
  .plate > div[aria-hidden="true"], .plate__photo { display: none; }
  body { background: #fff; color: #000; }
  .plate__content { animation: none; }
}

/* --------------------------------------------------------------------------
   Bare plate (404) — no photograph, so give it a lit ground of its own
   -------------------------------------------------------------------------- */

.plate--bare {
  background:
    radial-gradient(90% 70% at 50% 34%, #1b1610 0%, var(--ink-800) 58%, var(--ink-900) 100%);
}

.plate--bare .wordmark__family {
  font-size: clamp(2.2rem, 9vw, 4.2rem);
}