/* Take the Turkey Out — an American holiday magazine spread, about 1958.
 *
 * Ported from the Figma Make comp. The tokens, the masthead band, the
 * scalloped mask, the grain overlay and the mis-registration trick are its
 * work; what changed on the way in is that this is plain CSS rather than
 * Tailwind, and that the page has to carry the things the comp did not know
 * about — the language switcher, the related-tools row, the consent bar and
 * the real share buttons.
 *
 * The one rule this file keeps: nothing here is grey.
 */

:root {
  --cream: #f0e2bd;
  --card: #fdf6e3;
  --cranberry: #791428;
  --cranberry-lt: #9e2038;
  --orange: #c04818;
  --gold: #9e6e14;
  --gold-lt: #c89830;
  --green: #2a5535;
  --ink: #1a0e06;
  --ink-lt: #3d2710;

  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --body: "Lora", Georgia, "Palatino Linotype", Palatino, serif;

  --wrap: 680px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* Paper grain over everything. It is most of the reason the flat fills stop
   reading as flat fills.
   The comp blended this layer with mix-blend-mode: multiply. At 5% over a
   dark grain, plain alpha is indistinguishable and does not make a fixed
   full-viewport element a blend source, which is the shape of thing that
   costs on scroll. Not measured here — a cheaper construction for the same
   result, taken on principle rather than on evidence. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='.55'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: no-preference) {
  .animate-in { animation: rise 0.45s ease both; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

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

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

/* ---- the masthead ---------------------------------------------------- */

.head {
  position: relative;
  overflow: hidden;
  background: var(--cranberry);
  color: var(--cream);
}
/* Faint horizontal ruling, as if the block ink were laid down by a press
   that was not quite clean. */
.head::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg, transparent 0 2px, rgba(192, 72, 24, 0.08) 2px 3px);
}
.head .wrap { position: relative; }

.rule-top, .rule-bot { display: block; }
.rule-top { padding-top: 24px; }
.rule-bot { padding-bottom: 26px; }
.rule-top i, .rule-bot i { display: block; }
.rule-top i:first-child { height: 2px; background: var(--gold-lt); }
.rule-top i:last-child  { height: 1px; background: var(--gold); margin-top: 5px; opacity: 0.6; }
.rule-bot i:first-child { height: 1px; background: var(--gold); opacity: 0.6; }
.rule-bot i:last-child  { height: 2px; background: var(--gold-lt); margin-top: 5px; }

.eyebrow {
  margin: 16px 0 10px;
  font-family: var(--display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-align: center;
  color: var(--gold-lt);
}
.eyebrow::before { content: "\2726\FE0E  "; }
.eyebrow::after  { content: "  \2726\FE0E"; }

.masthead { display: flex; gap: 32px; align-items: flex-start; }
.masthead-text { flex: 1 1 auto; min-width: 0; }

h1 {
  margin: 0 0 16px;
  font-family: var(--display);
  font-size: clamp(2rem, 7vw, 3.5rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--cream);
}
/* The mis-registration: one word printed a hair off in the second ink. */
h1 em {
  font-style: italic;
  color: var(--gold-lt);
  text-shadow: 2px 1.5px 0 rgba(192, 72, 24, 0.5);
}

.tagline {
  margin: 0 0 24px;
  max-width: 24em;
  font-size: 0.97rem;
  line-height: 1.7;
  color: rgba(240, 226, 189, 0.85);
}

.bird { flex: 0 0 auto; width: 160px; opacity: 0.92; }
.bird svg { display: block; width: 100%; height: auto; }
@media (max-width: 560px) { .bird { display: none; } }

/* ---- the form -------------------------------------------------------- */

.ask { margin: 36px 0 0; }

.field { margin: 0; padding: 24px 0 28px; border-bottom: 1px solid var(--gold); }
.field:last-child { border-bottom: 0; padding-bottom: 0; }

.field label, .methods legend {
  display: block;
  margin: 0 0 8px;
  padding: 0;
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
}

input[type="text"], input[type="datetime-local"] {
  width: 100%;
  border: 0;
  border-bottom: 2px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.15rem;
  padding: 6px 4px 4px;
  caret-color: var(--cranberry);
  transition: border-color 0.15s;
}
input:focus { border-bottom-color: var(--cranberry); }
input:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
::placeholder { color: var(--gold); opacity: 0.6; font-style: italic; }
input[type="datetime-local"] { max-width: 340px; }
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(0.4) sepia(1) hue-rotate(320deg) saturate(3);
  cursor: pointer;
}

.weigh { display: flex; align-items: flex-end; gap: 12px; }
.weigh input { max-width: 170px; font-size: 1.6rem; font-weight: 600; }

