/* Demo 1: Redaksjonell. Nordic editorial: Zodiak display serif + Switzer text, paper and sand, brown accent.
   Shape rule: 2px corners on everything rectangular; icon controls, chips and toast are round. */

@font-face { font-family: "Zodiak"; src: url("../fonts/zodiak-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Zodiak"; src: url("../fonts/zodiak-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Zodiak"; src: url("../fonts/zodiak-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../fonts/switzer-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../fonts/switzer-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../fonts/switzer-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --bg: #f2ede5;
  --bg-2: #e9e1d5;
  --sand: #d8cbb7;
  --surface: #f7f3ed;
  --fg: #231e19;
  --muted: #6c6056;
  --line: rgb(35 30 25 / 0.14);
  --accent: #6b4a33;
  --accent-fg: #f7f3ed;
  --scrim: rgb(35 30 25 / 0.35);
  --font-display: "Zodiak", "Iowan Old Style", Georgia, serif;
  --font-text: "Switzer", system-ui, sans-serif;
  --r: 2px;
  --r-btn: 2px;
  --r-panel: 3px;
  --r-sm: 2px;
  --hd-h: 4.5rem;
  --ann-h: 2.25rem;
}

body { font-size: 1rem; }
em { font-style: italic; }
.eyebrow { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.2rem, 4.4vw, 4rem); line-height: 1.04; letter-spacing: -0.025em; }
.h2 em, .hero-title em { font-weight: 400; color: var(--accent); }
.h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1.1; letter-spacing: -0.015em; }
.lead { font-size: 1.125rem; line-height: 1.55; color: var(--muted); max-width: 40ch; }
.link-u { position: relative; display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 500; font-size: 0.95rem; padding-block: 0.3rem; }
.link-u::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: right; transition: transform 0.6s var(--ease); }
.link-u:hover::after { transform: scaleX(0); transform-origin: left; animation: relink 0.9s var(--ease) 0.25s forwards; }
@keyframes relink { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } }
.btn-primary .ph { font-size: 1rem; }

/* ---------- Announcement ---------- */
.announce { background: var(--fg); color: var(--bg); height: var(--ann-h); font-size: 0.8rem; letter-spacing: 0.02em; }
.announce-in { position: relative; height: 100%; display: grid; place-items: center; }
.announce-msg { grid-area: 1 / 1; display: flex; align-items: center; gap: 0.5rem; opacity: 0; transform: translateY(70%); transition: opacity 0.6s var(--ease), transform 0.8s var(--ease); }
.announce-msg.is-on { opacity: 1; transform: none; }
.announce-msg.is-out { opacity: 0; transform: translateY(-70%); }
.announce-msg .ph-light { font-size: 1rem; }

/* ---------- Header + mega menu ---------- */
.hd { position: sticky; top: 0; z-index: 40; transition: transform 0.6s var(--ease), background-color 0.4s, box-shadow 0.4s; }
.hd::before { content: ""; position: absolute; inset: 0; background: rgb(242 237 229 / 0.86); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); opacity: 0; transition: opacity 0.4s; }
.hd.is-scrolled::before, .hd.mega-open::before { opacity: 1; }
.hd.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.hd.is-hidden { transform: translateY(-100%); }
.hd-in { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--hd-h); }
.hd-nav { display: flex; align-items: center; gap: 0.25rem; margin-left: -0.75rem; }
.hd-link { display: inline-flex; align-items: center; gap: 0.3rem; height: 2.5rem; padding: 0 0.75rem; font-size: 0.925rem; font-weight: 500; position: relative; }
.hd-link .ph { font-size: 0.8rem; transition: transform 0.4s var(--ease); }
.hd-link[aria-expanded="true"] .ph { transform: rotate(180deg); }
.hd-link::after { content: ""; position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.45rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); }
.hd-link:hover::after, .hd-link[aria-expanded="true"]::after { transform: scaleX(1); }
.hd-burger { display: none; }
.hd-logo { justify-self: center; display: block; color: var(--fg); }
.hd-logo .logo { height: 1.6rem; width: auto; transition: height 0.5s var(--ease); }
.hd.is-scrolled .hd-logo .logo { height: 1.35rem; }
.logo .t-amp { fill: var(--accent); }
.logo .t-main { fill: currentColor; }
.hd-actions { justify-self: end; margin-right: -0.6rem; }

