/* Nothing To Eat, "The menu card": the page as the printed menu opened flat. Plain CSS, classes prefixed nte-.
   The two cuts of Archivo are declared in theme.json; the local fallbacks below keep their proportions. */

/* ---------- Type: Archivo stands in for Druk Wide (the wide heavy cut) and Basic Sans (the text cut); every line in
   the display face is the identity's own outline, drawn as a mask so it takes any of the three colours. ---------- */
@font-face { font-family: "Nte text fallback"; src: local("Arial"), local("Helvetica Neue"), local("Roboto"); size-adjust: 98.2%; ascent-override: 89.4%; descent-override: 21.4%; line-gap-override: 0%; }
@font-face { font-family: "Nte wide fallback"; font-weight: 800; src: local("Arial Black"); size-adjust: 115.6%; ascent-override: 76%; descent-override: 18.2%; line-gap-override: 0%; }

/* Layout: one column of the card, 1240 px wide at most, white; the menu card's own ornaments (dotted rules, the mark as
   a bullet, the hatched frame) set the rhythm; red and black appear as whole grounds, never as texture. */
:root {
	--nte-red: #ff2c2c;
	--nte-black: #000;
	--nte-white: #fff;
	--nte-ink: #111;
	--nte-grey: #5c5c5c;             /* small secondary text on white: 6.3:1 */
	--nte-text: "Nte Archivo", "Nte text fallback", Arial, sans-serif;
	--nte-wide: "Nte Archivo Wide", "Nte wide fallback", Arial, sans-serif;
	--nte-gutter: clamp(20px, 5vw, 80px);
	--nte-max: 1240px;
	--nte-bar: 64px;
	--nte-ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 0; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html body { margin: 0; overflow-x: clip; background: var(--nte-white); color: var(--nte-ink); font: 400 18px/1.5 var(--nte-text); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--nte-black); outline-offset: 4px; }
:focus:not(:focus-visible) { outline: 0; }
.nte-local :focus-visible, .nte-foot :focus-visible, .nte-poster :focus-visible { outline-color: var(--nte-white); }

.nte-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nte-skip { position: absolute; left: 16px; top: -60px; z-index: 50; padding: 10px 16px; background: var(--nte-black); color: var(--nte-white); font-weight: 700; text-decoration: none; }
.nte-skip:focus { top: 12px; }
.nte-wrap { width: min(100% - 2 * var(--nte-gutter), var(--nte-max)); margin-inline: auto; }