.units { display: flex; margin-bottom: 4px; border: 1.5px solid var(--ink); }
.unit {
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 6px 15px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.unit.is-on { background: var(--ink); color: var(--cream); }
.unit:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.methods { border: 0; margin: 0; padding: 24px 0 0; }
.methods legend { margin-bottom: 14px; }
.method-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .method-row { grid-template-columns: 1fr; } }

.method {
  display: block;
  border: 2px solid var(--ink-lt);
  padding: 16px 20px;
  cursor: pointer;
  background: transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.method input { position: absolute; opacity: 0; pointer-events: none; }
.method-name {
  display: block;
  margin-bottom: 4px;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
}
.method-note { display: block; font-size: 0.8rem; font-style: italic; opacity: 0.78; }
.method:hover { border-color: var(--cranberry); }
.method:has(input:checked) {
  background: var(--cranberry);
  border-color: var(--cranberry);
  color: var(--cream);
}
.method:has(input:focus-visible) { outline: 2px solid var(--orange); outline-offset: 3px; }

/* ---- the answer ------------------------------------------------------ */

.answer { margin: 40px 0 8px; }

/* The mask eats a box-shadow, so the shadow goes on the wrapper as a filter. */
.card-wrap { filter: drop-shadow(2px 8px 28px rgba(26, 14, 6, 0.38)); }

/* Scalloped top and bottom, cut out of the card rather than drawn on it. The
   4px top border survives as the coloured nubs between the notches, which is
   where each state gets its colour. */
.card {
  --r: 13px;
  --d: 26px;
  background: var(--card);
  padding: 44px 36px;
  -webkit-mask:
    radial-gradient(circle at 50% 0%,   transparent calc(var(--r) - 1px), #000 var(--r)) 0 0    / var(--d) var(--r) repeat-x,
    radial-gradient(circle at 50% 100%, transparent calc(var(--r) - 1px), #000 var(--r)) 0 100% / var(--d) var(--r) repeat-x,
    linear-gradient(#000, #000) 0 var(--r) / 100% calc(100% - var(--r) * 2) no-repeat;
  -webkit-mask-composite: source-over;
  mask:
    radial-gradient(circle at 50% 0%,   transparent calc(var(--r) - 1px), #000 var(--r)) 0 0    / var(--d) var(--r) repeat-x,
    radial-gradient(circle at 50% 100%, transparent calc(var(--r) - 1px), #000 var(--r)) 0 100% / var(--d) var(--r) repeat-x,
    linear-gradient(#000, #000) 0 var(--r) / 100% calc(100% - var(--r) * 2) no-repeat;
  mask-composite: add;
  border-top: 4px solid var(--gold-lt);
}
.card.is-fridge { border-top-color: var(--green); }
.card.is-water  { border-top-color: var(--orange); }
.card.is-late   { border-top-color: var(--gold); }
.card.is-frozen { border-top-color: var(--cranberry); }
.card.is-empty  { border-top-color: var(--gold-lt); text-align: center; }

.card-kicker {
  margin: 0 0 16px;
  font-family: var(--display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.card-kicker::before { content: "\2726\FE0E  "; }
.card-kicker::after  { content: "  \2726\FE0E"; }
.card.is-fridge .card-kicker { color: var(--green); }
.card.is-water  .card-kicker { color: var(--orange); }
.card.is-frozen .card-kicker { color: var(--cranberry); }

.card-head {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: clamp(1.4rem, 4.5vw, 2.2rem);
  font-weight: 900;
  line-height: 1.2;
  color: var(--ink);
}
.card-head em { font-style: italic; color: var(--cranberry); }
.card.is-empty .card-head { font-size: clamp(1.5rem, 5vw, 2.4rem); }

.card-sub { margin: 0 0 8px; font-size: 0.97rem; line-height: 1.65; color: var(--ink-lt); }
.card-sub strong { font-weight: 700; color: var(--cranberry); }
.card.is-empty .card-sub { font-size: 0.92rem; font-style: italic; color: var(--green); }

.card-note {
  margin: 0;
  font-size: 0.89rem;
  line-height: 1.65;
  font-style: italic;
  color: var(--green);
}
.card-sub:empty, .card-note:empty { display: none; }

/* The comp's ornament was ❧ ✦ ❧. U+2767 has emoji presentation in Chrome and
   comes back as a small colour picture even with U+FE0E after it, so the
   fleurons are drawn as gold rules instead and only the four-pointed star,
   which does honour the text selector, is a character. */
.card-orn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 24px 0 0;
  color: var(--gold);
  font-size: 0.9rem;
}
.card-orn i { display: block; width: 46px; height: 1px; background: currentColor; opacity: 0.7; }

/* ---- the timeline ---------------------------------------------------- */

/* The span between now and dinner is the thing people are anxious about, and
   it was only ever described in words. */
.timeline { margin: 28px 0 4px; user-select: none; }
.timeline[hidden] { display: none; }

/* The comp drew the thaw stretch in the track's own colour at 35%, which is
   invisible. Pale track, solid stretch: the bar then says which part of the
   wait is the bird thawing rather than just marking three moments. */
.tl-track { position: relative; height: 3px; background: rgba(158, 110, 20, 0.28); }
.tl-fill { position: absolute; top: 0; bottom: 0; right: 0; background: var(--gold-lt); }
.tl-dot {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  border: 2px solid currentColor;
  border-radius: 50%;
  background: var(--card);
}
.tl-now, .tl-end { color: var(--green); }
.tl-out { color: var(--cranberry); }

.tl-labels { position: relative; height: 38px; margin-top: 14px; }
.tl-label { position: absolute; white-space: nowrap; }
.tl-label b {
  display: block;
  font-family: var(--display);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
}
.tl-label i { font-size: 0.66rem; font-style: italic; color: var(--ink-lt); }
.tl-l-now { left: 0; text-align: left; }
.tl-l-end { right: 0; text-align: right; }
.tl-l-out { text-align: center; transform: translateX(-50%); }
.tl-labels.is-tight { height: 96px; }
.tl-labels.is-tight .tl-l-out { top: 52px; }
.tl-l-out b { color: var(--cranberry); }

.source {
  margin: 0 0 40px;
  text-align: center;
  font-size: 0.76rem;
  font-style: italic;
  line-height: 1.7;
  color: var(--green);
}

/* ---- the sidebar sections -------------------------------------------- */

.deep { margin: 48px 0 32px; }

.gold-rule { position: relative; height: 3px; background: var(--gold); margin: 0 0 20px; }
.gold-rule::after {
  content: "";
  position: absolute;
  top: 5px; left: 0; right: 0;
  height: 1px;
  background: var(--gold-lt);
}

.deep-eyebrow {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green);
}
.deep-head {
  margin: 0 0 20px;
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--cranberry);
}

.deep-item { border-bottom: 1px solid var(--gold); }
.deep-item > summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--cranberry);
}
.deep-item > summary::-webkit-details-marker { display: none; }
.deep-item > summary h2 { display: inline; margin: 0; font: inherit; }
.deep-item > summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 1.15rem;
  color: var(--gold);
}
.deep-item[open] > summary::after { content: "−"; }

.deep-body { max-width: 560px; padding: 0 0 16px; font-size: 0.9rem; line-height: 1.75; color: var(--ink-lt); }
.deep-body p { margin: 0 0 12px; }
.deep-body p:last-child { margin-bottom: 0; }
.deep-body a { color: var(--orange); }

/* ---- sharing, related, footer ---------------------------------------- */

.share { margin: 0; padding: 24px 0 0; border-top: 1px solid var(--gold); text-align: center; }
.share[hidden] { display: none; }
.share-heading {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cranberry);
}
.share-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.share-btn {
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: 0;
  padding: 8px 18px;
  font-family: var(--display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: var(--cream);
  background: var(--brand, var(--cranberry));
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.share-btn:hover, .share-btn:focus-visible { transform: translateY(-2px); filter: brightness(1.1); }
.share-copy, .share-more {
  color: var(--cranberry);
  background: transparent;
  box-shadow: inset 0 0 0 2px currentColor;
}
.share-copy.done { color: var(--cream); background: var(--green); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .share-btn { transition: none; } }

.more-tools { margin: 40px 0 0; padding-top: 24px; border-top: 1px solid var(--gold); }
.more-tools h2 {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green);
}
.more-tools ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
@media (min-width: 620px) { .more-tools ul { grid-template-columns: repeat(3, 1fr); } }
.more-tools a {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--cranberry);
  text-decoration: none;
}
.more-tools a:hover { text-decoration: underline; }
.more-tools span { display: block; font-size: 0.8rem; font-style: italic; color: var(--ink-lt); }

footer {
  margin: 40px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(158, 110, 20, 0.35);
  text-align: center;
}
.foot-nav { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin: 0 0 12px; }
footer a, footer .lang-switcher a {
  font-family: var(--display);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  text-decoration: none;
}
footer a:hover { color: var(--cranberry); }
footer p { margin: 0; font-size: 0.78rem; font-style: italic; color: var(--ink-lt); }

@media (max-width: 560px) {
  .wrap { padding: 0 18px; }
  .card { padding: 34px 22px; }
}

/* On a phone there is not enough track for three labels in a row, whatever
   the marker's position, so the middle one always takes the second row. The
   inline styles JS sets are left/transform only, so this wins on top. */
@media (max-width: 520px) {
  .tl-labels, .tl-labels.is-tight { height: 96px; }
  .tl-l-out { top: 52px; }
}