.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); box-shadow: 0 30px 60px rgb(35 30 25 / 0.08), 0 1px 0 var(--line) inset;
  clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path 0.7s var(--ease), visibility 0s 0.7s; }
.mega.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 0.7s var(--ease), visibility 0s; }
.mega-in { display: grid; grid-template-columns: 1fr 1fr 1.3fr 1.3fr; gap: 3rem; padding: 2.5rem 0 3rem; }
.mega-in > * { opacity: 0; transform: translateY(14px); transition: opacity 0.5s, transform 0.7s var(--ease); }
.mega.is-open .mega-in > * { opacity: 1; transform: none; }
.mega.is-open .mega-in > *:nth-child(2) { transition-delay: 0.05s; }
.mega.is-open .mega-in > *:nth-child(3) { transition-delay: 0.1s; }
.mega.is-open .mega-in > *:nth-child(4) { transition-delay: 0.15s; }
.mega-h { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }
.mega-col li a { display: inline-block; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.5; transition: color 0.2s, transform 0.4s var(--ease); }
.mega-col li a:hover { color: var(--accent); transform: translateX(6px); }
.mega-feat { display: grid; gap: 0.75rem; }
.mega-feat-img { overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--r); }
.mega-feat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.mega-feat:hover img { transform: scale(1.05); }
.mega-feat-t { font-size: 0.925rem; font-weight: 500; }

/* Mobile menu */
.menu { position: absolute; inset: 0 auto 0 0; width: min(100%, 24rem); background: var(--surface); padding: 1rem 1.5rem 2rem; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform 0.55s var(--ease); }
.ov.is-open .menu { transform: none; }
.menu-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.menu-h .logo { height: 1.3rem; width: auto; }
.menu-main li a { display: flex; justify-content: space-between; align-items: center; padding: 0.95rem 0; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: 1.6rem; }
.menu-foot { margin-top: auto; display: grid; gap: 0.9rem; font-size: 0.925rem; }
.menu-foot a { display: flex; gap: 0.6rem; align-items: center; }