/* Masks: the identity's outlines and marks, coloured by the element's background. */
.nte-mask, .nte-lt { display: block; background-color: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.nte-mask--logo { --m: url("../brand/logo.svg"); aspect-ratio: 600.86 / 137.44; }
.nte-mask--mark { --m: url("../brand/mark-red.svg"); aspect-ratio: 59.57 / 60.47; }
.nte-lt { position: relative; }
.nte-lt--nte { --m: url("../type/card-nothing-to-eat-white.svg"); aspect-ratio: 865.47 / 286.22; }
.nte-lt--order { --m: url("../type/card-order-now-white.svg"); aspect-ratio: 1207.76 / 124.30; }
.nte-lt--healthy { --m: url("../type/card-healthy-and-real-food-white.svg"); aspect-ratio: 298.05 / 32.73; }
.nte-lt--tuna { --m: url("../type/card-tuna-club.svg"); aspect-ratio: 659.11 / 76.86; }
.nte-lt--pastrami { --m: url("../type/card-pastrami.svg"); aspect-ratio: 646.91 / 76.87; }
.nte-lt--pork { --m: url("../type/card-pppppork.svg"); aspect-ratio: 682.91 / 76.87; }
.nte-lt--bev { --m: url("../type/card-beverages.svg"); aspect-ratio: 715.40 / 107.39; }
.nte-lt--des { --m: url("../type/card-desserts.svg"); aspect-ratio: 638.80 / 76.87; }
.nte-lt--try { --m: url("../type/card-try-our-new.svg"); aspect-ratio: 639.24 / 70.95; }
.nte-lt--chicken { --m: url("../type/card-chicken-sandwich-left-white.svg"); aspect-ratio: 912.83 / 302.45; }
.nte-lt--better { --m: url("../type/card-getting-better-all-the-time-white.svg"); aspect-ratio: 1300.69 / 71.46; }

/* Shared text roles: the card's small labels, the wide headings, the dotted rules. */
.nte-label { font: 700 12px/1.3 var(--nte-text); letter-spacing: .18em; text-transform: uppercase; color: var(--nte-black); }
.nte-h2 { font: 800 clamp(34px, 5.2vw, 72px)/1.02 var(--nte-wide); text-transform: uppercase; letter-spacing: -.01em; text-wrap: balance; max-width: 14ch; }
.nte-lead { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; max-width: 34em; }
.nte-rule { height: 10px; -webkit-mask: url("../brand/menu-dotted-rule-long.svg") left center / auto 100% repeat-x; mask: url("../brand/menu-dotted-rule-long.svg") left center / auto 100% repeat-x; background: var(--nte-black); }

/* ---------- The bar ---------- */
.nte-bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; height: var(--nte-bar); display: flex; align-items: center; justify-content: space-between; padding-inline: var(--nte-gutter); background: var(--nte-white); border-bottom: 1px solid var(--nte-black); }
.nte-bar__logo { width: 132px; color: var(--nte-black); }
.nte-bar__nav { display: flex; gap: 28px; font: 700 12px/1 var(--nte-text); letter-spacing: .18em; text-transform: uppercase; }
.nte-bar__nav a { text-decoration: none; padding: 8px 0; border-bottom: 2px solid transparent; transition: border-color .2s; }
.nte-bar__nav a:hover { border-color: var(--nte-red); }

/* ---------- 1. First screen ---------- */
.nte-hero { position: relative; display: grid; grid-template-columns: 1fr; gap: 24px; width: min(100% - 2 * var(--nte-gutter), var(--nte-max)); margin-inline: auto; padding-block: 48px 36px; }
.nte-hero__h1 { display: block; }
.nte-hero__name { width: min(100%, 560px); color: var(--nte-red); }
.nte-hero__sub { display: block; margin-top: 22px; font: 800 clamp(13px, 1.2vw, 16px)/1.3 var(--nte-wide); letter-spacing: .06em; text-transform: uppercase; }
.nte-hero__line { margin-top: 10px; color: var(--nte-grey); }
.nte-btn { display: inline-flex; align-items: center; margin-top: 28px; padding: 16px 26px; border: 2px solid var(--nte-black); color: var(--nte-black); background: var(--nte-white); text-decoration: none; transition: background .2s, color .2s; }
.nte-btn .nte-lt { width: 150px; }
.nte-btn:hover { background: var(--nte-black); color: var(--nte-white); }
.nte-hero__pic img { width: 100%; }
.nte-hero__foot { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; border-top: 1px solid var(--nte-black); }
.nte-hero__tag { width: 170px; color: var(--nte-red); }
.nte-hero__scroll { font: 700 12px/1 var(--nte-text); letter-spacing: .18em; text-transform: uppercase; color: var(--nte-grey); }

@media (min-width: 1000px) {
	.nte-hero { grid-template-columns: 1fr 42%; grid-template-rows: 1fr auto; column-gap: 5vw; align-items: center; min-height: calc(100vh - var(--nte-bar)); min-height: calc(100svh - var(--nte-bar)); padding-block: 40px 28px; }
	.nte-hero__text { grid-column: 1; grid-row: 1; padding-block: 24px; }
	.nte-hero__pic { grid-column: 2; grid-row: 1; align-self: center; }
	.nte-hero__pic img { width: 100%; max-height: calc(100vh - var(--nte-bar) - 140px); object-fit: contain; }
	.nte-hero__foot { grid-column: 1 / -1; grid-row: 2; }
	.nte-hero__name { width: min(100%, 50vw, 700px); }
}

