/* ONESAVOR — alternative art directions. Same markup, different worlds.
   [data-style="papier"]  a chef's menu card: paper, ink, gold foil, blue ballpoint notes.
   [data-style="plakat"]  a street poster: black + Maldives blue blocks, 900-weight caps, stickers. */

/* =====================================================================
   PAPIER
   ===================================================================== */
[data-style="papier"] {
  --bg: #f1eadd;
  --bg2: #e9e0cf;
  --bg3: #ddd2bd;
  --ink: #1d1a16;
  --ink2: #5f584c;
  --gold: #a87b2a;
  --gold2: #8c6420;
  --gold-grad: linear-gradient(180deg, #c99a45 0%, #a87b2a 55%, #7d5a1d 100%);
  --blue: #2a6f9e;
  --blue-deep: #2a6f9e;
  --line: rgba(29, 26, 22, .22);
  --line2: rgba(29, 26, 22, .12);
  --btn-ink: #fff9ee;
  --h2-weight: 700;
  --h2-track: -.025em;
  --h2: clamp(30px, 4.2vw, 58px);
  color-scheme: light;
}
[data-style="papier"] body {
  background-color: var(--bg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .25  0 0 0 0 .18  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
[data-style="papier"] ::selection { background: var(--blue); color: #fff; }
[data-style="papier"] .eyebrow { font: 600 27px/1 var(--f-hand); letter-spacing: 0; text-transform: none; color: var(--blue); transform: rotate(-2.5deg); transform-origin: left; display: inline-block; }
[data-style="papier"] .eyebrow::before { content: "↘ "; }
[data-style="papier"] .wordmark { background: none; color: var(--ink); font-weight: 400; }
[data-style="papier"] .tag .ink { filter: none; }
[data-style="papier"] .top.solid { background: rgba(241, 234, 221, .9); }
[data-style="papier"] .btn-gold { background: var(--ink); color: #fff9ee; box-shadow: 4px 4px 0 var(--gold); border-radius: 6px; }
[data-style="papier"] .btn-gold:hover { box-shadow: 6px 6px 0 var(--gold); }
[data-style="papier"] .btn-line { border-radius: 6px; --b: var(--ink); color: var(--ink); }
[data-style="papier"] .btn-line:hover { color: var(--blue); --b: var(--blue); }
[data-style="papier"] .chip { background: rgba(255, 252, 245, .7); }
[data-style="papier"] .round { background: #fffaf0; }

/* hero becomes a printed menu card next to an arched film */
[data-style="papier"] .hero { min-height: auto; padding-top: 130px; padding-bottom: 60px; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(30px, 5vw, 80px); align-items: center; max-width: calc(var(--max) + var(--pad) * 2); margin: 0 auto; width: 100%; }
[data-style="papier"] .hero-media { position: relative; inset: auto; z-index: 0; order: 2; aspect-ratio: 4 / 5; border-radius: 999px 999px 18px 18px; overflow: hidden; border: 10px solid #fffaf0; box-shadow: 0 30px 60px -30px rgba(60, 40, 10, .45), 0 0 0 1px var(--line2); }
[data-style="papier"] .hero-shade { display: none; }
[data-style="papier"] .hero-inner { padding: 0; }
[data-style="papier"] .hero-foot { grid-column: 1 / -1; order: 3; }
[data-style="papier"] .wordmark-xl { font-size: clamp(38px, 6.6vw, 104px); letter-spacing: .14em; }
[data-style="papier"] .hero-title { font-weight: 700; letter-spacing: -.03em; }
[data-style="papier"] .hero-body { color: var(--ink2); }
[data-style="papier"] .price-chip { color: var(--ink); font: 600 26px/1 var(--f-hand); transform: rotate(-3deg); }

/* the kitchen film as a framed print */
[data-style="papier"] .kitchen-sticky { background: var(--bg); padding: 80px var(--pad) 40px; }
[data-style="papier"] .kitchen-canvas { border-radius: 4px; border: 12px solid #fffaf0; box-shadow: 0 30px 60px -30px rgba(60, 40, 10, .5); }
[data-style="papier"] .kitchen-shade { inset: 80px var(--pad) 40px; border: 12px solid transparent; }
[data-style="papier"] .kitchen .ai-label { top: 104px; left: calc(var(--pad) + 26px); }
[data-style="papier"] .beat { color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.5); }
[data-style="papier"] .kitchen-beats { left: calc(var(--pad) + 30px); bottom: calc(40px + 10vh); }
[data-style="papier"] .kitchen-progress { background: var(--line); left: calc(var(--pad) + 12px); right: calc(var(--pad) + 12px); bottom: 24px; }
[data-style="papier"] .kitchen-progress span { background: var(--ink); }

/* pass on a wooden board, ticket pinned */
[data-style="papier"] .pass-stage { border-radius: 6px; border: 10px solid #fffaf0; box-shadow: 0 30px 60px -30px rgba(60, 40, 10, .5); }
[data-style="papier"] .pass-counter { background:
    radial-gradient(60% 55% at 50% 45%, rgba(255, 220, 160, .25), transparent 70%),
    repeating-linear-gradient(92deg, rgba(60,30,10,.12) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #a87a4f, #7a5232); }
[data-style="papier"] .ticket { box-shadow: 0 18px 30px -20px rgba(60, 40, 10, .6); background: #fffdf7; transform: rotate(1.4deg); }
[data-style="papier"] .ticket::before { content: ""; position: absolute; top: 12px; left: 50%; width: 90px; height: 24px; translate: -50% -50%; background: rgba(240, 220, 160, .75); transform: rotate(-3deg); }
[data-style="papier"] .pass-dots button { background: var(--line); }
[data-style="papier"] .pass-dots button[aria-selected="true"] { background: var(--ink); }

/* reel as polaroids */
[data-style="papier"] .reel-item { border-radius: 3px; border: 8px solid #fffaf0; border-bottom-width: 44px; box-shadow: 0 20px 30px -20px rgba(60, 40, 10, .55); overflow: visible; }
[data-style="papier"] .reel-item:nth-child(odd) { transform: rotate(-1.5deg); }
[data-style="papier"] .reel-item:nth-child(even) { transform: rotate(1.2deg) translateY(10px); }
[data-style="papier"] .reel-item .cap { background: none; inset: auto 0 -40px; padding: 0 4px; height: 36px; display: flex; align-items: center; color: var(--ink); font: 600 22px/1 var(--f-hand); }
[data-style="papier"] .reel-item img, [data-style="papier"] .reel-item video { border-radius: 1px; }

[data-style="papier"] .chef-photo img:first-child { border-radius: 4px; border: 10px solid #fffaf0; box-shadow: 0 30px 60px -30px rgba(60, 40, 10, .5); filter: sepia(.12) saturate(.9); }
[data-style="papier"] .emblem { filter: brightness(.25) sepia(1) hue-rotate(5deg); opacity: .5; }

/* offer as a printed price list with dotted leaders */
[data-style="papier"] .packages { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
[data-style="papier"] .pkg { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px 28px; background: none; border: 0; border-radius: 0; padding: 28px 0; }
[data-style="papier"] .pkg + .pkg { border-top: 1px dotted var(--ink); }
[data-style="papier"] .pkg:hover { transform: none; }
[data-style="papier"] .pkg h3 { font-size: clamp(22px, 2.4vw, 32px); font-weight: 700; grid-column: 1; }
[data-style="papier"] .pkg p { grid-column: 1; grid-row: 2; }
[data-style="papier"] .pkg-price { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
[data-style="papier"] .pkg-price b { color: var(--ink); font-weight: 700; font-size: 46px; }
[data-style="papier"] .pkg .btn { grid-column: 3; grid-row: 1 / span 2; margin: 0; }
[data-style="papier"] .pkg-flag { position: static; grid-column: 1; justify-self: start; background: none; color: var(--blue); font: 600 24px/1 var(--f-hand); letter-spacing: 0; text-transform: none; padding: 0; transform: rotate(-3deg); }
[data-style="papier"] .pkg.featured { background: none; }
/* the handwritten flag takes the first row of the featured card, so its text moves down one */
[data-style="papier"] .pkg.featured p { grid-row: 3; }
@media (min-width: 981px) { [data-style="papier"] .pkg.featured :is(.pkg-price, .btn) { grid-row: 1 / span 3; } }
[data-style="papier"] .estimator { border-color: var(--ink); border-style: dashed; background: #fffaf0; }
[data-style="papier"] .est-sum { color: var(--ink); font-weight: 700; }
[data-style="papier"] .est-tabs button[aria-checked="true"] { border-color: var(--ink); color: var(--ink); background: var(--bg2); }

[data-style="papier"] .step-list b { font: 600 34px/1 var(--f-hand); letter-spacing: 0; }
[data-style="papier"] .step-list { border-top: 2px solid var(--ink); }

[data-style="papier"] .game { background: #fffaf0; box-shadow: 0 30px 60px -40px rgba(60, 40, 10, .5); }
[data-style="papier"] .game-overlay { background: rgba(241, 234, 221, .82); }
[data-style="papier"] .go-text { color: var(--ink); }
[data-style="papier"] .fields input, [data-style="papier"] .fields select { background: #fffaf0; }
[data-style="papier"] .fields input::placeholder { color: rgba(29, 26, 22, .35); }
[data-style="papier"] .book-out { background: #fffaf0; }
[data-style="papier"] .msg { background: var(--bg); font-family: var(--f-sans); }
[data-style="papier"] .tr-canvas { box-shadow: 0 0 0 10px #1d1a16, 0 40px 70px -30px rgba(60, 40, 10, .6); }
[data-style="papier"] .selfie img { border-color: #fffdf7; }
[data-style="papier"] .foot { border-top: 2px solid var(--ink); }
[data-style="papier"] .ai-label, [data-style="papier"] .real-label { color: #fff; }
[data-style="papier"] .style-switch { background: rgba(29, 26, 22, .92); }

/* =====================================================================
   PLAKAT
   ===================================================================== */
[data-style="plakat"] {
  --bg: #0b0b0c;
  --bg2: #151517;
  --bg3: #202024;
  --ink: #ffffff;
  --ink2: #b9c4c8;
  --gold: #f2c14e;
  --gold2: #f2c14e;
  --gold-grad: linear-gradient(180deg, #ffd873, #f2c14e);
  --blue: #8ed8f0;
  --blue-deep: #2fa8c4;
  --line: rgba(142, 216, 240, .4);
  --line2: rgba(255, 255, 255, .14);
  --h2-weight: 900;
  --h2-track: -.04em;
  --h2: clamp(38px, 6vw, 96px);
  --radius: 4px;
}
[data-style="plakat"] .section h2 { text-transform: uppercase; line-height: .9; }
[data-style="plakat"] .section h2 em { color: var(--blue); }
[data-style="plakat"] .eyebrow { display: inline-block; justify-self: start; background: var(--blue); color: #000; padding: 6px 10px; letter-spacing: .18em; font-weight: 800; transform: rotate(-1.5deg); }
[data-style="plakat"] .btn { border-radius: 2px; text-transform: uppercase; font-weight: 800; letter-spacing: .08em; }
[data-style="plakat"] .btn-gold { background: var(--blue); color: #000; box-shadow: 6px 6px 0 var(--gold); }
[data-style="plakat"] .btn-gold:hover { box-shadow: 8px 8px 0 var(--gold); }
[data-style="plakat"] .btn-line { --b: #fff; border-width: 2px; }
[data-style="plakat"] .wordmark { font-weight: 900; letter-spacing: -.02em; padding-left: 0; background: none; color: #fff; }
[data-style="plakat"] .brand .wordmark { font-size: 20px; }
[data-style="plakat"] .langs button[aria-pressed="true"] { background: var(--blue); color: #000; }

/* hero: the reel plays INSIDE the giant letters */
[data-style="plakat"] .hero-video { filter: brightness(1.35) saturate(1.25) contrast(1.05); }
[data-style="plakat"] .hero-shade { display: none; }
[data-style="plakat"] .hero-inner { display: grid; justify-items: start; }
[data-style="plakat"] .lockup { position: absolute; inset: 0; margin: 0; display: grid; place-content: start center; padding-top: clamp(90px, 14vh, 160px); overflow: hidden; pointer-events: none; z-index: -1; }
[data-style="plakat"] .wordmark-xl { font-size: clamp(56px, 16.5vw, 300px); font-weight: 900; letter-spacing: -.05em; line-height: .8; color: #fff; }
[data-style="plakat"] .hero .lockup { background: #0b0b0c; mix-blend-mode: multiply; }
[data-style="plakat"] .hero-title { text-transform: uppercase; font-weight: 900; font-size: clamp(30px, 5vw, 76px); letter-spacing: -.03em; line-height: .92; background: var(--blue); color: #000; padding: 10px 16px 6px; transform: rotate(-1.5deg); }
[data-style="plakat"] .hero-title em { color: #000; }
[data-style="plakat"] .hero-body { background: rgba(0,0,0,.82); padding: 12px 16px; max-width: 48ch; }
[data-style="plakat"] .hero-inner > .eyebrow { margin-bottom: 18px; }
[data-style="plakat"] .price-chip { background: var(--gold); color: #000; padding: 10px 14px; border-radius: 50%; width: 112px; height: 112px; display: grid; place-items: center; text-align: center; font-weight: 900; line-height: 1.05; transform: rotate(12deg); font-size: 14px; }

/* section order: the cat comes second on the poster */
[data-style="plakat"] #sphynx { order: 1; }
[data-style="plakat"] #menu { order: 2; }
[data-style="plakat"] #pack { order: 2; } /* after the menu (same order, later in the page) */
[data-style="plakat"] #offer { order: 3; }
[data-style="plakat"] #trailer { order: 4; }
[data-style="plakat"] #kitchen { order: 5; }
[data-style="plakat"] #real { order: 6; }
[data-style="plakat"] #chef { order: 7; }
[data-style="plakat"] #steps { order: 8; }
[data-style="plakat"] #book { order: 9; }
[data-style="plakat"] #sphynx { background: var(--blue); color: #000; --ink: #000; --ink2: #0f3542; --line2: rgba(0,0,0,.2); }
[data-style="plakat"] #sphynx .eyebrow { background: #000; color: var(--blue); }
[data-style="plakat"] #sphynx .game { background: #0b0b0c; color: #fff; --ink: #fff; --ink2: #b9c4c8; border: 3px solid #000; box-shadow: 10px 10px 0 #000; }
[data-style="plakat"] #sphynx .switch { color: #000; }
[data-style="plakat"] .selfie { transform: rotate(-3deg); }
[data-style="plakat"] .selfie img { border: 4px solid #000; border-radius: 2px; box-shadow: 14px 14px 0 #000; }
[data-style="plakat"] .selfie figcaption { position: static; margin-top: 18px; }
[data-style="plakat"] .selfie .ai-label { color: #000; }
[data-style="plakat"] .cat-portrait { width: 230px; }

[data-style="plakat"] .pass-stage, [data-style="plakat"] .pkg, [data-style="plakat"] .estimator, [data-style="plakat"] .book-out, [data-style="plakat"] .reel-item, [data-style="plakat"] .chef-photo img:first-child { border-radius: 2px; border: 3px solid #fff; box-shadow: 10px 10px 0 var(--blue-deep); }
[data-style="plakat"] .pkg { background: #000; }
[data-style="plakat"] .pkg.featured { background: var(--gold); color: #000; --ink2: #3b2e0c; border-color: #000; box-shadow: 10px 10px 0 #fff; transform: rotate(-1deg); }
[data-style="plakat"] .pkg.featured .pkg-price b { color: #000; }
[data-style="plakat"] .pkg.featured .btn-gold { background: #000; color: var(--gold); box-shadow: none; }
[data-style="plakat"] .pkg-flag { background: #000; color: var(--gold); top: -14px; }
[data-style="plakat"] .pkg h3 { text-transform: uppercase; font-weight: 900; letter-spacing: -.02em; font-size: 26px; }
[data-style="plakat"] .pkg-price b { font-weight: 900; color: var(--blue); }
[data-style="plakat"] .est-sum { font-weight: 900; color: var(--blue); }
[data-style="plakat"] .ticket { transform: rotate(-3deg); background: #fff; }
[data-style="plakat"] .step-list b { font-size: 64px; font-weight: 900; letter-spacing: -.05em; color: var(--blue); line-height: 1; }
[data-style="plakat"] .step-list h3 { text-transform: uppercase; font-weight: 900; }
[data-style="plakat"] .kitchen-progress span { background: var(--blue); }
[data-style="plakat"] .beat { font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; }
[data-style="plakat"] .reel-item .cap { text-transform: uppercase; font-weight: 900; }
[data-style="plakat"] .tr-canvas { border-radius: 4px; box-shadow: 0 0 0 4px #fff, 14px 14px 0 4px var(--blue-deep); }
[data-style="plakat"] .fields input, [data-style="plakat"] .fields select { border-radius: 2px; border: 2px solid rgba(255,255,255,.3); }
[data-style="plakat"] .foot-brand .wordmark { font-size: 44px; }
[data-style="plakat"] .style-switch button[aria-pressed="true"] { background: var(--blue); }
[data-style="plakat"] .marquee { display: block; }

/* marquee band — poster only */
.marquee { display: none; overflow: hidden; background: var(--blue); color: #000; border-block: 3px solid #000; transform: rotate(-1.2deg); margin: -10px -20px 0; position: relative; z-index: 3; }
.marquee div { display: flex; width: max-content; animation: mq 26s linear infinite; }
.marquee span { padding: 12px 22px; font-weight: 900; font-size: clamp(18px, 2.4vw, 28px); letter-spacing: -.01em; text-transform: uppercase; white-space: nowrap; }
.marquee span:nth-child(even) { font: 400 clamp(24px, 3vw, 36px)/1 var(--f-tag); text-transform: none; padding-block: 8px; }
@keyframes mq { to { transform: translateX(-50%); } }
html.rm .marquee div { animation: none; }

@media (max-width: 980px) {
  [data-style="papier"] .hero { grid-template-columns: minmax(0, 1fr); }
  [data-style="papier"] .hero-media { order: 0; max-width: 460px; width: 100%; justify-self: center; }
  [data-style="papier"] .pkg { grid-template-columns: minmax(0, 1fr) auto; }
  [data-style="papier"] .pkg .btn { grid-column: 1 / -1; grid-row: auto; justify-self: start; }
  [data-style="papier"] .pkg-price { grid-row: 1; }
  [data-style="plakat"] .price-chip { width: 96px; height: 96px; font-size: 12px; }
}
@media (max-width: 600px) {
  [data-style="papier"] .hero-media { aspect-ratio: 4 / 4.4; }
  [data-style="papier"] .kitchen-sticky { padding: 70px 10px 20px; }
  [data-style="papier"] .kitchen-shade { inset: 70px 10px 20px; }
  [data-style="papier"] .kitchen .ai-label { top: 92px; left: 30px; }
  [data-style="papier"] .kitchen-beats { left: 34px; right: 34px; }
  [data-style="plakat"] .hero .lockup { place-content: start center; padding-top: 18vh; }
  [data-style="plakat"] .pass-stage, [data-style="plakat"] .pkg, [data-style="plakat"] .estimator, [data-style="plakat"] .book-out, [data-style="plakat"] .reel-item, [data-style="plakat"] .chef-photo img:first-child { box-shadow: 6px 6px 0 var(--blue-deep); }
}
[data-style="plakat"] .hero .tag-xl { display: none; }
[data-style="plakat"] #sphynx h2 { font-size: clamp(34px, 4.6vw, 72px); }