/* ---------- Hero ---------- */
.hero { padding: clamp(1rem, 2.4vw, 2rem) 0 clamp(3rem, 6vw, 5rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 5vw, 5rem); align-items: stretch; }
.hero-copy { display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding-top: 0.5rem; }
.hero-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(3.2rem, 7.4vw, 7.6rem); line-height: 0.96; letter-spacing: -0.035em; max-width: 9.5ch; padding-bottom: 0.08em; }
.hero-title .line-mask { overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero-sub { margin-top: 1.75rem; font-size: 1.125rem; color: var(--muted); max-width: 36ch; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2rem; margin-top: 2.25rem; }
.hero-media { position: relative; height: min(calc(100dvh - var(--hd-h) - var(--ann-h) - 3rem), 56rem); aspect-ratio: 4 / 5; min-height: 30rem; }
.hero-frame { position: absolute; inset: 0; overflow: hidden; border-radius: var(--r); }
.hero-img { width: 100%; height: 112%; object-fit: cover; object-position: 50% 70%; }

.motion [data-hero-title] { visibility: hidden; }
.motion [data-hero-in], .motion .spot { opacity: 0; }
.motion [data-hero-frame] { clip-path: inset(100% 0 0 0); }
.hero-static [data-hero-title] { visibility: visible; }
.hero-static [data-hero-in], .hero-static .spot { opacity: 1; }
.hero-static [data-hero-frame] { clip-path: none; }

.spot { position: absolute; left: var(--x); top: var(--y); z-index: 2; }
.spot-dot { position: relative; width: 2rem; height: 2rem; margin: -1rem 0 0 -1rem; display: grid; place-items: center; border-radius: 50%; }
.spot-dot span { width: 0.85rem; height: 0.85rem; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 1px rgb(35 30 25 / 0.12), 0 4px 12px rgb(35 30 25 / 0.25); transition: transform 0.4s var(--ease); }
.spot-dot::before { content: ""; position: absolute; inset: 0.2rem; border-radius: 50%; border: 1px solid var(--surface); animation: ring 2.8s var(--ease) infinite; }
.spot:hover .spot-dot span, .spot.is-open .spot-dot span { transform: scale(1.3); }
@keyframes ring { 0% { transform: scale(0.6); opacity: 0.9; } 80%, 100% { transform: scale(1.6); opacity: 0; } }
.spot-card {
  position: absolute; top: 50%; left: 1.4rem; width: 17.5rem; display: grid; grid-template-columns: 3.5rem 1fr auto; gap: 0.75rem; align-items: center;
  padding: 0.6rem 0.6rem 0.6rem 0.6rem; background: rgb(247 243 237 / 0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: var(--r); box-shadow: 0 18px 40px rgb(35 30 25 / 0.18);
  opacity: 0; transform: translate(-6px, -50%); pointer-events: none; transition: opacity 0.3s, transform 0.5s var(--ease);
}
.spot-l .spot-card { left: auto; right: 1.4rem; transform: translate(6px, -50%); }
.spot:hover .spot-card, .spot.is-open .spot-card, .spot:focus-within .spot-card { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
.spot-card img { width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: var(--r); background: var(--sand); }
.spot-nm { font-size: 0.85rem; font-weight: 500; line-height: 1.25; }
.spot-pr { font-size: 0.8rem; color: var(--muted); }
.spot-add { width: 2.25rem; height: 2.25rem; background: var(--accent); color: var(--accent-fg); }
.spot-add:hover { background: var(--fg); }

/* ---------- USPs ---------- */
.usps { border-block: 1px solid var(--line); }
.usp-list { display: grid; grid-template-columns: repeat(4, 1fr); }
.usp-list li { display: flex; gap: 0.9rem; align-items: center; padding: 1.4rem 1.5rem 1.4rem 0; }
.usp-list li + li { padding-left: 1.5rem; border-left: 1px solid var(--line); }
.usp-list .ph-light { font-size: 1.75rem; color: var(--accent); flex: none; }
.usp-list p { display: grid; font-size: 0.875rem; line-height: 1.35; }
.usp-list strong { font-weight: 500; font-size: 0.925rem; }
.usp-list span { color: var(--muted); }

/* ---------- Manifesto ---------- */
.manifest { padding: clamp(6rem, 13vw, 12rem) 0; }
.manifest-in { position: relative; display: grid; grid-template-columns: 1fr minmax(0, 6fr) 1fr; }
.manifest-amp { grid-column: 1; justify-self: start; color: var(--sand); width: clamp(3rem, 6vw, 5.5rem); margin-top: 0.4rem; }
.manifest-amp .logo { width: 100%; height: auto; }
.manifest-amp .t-main { fill: currentColor; }
.manifest-text { grid-column: 2; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.9rem, 3.9vw, 3.6rem); line-height: 1.16; letter-spacing: -0.02em; text-wrap: pretty; }
.manifest-text .w { opacity: 0.16; transition: none; }
.manifest-link { grid-column: 2; justify-self: start; margin-top: 2.5rem; }

/* ---------- Categories ---------- */
.cats { padding-bottom: clamp(5rem, 10vw, 9rem); }
.cats .h2 { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.cat-grid { display: grid; grid-template-columns: 1.55fr 1fr; grid-template-rows: auto auto; gap: clamp(1rem, 2vw, 1.75rem); }
.cat { position: relative; display: grid; grid-template-rows: 1fr auto; gap: 1.1rem; }
.cat-0 { grid-row: span 2; }
.cat-img { position: relative; overflow: hidden; border-radius: var(--r); }
.cat-0 .cat-img { aspect-ratio: 4 / 4.4; }
.cat-1 .cat-img, .cat-2 .cat-img { aspect-ratio: 16 / 10; }
.cat-img img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; transition: scale 1.4s var(--ease); }
.cat:hover .cat-img img { scale: 1.04; }
.cat-txt { display: grid; grid-template-columns: 1fr auto; column-gap: 1.5rem; align-items: end; }
.cat-name { font-family: var(--font-display); font-size: clamp(1.5rem, 2.3vw, 2.25rem); line-height: 1.1; letter-spacing: -0.015em; }
.cat-short { grid-row: 2; color: var(--muted); font-size: 0.925rem; max-width: 42ch; margin-top: 0.3rem; }
.cat-go { grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; font-weight: 500; }
.cat-go .ph { transition: transform 0.5s var(--ease); }
.cat:hover .cat-go .ph { transform: translate(3px, -3px); }

/* ---------- Product rail ---------- */
.rail-sec { padding: clamp(4rem, 8vw, 7rem) 0; background: var(--bg-2); }
.rail-head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.rail-ctrl { display: flex; align-items: center; gap: 0.35rem; }
.rail-count { font-size: 0.875rem; color: var(--muted); margin-right: 0.75rem; }
.rail-btn { border: 1px solid var(--line); }
.rail-btn:disabled { opacity: 0.35; cursor: default; }
.rail { overflow: hidden; cursor: grab; padding-left: max(var(--pad), (100vw - var(--max)) / 2); }
.rail:active { cursor: grabbing; }
.rail-track { display: flex; gap: clamp(1rem, 1.6vw, 1.5rem); width: max-content; padding-right: var(--pad); will-change: transform; }
.pc { width: clamp(15rem, 22vw, 21rem); flex: none; }
.pc-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r); background: var(--sand); }
.pc-img { position: absolute; inset: 0; }
.pc-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.7s var(--ease), scale 1.2s var(--ease); -webkit-user-drag: none; user-select: none; }
.pc-b { opacity: 0; scale: 1.06; }
@media (hover: hover) {
  .pc:hover .pc-b { opacity: 1; scale: 1; }
  .pc:hover .pc-a { scale: 1.04; }
}
.pc-wish { position: absolute; top: 0.6rem; right: 0.6rem; background: rgb(247 243 237 / 0.85); }
.pc-add {
  position: absolute; left: 0.6rem; right: 0.6rem; bottom: 0.6rem; height: 2.9rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: var(--fg); color: var(--bg); border-radius: var(--r); font-size: 0.875rem; font-weight: 500;
  transform: translateY(calc(100% + 0.8rem)); transition: transform 0.55s var(--ease), background-color 0.2s;
}
.pc-add:hover { background: var(--accent); }
.pc:hover .pc-add, .pc-add:focus-visible { transform: none; }
@media (hover: none) { .pc-add { transform: none; left: auto; width: 2.9rem; padding: 0; } .pc-add span { display: none; } }
.pc-info { padding-top: 1rem; display: grid; gap: 0.2rem; }
.pc-name { font-size: 1rem; font-weight: 500; line-height: 1.3; }
.pc-meta { font-size: 0.85rem; color: var(--muted); display: flex; gap: 0.5rem; align-items: center; }
.pc-new { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.pc-price { font-size: 0.95rem; font-variant-numeric: tabular-nums; margin-top: 0.25rem; }
.rail-progress { position: relative; height: 1px; background: var(--line); margin-top: 2.5rem; overflow: hidden; }
.rail-progress span { position: absolute; inset: 0; background: var(--fg); transform-origin: left; transform: scaleX(var(--p, 0.15)); }

/* ---------- Baking ---------- */
.bake { padding: clamp(5rem, 10vw, 9rem) 0; }
.bake-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.bake-media { overflow: hidden; border-radius: var(--r); aspect-ratio: 3 / 2.2; position: relative; }
.bake-media img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; }
.bake-copy { display: grid; gap: 1.5rem; justify-items: start; }
.bake-list { display: grid; width: 100%; border-top: 1px solid var(--line); margin-top: 0.5rem; }
.bake-item { display: grid; grid-template-columns: 4.5rem 1fr auto; gap: 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.bake-thumb { width: 4.5rem; height: 4.5rem; display: grid; place-items: center; background: var(--bg-2); border-radius: var(--r); }
.bake-thumb img { max-width: 78%; max-height: 78%; width: auto; height: auto; object-fit: contain; background: none; filter: drop-shadow(0 6px 8px rgb(35 30 25 / 0.18)); }
.bake-txt { display: grid; }
.bake-nm { font-weight: 500; }
.bake-nm:hover { text-decoration: underline; text-underline-offset: 3px; }
.bake-pr { font-size: 0.875rem; color: var(--muted); }
.bake-add { --h: 2.5rem; padding: 0 1rem; font-size: 0.85rem; }

/* ---------- Materials accordion ---------- */
.mats { padding: 0 0 clamp(5rem, 10vw, 9rem); }
.mats-head { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.acc { display: flex; gap: 0.6rem; height: clamp(26rem, 38vw, 34rem); }
.acc-item { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: var(--r); text-align: left; color: #f7f3ed; transition: flex-grow 0.9s var(--ease); }
.acc-item.is-on { flex-grow: 4.2; }
.acc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 1.4s var(--ease); }
.acc-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(20 16 12 / 0) 35%, rgb(20 16 12 / 0.62)); }
.acc-item:not(.is-on):hover .acc-img { scale: 1.06; }
.acc-name { position: absolute; z-index: 1; left: 50%; bottom: 1.5rem; transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl; font-family: var(--font-display); font-size: 1.5rem; white-space: nowrap; transition: opacity 0.4s; }
.acc-item.is-on .acc-name { opacity: 0; }
.acc-body { position: absolute; z-index: 1; left: 1.75rem; right: 1.75rem; bottom: 1.75rem; display: grid; gap: 0.6rem; max-width: 30rem; opacity: 0; transform: translateY(12px); transition: opacity 0.4s, transform 0.6s var(--ease); }
.acc-item.is-on .acc-body { opacity: 1; transform: none; transition-delay: 0.35s; }
.acc-title { font-family: var(--font-display); font-size: clamp(2rem, 3.2vw, 3rem); line-height: 1; }
.acc-text { font-size: 1rem; line-height: 1.5; max-width: 34ch; }
.acc-care { display: flex; gap: 0.5rem; align-items: center; font-size: 0.85rem; opacity: 0.85; }