/* ---------- 2. What it is ---------- */
.nte-what { padding-block: clamp(64px, 8vw, 110px) clamp(48px, 6vw, 80px); display: grid; gap: 20px; }
.nte-what .nte-h2 { margin-top: 4px; }
.nte-points { margin-top: 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 40px; border-top: 1px solid var(--nte-black); }
.nte-points li { padding: 22px 0 24px; border-bottom: 1px solid var(--nte-black); }
.nte-points h3 { display: flex; align-items: center; gap: 10px; font: 800 14px/1.3 var(--nte-wide); text-transform: uppercase; letter-spacing: .04em; }
.nte-points h3::before { content: ""; width: 14px; height: 14px; flex: none; background: var(--nte-red); -webkit-mask: url("../brand/mark-red.svg") center / contain no-repeat; mask: url("../brand/mark-red.svg") center / contain no-repeat; }
.nte-points p { margin-top: 8px; font-size: 16px; color: var(--nte-grey); }

/* ---------- 3. The menu ---------- */
.nte-menu { padding-bottom: 0; }
/* The pattern, once: the card's upper edge, a band of red crosses as the printed menu carries it. */
.nte-menu__edge { height: clamp(28px, 4vw, 56px); background: var(--nte-red); -webkit-mask: url("../brand/pattern-band.svg") left top / auto 100% repeat-x; mask: url("../brand/pattern-band.svg") left top / auto 100% repeat-x; }
.nte-menu__head { text-align: center; padding-block: clamp(40px, 5vw, 72px) clamp(28px, 4vw, 48px); }
.nte-menu__logo { width: clamp(180px, 22vw, 300px); margin-inline: auto; color: var(--nte-black); }
.nte-menu__title { margin-top: 14px; font: 700 12px/1.3 var(--nte-text); letter-spacing: .22em; text-transform: uppercase; }
.nte-menu__under { margin-top: 6px; color: var(--nte-grey); }
.nte-menu__group { padding-top: 18px; border-top: 2px solid var(--nte-black); }
.nte-dish { display: grid; grid-template-columns: 1fr; gap: 8px 48px; align-items: center; padding-block: 36px; border-bottom: 1px solid var(--nte-black); }
.nte-dish__pic img { width: min(100%, 520px); margin-inline: auto; }
.nte-dish__name .nte-lt { width: min(100%, 420px); color: var(--nte-black); }
.nte-dish__line { margin-top: 16px; font: 700 clamp(19px, 1.5vw, 22px)/1.3 var(--nte-text); color: var(--nte-red); max-width: 22em; }
.nte-dish__desc { margin-top: 12px; max-width: 30em; color: var(--nte-grey); }
@media (min-width: 1000px) {
	.nte-dish { grid-template-columns: 44% 1fr; padding-block: 32px; }
	.nte-dish--flip { grid-template-columns: 1fr 44%; }
	.nte-dish--flip .nte-dish__pic { order: 2; }
	.nte-dish__pic img { width: 100%; }
}
.nte-cols { display: grid; grid-template-columns: 1fr; gap: 48px; padding-block: clamp(40px, 5vw, 64px) clamp(48px, 6vw, 80px); }
@media (min-width: 800px) { .nte-cols { grid-template-columns: 1fr 1fr; gap: 80px; } }
.nte-col__h .nte-lt { width: min(100%, 280px); color: var(--nte-black); }
.nte-list { margin-top: 20px; border-top: 1px solid var(--nte-black); }
.nte-list li { padding: 14px 0; border-bottom: 1px solid var(--nte-black); }
.nte-list h4 { display: flex; align-items: baseline; gap: 10px; font: 700 17px/1.3 var(--nte-text); }
.nte-list h4::before { content: ""; width: 11px; height: 11px; flex: none; align-self: center; background: var(--nte-red); -webkit-mask: url("../brand/mark-red.svg") center / contain no-repeat; mask: url("../brand/mark-red.svg") center / contain no-repeat; }
.nte-list p { margin-top: 4px; padding-left: 21px; font-size: 15px; color: var(--nte-grey); }
/* The card's framed note: the hatched frame of the printed menu, once. */
.nte-col { position: relative; isolation: isolate; }
.nte-note { position: relative; background: var(--nte-white); margin-top: 36px; padding: 18px 20px; border: 1.5px solid var(--nte-black); font-weight: 700; font-size: 16px; }
.nte-note::after { content: ""; position: absolute; inset: 8px -8px -8px 8px; z-index: -1; background: repeating-linear-gradient(135deg, var(--nte-black) 0 1px, transparent 1px 5px); }