/* ---------- Quotes ---------- */
.quotes { padding: clamp(5rem, 9vw, 8rem) 0; background: var(--sand); }
.q-grid { display: grid; grid-template-columns: 1fr 2.6fr; gap: clamp(2rem, 6vw, 6rem); }
.q-side { display: grid; align-content: start; gap: 1rem; }
.q-stars { display: flex; gap: 0.15rem; color: var(--accent); }
.q-stars .ph-fill { font-size: 1.1rem; }
.q-ctrl { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; }
.q-ctrl .icon-btn { border: 1px solid rgb(35 30 25 / 0.2); }
.q-num { font-size: 0.85rem; min-width: 3rem; text-align: center; font-variant-numeric: tabular-nums; }
.q-stage { display: grid; }
.q { grid-area: 1 / 1; opacity: 0; transform: translateY(16px); transition: opacity 0.6s, transform 0.9s var(--ease); pointer-events: none; }
.q.is-on { opacity: 1; transform: none; pointer-events: auto; transition-delay: 0.15s; }
.q-text { font-family: var(--font-display); font-style: italic; font-size: clamp(1.7rem, 3.2vw, 2.9rem); line-height: 1.18; letter-spacing: -0.015em; max-width: 26ch; padding-bottom: 0.1em; }
.q-by { margin-top: 1.75rem; font-size: 0.925rem; }
.q-by strong { font-weight: 500; }
.q-by span { display: block; color: var(--muted); font-size: 0.85rem; margin-top: 0.15rem; }

/* ---------- Journal ---------- */
.journal { padding: clamp(5rem, 10vw, 9rem) 0; }
.j-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: clamp(2rem, 4vw, 3rem); }
.j-grid { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 5vw, 5rem); }
.j-feat { display: grid; gap: 0.75rem; align-content: start; }
.j-img { overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--r); margin-bottom: 0.75rem; }
.j-img img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.4s var(--ease); }
.j-feat:hover .j-img img { scale: 1.04; }
.j-meta { font-size: 0.8rem; color: var(--muted); letter-spacing: 0.02em; }
.j-title { font-family: var(--font-display); font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1.1; letter-spacing: -0.015em; }
.j-lead { color: var(--muted); max-width: 46ch; }
.j-list { border-top: 1px solid var(--line); align-self: start; }
.j-row { position: relative; display: grid; gap: 0.6rem; padding: 2rem 3rem 2rem 0; border-bottom: 1px solid var(--line); transition: padding 0.6s var(--ease); }
.j-row:hover { padding-left: 1rem; }
.j-thumb { display: none; }
.j-arrow { position: absolute; right: 0; top: 2rem; font-size: 1.5rem; transition: transform 0.5s var(--ease); }
.j-row:hover .j-arrow { transform: translate(4px, -4px); }
.j-float { position: absolute; left: 0; top: 0; width: 15rem; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); pointer-events: none; opacity: 0; scale: 0.85; z-index: 3; transition: opacity 0.35s, scale 0.6s var(--ease); box-shadow: 0 30px 60px rgb(35 30 25 / 0.2); }
.j-float.is-on { opacity: 1; scale: 1; }