/* The poster: black ground, the identity's own lettering, the sandwich on its red. */
.nte-poster { display: grid; grid-template-columns: 1fr; background: var(--nte-black); color: var(--nte-white); }
.nte-poster__text { padding: clamp(40px, 6vw, 96px) var(--nte-gutter); display: grid; align-content: center; justify-items: start; gap: 12px; }
.nte-poster__text .nte-lt--try { width: min(100%, 220px); color: var(--nte-red); }
.nte-poster__h { width: 100%; }
.nte-poster__h .nte-lt { width: min(100%, 460px); color: var(--nte-white); }
.nte-poster__text p { max-width: 28em; color: #d6d6d6; }
.nte-poster__pic { background: var(--nte-red); }
.nte-poster__pic img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 700 / 594; }
@media (min-width: 1000px) {
	.nte-poster { grid-template-columns: 1fr 1fr; min-height: 560px; }
	.nte-poster__text { padding-left: max(var(--nte-gutter), calc((100vw - var(--nte-max)) / 2)); }
	.nte-poster__pic img { aspect-ratio: auto; position: absolute; inset: 0; }
	.nte-poster__pic { position: relative; }
}

/* ---------- 4. Local: the four-lobed mark, giant, off the corner ---------- */
.nte-local { position: relative; overflow: clip; padding-block: clamp(72px, 10vw, 150px); background: var(--nte-white); }
.nte-local__mark { position: absolute; right: -14vw; top: -10vw; width: clamp(280px, 48vw, 760px); color: var(--nte-red); pointer-events: none; }
.nte-local__text { position: relative; display: grid; gap: 20px; max-width: 760px; margin-left: 0; }
.nte-three { display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: 12px; font: 800 13px/1.3 var(--nte-wide); text-transform: uppercase; letter-spacing: .06em; color: var(--nte-red); }
@media (min-width: 1000px) { .nte-local__text { margin-left: calc((100vw - var(--nte-max)) / 2); } }
@media (max-width: 999px) { .nte-local__mark { right: -22vw; top: -16vw; width: 62vw; opacity: .9; } .nte-local__text { padding-top: 26vw; } }

/* ---------- 6. Closing ---------- */
.nte-close { padding-block: clamp(72px, 10vw, 140px); display: grid; gap: 36px; justify-items: start; }
.nte-close__h { width: 100%; }
.nte-close__h .nte-lt { width: min(100%, 1100px); color: var(--nte-red); }
.nte-close__act { display: grid; gap: 14px; justify-items: start; }
.nte-close__act .nte-btn { margin-top: 0; }
.nte-close__under { font-size: 15px; color: var(--nte-grey); }

/* ---------- The splash: the question arrives on red, then the card opens onto the page ----------
   Shown once per visit (head script, sessionStorage "nte-splash"), never with reduced motion or without scripts.
   About a second: the lettering settles (0 to .45 s), the two halves part (.55 to 1.05 s). Transform and opacity only.
   It takes no pointer, no focus and is hidden from readers; the page below is already painted. */