/* ---------- Newsletter ---------- */
.news { position: relative; min-height: min(48rem, 92dvh); display: grid; align-items: center; overflow: hidden; }
.news-bg { position: absolute; inset: 0; }
.news-bg img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; object-position: 70% 45%; }
.news-in { position: relative; display: flex; justify-content: flex-start; padding-block: 4rem; }
.news-card { width: min(100%, 31rem); background: var(--surface); padding: clamp(2rem, 4vw, 3.25rem); border-radius: var(--r); display: grid; gap: 1.1rem; box-shadow: 0 40px 80px rgb(35 30 25 / 0.18); }
.news-card .h2 { font-size: clamp(2rem, 3.2vw, 2.9rem); }
.news-text { color: var(--muted); }
.nl { display: grid; gap: 0.5rem; margin-top: 0.5rem; }
.nl-label { font-size: 0.85rem; font-weight: 500; }
.nl-row { display: flex; gap: 0.5rem; }
.nl-input { flex: 1; min-width: 0; height: 3.1rem; padding: 0 1rem; border: 1px solid rgb(35 30 25 / 0.35); border-radius: var(--r); background: #fffdf9; font-size: 1rem; transition: border-color 0.2s, box-shadow 0.2s; }
.nl-input:focus { outline: none; border-color: var(--fg); box-shadow: 0 0 0 3px rgb(107 74 51 / 0.18); }
.nl-input[aria-invalid="true"] { border-color: #a23b2a; }
.nl-help { font-size: 0.8rem; color: var(--muted); }
.nl-err { font-size: 0.85rem; color: #9c3524; }
.nl-ok { display: flex; gap: 0.5rem; align-items: center; font-size: 0.95rem; color: var(--accent); font-weight: 500; }
.nl.is-done .nl-row, .nl.is-done .nl-help, .nl.is-done .nl-label { display: none; }

/* ---------- Footer ---------- */
.ft { background: var(--fg); color: #e9e1d5; padding: clamp(4rem, 8vw, 6.5rem) 0 2rem; font-size: 0.925rem; }
.ft a:hover { color: #fff; }
.ft-top { display: grid; grid-template-columns: 1.2fr 2.4fr; gap: clamp(2.5rem, 6vw, 6rem); padding-bottom: 3.5rem; }
.ft-brand { display: grid; align-content: start; gap: 1.25rem; }
.ft-logo { width: min(100%, 17rem); height: auto; color: var(--bg); }
.ft-logo .t-amp { fill: var(--sand); }
.ft-brand p { color: #b8ab9b; max-width: 30ch; }
.ft-social { display: flex; gap: 0.25rem; margin-left: -0.7rem; }
.ft-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.ft-h { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: #9d8f80; margin-bottom: 1rem; }
.ft-cols li { padding: 0.28rem 0; color: #d9cfc2; }
.ft-marks { display: flex; flex-wrap: wrap; gap: 2rem 4rem; padding: 2rem 0; border-block: 1px solid rgb(233 225 213 / 0.12); }
.ft-marks .marks { color: #d9cfc2; }
.ft-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; font-size: 0.8rem; color: #9d8f80; }
.ft-bottom ul { display: flex; gap: 1.5rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .hd-link, .mega { display: none; }
  .hd-burger { display: inline-grid; }
  .usp-list { grid-template-columns: repeat(2, 1fr); }
  .usp-list li:nth-child(3) { border-left: 0; padding-left: 0; }
  .usp-list li:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .ft-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 899px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { order: 2; }
  .hero-eyebrow { display: none; }
  .hero-media { height: auto; width: 100%; min-height: 0; aspect-ratio: 4 / 4.4; }
  .hero-title { font-size: clamp(3rem, 13vw, 5rem); }
  .spot-card { width: 14.5rem; }
  .manifest-in { grid-template-columns: 1fr; }
  .manifest-amp { margin-bottom: 1.5rem; }
  .manifest-text, .manifest-link { grid-column: 1; }
  .cat-grid { grid-template-columns: 1fr; }
  .cat-0 { grid-row: auto; }
  .cat-0 .cat-img { aspect-ratio: 4 / 4.4; }
  .bake-grid, .q-grid, .j-grid, .ft-top { grid-template-columns: 1fr; }
  .acc { flex-direction: column; height: auto; }
  .acc-item { flex: none; height: 4.5rem; transition: height 0.8s var(--ease); }
  .acc-item.is-on { height: 24rem; }
  .acc-item:not(.is-on)::after { background: rgb(20 16 12 / 0.4); }
  .acc-name { writing-mode: horizontal-tb; transform: none; left: 1.25rem; bottom: auto; top: 50%; translate: 0 -50%; font-size: 1.3rem; }
  .acc-body { left: 1.25rem; right: 1.25rem; bottom: 1.25rem; }
  .j-row { grid-template-columns: 6rem 1fr; padding: 1.25rem 0; column-gap: 1rem; }
  .j-row:hover { padding-left: 0; }
  .j-thumb { display: block; grid-row: span 3; aspect-ratio: 1; overflow: hidden; border-radius: var(--r); }
  .j-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .j-arrow, .j-lead { display: none; }
  .j-row .j-lead { display: none; }
  .j-float { display: none; }
  .news-in { justify-content: center; }
}
@media (max-width: 640px) {
  .usp-list { grid-template-columns: 1fr; }
  .usp-list li, .usp-list li + li { border-left: 0; padding: 1rem 0; }
  .usp-list li + li { border-top: 1px solid var(--line); }
  .rail-head { flex-direction: column; align-items: start; gap: 1rem; }
  .rail { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); scrollbar-width: none; cursor: auto; }
  .rail::-webkit-scrollbar { display: none; }
  .pc { width: 72vw; scroll-snap-align: start; }
  .nl-row { flex-direction: column; }
  .nl-input { flex: none; }
  .ft-cols { grid-template-columns: 1fr 1fr; }
  .ft-bottom { flex-direction: column; }
  .ft-bottom ul { flex-wrap: wrap; gap: 0.75rem 1.25rem; }
}