.nte-splash { display: none; }
html.nte-splash-on .nte-splash { display: block; position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.nte-splash__half { position: absolute; top: 0; bottom: 0; width: 50.5%; overflow: hidden; background: var(--nte-red); }
.nte-splash__half--l { left: 0; }
.nte-splash__half--r { right: 0; }
.nte-splash__q { position: absolute; top: 50%; width: min(64vw, 620px); color: var(--nte-white); transform: translate(-50%, -50%); }
.nte-splash__half--l .nte-splash__q { left: 99.01%; }
.nte-splash__half--r .nte-splash__q { left: .99%; }
@media (prefers-reduced-motion: no-preference) {
	html.nte-splash-on .nte-splash__q { animation: nte-q .5s var(--nte-ease) both; }
	html.nte-splash-on .nte-splash__half--l { animation: nte-open-l .55s cubic-bezier(.7, 0, .2, 1) .55s both; }
	html.nte-splash-on .nte-splash__half--r { animation: nte-open-r .55s cubic-bezier(.7, 0, .2, 1) .55s both; }
	html.nte-splash-on .nte-splash { animation: nte-gone 0s linear 1.1s both; }
	/* the first screen settles as the card opens */
	html.nte-splash-on .nte-hero__text, html.nte-splash-on .nte-hero__pic { animation: nte-settle .8s var(--nte-ease) .6s both; }
	html.nte-splash-on .nte-hero__pic { animation-delay: .68s; }
}
@keyframes nte-q { from { opacity: 0; transform: translate(-50%, -46%) scale(.96); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes nte-open-l { to { transform: translateX(-101%); } }
@keyframes nte-open-r { to { transform: translateX(101%); } }
@keyframes nte-gone { to { visibility: hidden; } }
@keyframes nte-settle { from { opacity: .001; transform: translateY(18px); } to { opacity: 1; transform: none; } }

@media print {
	.nte-splash { display: none !important; }
	.nte-dish__pic, .nte-dish__text { opacity: 1 !important; transform: none !important; }
	.nte-bar, .nte-skip, .nte-foot__nav { display: none; }
	.nte-r { opacity: 1 !important; transform: none !important; }
}

/* ---------- WordPress ---------- */
/* The bar and the footer are template parts; the blocks carry their own classes. */
.wp-site-blocks { padding: 0; }
/* The missing page and any other page of the theme. */
.nte-lost, .nte-page { display: grid; gap: 20px; justify-items: start; padding-block: clamp(72px, 10vw, 140px); min-height: calc(70vh - var(--nte-bar)); }
.nte-lost .nte-btn { margin-top: 8px; padding: 14px 22px; font: 700 13px/1 var(--nte-text); letter-spacing: .14em; text-transform: uppercase; }
/* The band of crosses, alive (assets/js/band.js): the canvas replaces the printed band once the script runs. */
.nte-menu__edge.is-live { position: relative; background: none; -webkit-mask: none; mask: none; }
.nte-menu__edge-live { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The two short legal pages (index template). */
.nte-page { max-width: 760px; }
.nte-page h2 { font: 800 18px/1.3 var(--nte-wide); text-transform: uppercase; margin-top: 18px; }
.nte-page p, .nte-page li { color: #333; }
.nte-page ul { list-style: disc; padding-left: 1.2em; }
.nte-page code { font-size: .9em; }

/* No word left alone on the last line of a paragraph; headings share their lines evenly. */
p, li, dd, dt, figcaption, blockquote, .nte-lede { text-wrap: pretty; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
/* The poster's line stands on one line from 1280 px. */
@media (min-width: 1280px) { .nte-poster__text p:last-of-type { max-width: none; white-space: nowrap; } }
/* "Try our new" stands in a paragraph of its own: it takes the column's width so its lettering has room. */
.nte-poster__text > p:first-child { width: 100%; }


/* The first screen's question: both lines start on one left edge (the drawing indents its second line). */
.nte-hero__name { --m: url("../type/card-nothing-to-eat-left-white.svg"); }