/* Nothing To Eat: the closing section and the footer, "The back of the menu" (the owner's choice, 8 October 2026).
   On their own, to be replaced as one piece: this file, assets/js/footer.js, parts/footer.html and the closing block of
   the page (both written by build/footer/build-footer.py). White ground, the menu's dotted leaders and hatched frame,
   the canal map drawing in with its pin, NOTHING TO EAT? rising letter by letter. Motion waits for html.nte-fa-mo. */
.nte-foot { background: var(--nte-white); color: var(--nte-ink); padding: 0; overflow: hidden; }
.nte-l { transform-box: fill-box; transform-origin: 50% 100%; }
.nte-fa-ul { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .45s var(--nte-ease); }
.nte-fa-ul:hover, .nte-fa-ul:focus-visible { background-size: 100% 1.5px; }

/* The closing */
.nte-fa-close { max-width: 1240px; margin: 0 auto; padding: clamp(72px, 10vw, 140px) var(--nte-gutter) clamp(56px, 7vw, 96px); text-align: center; }
.nte-fa-close h2 { margin: 0; }
.nte-fa-better { display: block; width: 100%; height: auto; overflow: visible; }
.nte-fa-order { display: inline-flex; align-items: center; justify-content: center; margin-top: clamp(32px, 4vw, 48px); padding: 18px 30px; background: #fff; color: #000; border: 2px solid #000; box-shadow: 6px 6px 0 var(--nte-red); text-decoration: none; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s var(--nte-ease), background .25s, color .25s; }
.nte-fa-order svg { width: 150px; height: auto; display: block; }
.nte-fa-order:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--nte-red); background: #000; color: #fff; }
.nte-fa-order:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--nte-red); transition-duration: .08s; }

/* The back of the menu */
.nte-fa-back { max-width: 1240px; margin: 0 auto; padding: 0 var(--nte-gutter); }
.nte-fa-card { position: relative; padding: clamp(28px, 4vw, 56px); display: grid; grid-template-columns: 1fr 1.15fr 1.3fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.nte-fa-card::before { content: ""; position: absolute; inset: 0; padding: 10px; background: repeating-linear-gradient(-45deg, #000 0 1.5px, transparent 1.5px 7px); -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; }
.nte-fa-h { margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid #000; font: 800 13px/1 var(--nte-wide); letter-spacing: .2em; text-transform: uppercase; }
.nte-fa-house ul { list-style: none; margin: 0; padding: 0; }
.nte-fa-house li { display: flex; align-items: center; gap: 12px; padding: 9px 0; font: 800 clamp(18px, 1.6vw, 22px)/1.1 var(--nte-wide); text-transform: uppercase; }
.nte-fa-house li svg { width: 12px; height: 12px; flex: none; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.nte-fa-house li:hover svg { transform: rotate(90deg) scale(1.3); }
.nte-fa-row { display: flex; align-items: baseline; gap: 12px; margin: 0; padding: 14px 0; border-top: 1px solid #000; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.nte-fa-row:first-of-type { border-top: 0; }
.nte-fa-row i { flex: 1; border-bottom: 2px dotted #000; transform: translateY(-4px); }
.nte-fa-row span:last-child { color: var(--nte-ink); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.nte-fa-row a { color: var(--nte-ink); }
.nte-fa-mapbox { margin: 0; }
.nte-fa-mapframe { position: relative; aspect-ratio: 12 / 7; border: 1px solid #000; overflow: hidden; background: #fff; }
.nte-fa-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.nte-fa-water { stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; }
.nte-fa-pin { position: absolute; left: 50%; top: 44%; width: 34px; margin: -44px 0 0 -17px; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .25)); }
.nte-fa-mapbox figcaption { margin-top: 10px; font-size: 12px; color: var(--nte-grey); }
.nte-fa-mapbox figcaption a { color: var(--nte-ink); }
.nte-fa-legal { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between; padding: 22px 0; margin-top: clamp(28px, 4vw, 44px); border-top: 1px solid #000; font-size: 13px; color: var(--nte-grey); }
.nte-fa-legal ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.nte-fa-legal a { color: var(--nte-ink); }
.nte-fa-legal p { margin: 0; }
.nte-fa-top { font: 800 12px/1 var(--nte-wide); letter-spacing: .18em; text-transform: uppercase; color: #000; }
.nte-fa-giant { position: relative; height: calc((min(100vw, 1440px) - 2 * var(--nte-gutter)) * .27); overflow: hidden; margin-top: clamp(12px, 2vw, 24px); padding: 0 var(--nte-gutter); }
.nte-fa-nte { display: block; width: 100%; height: auto; overflow: visible; }
.nte-foot :focus-visible { outline-color: #000; }
@media (max-width: 860px) {
	.nte-fa-card { grid-template-columns: 1fr; }
	.nte-fa-close { text-align: left; }
	.nte-fa-legal { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
	.nte-fa-better { width: 181%; margin-bottom: 11.8%; }
	.nte-fa-better .nte-l2 { transform: translate(-740px, 88px); }
}

/* Motion (assets/js/footer.js sets --p from 0 to 1 as each part comes in, and .is-done near the end) */
html.nte-fa-mo .nte-fa-better .nte-l { --t: clamp(0, calc(var(--p, 1) * 1.9 - var(--i) * .028), 1); opacity: var(--t); translate: 0 calc((1 - var(--t)) * 90%); rotate: calc((1 - var(--t)) * -8deg); }
html.nte-fa-mo .nte-fa-order { opacity: clamp(0, calc(var(--p, 1) * 2.2 - 1), 1); }
html.nte-fa-mo .nte-fa-water { stroke-dashoffset: calc(1 - clamp(0, calc(var(--p, 1) * 1.5 - .2), 1)); }
html.nte-fa-mo .nte-fa-pin { translate: 0 -160%; opacity: 0; transition: translate .7s cubic-bezier(.34, 1.56, .64, 1), opacity .2s; }
html.nte-fa-mo .is-done .nte-fa-pin { translate: 0 0; opacity: 1; transition-delay: .15s; }
html.nte-fa-mo .nte-fa-giant .nte-l { --t: clamp(0, calc(var(--p, 1) * 1.5 - var(--i) * .035), 1); translate: 0 calc((1 - var(--t)) * 105%); rotate: calc(var(--lx, 0) * (var(--i) - 6) * 1.1deg); transition: rotate .2s linear; }
@media print { html.nte-fa-mo .nte-l, html.nte-fa-mo .nte-fa-pin, html.nte-fa-mo .nte-fa-order { opacity: 1 !important; translate: none !important; rotate: none !important; } }
/* Phones: a long value (the e-mail) would push the row past the card. Value may wrap under the leader; the e-mail
   breaks anywhere; the grid column may shrink below its content. */
@media (max-width: 600px) {
	.nte-fa-card { grid-template-columns: minmax(0, 1fr); }
	.nte-fa-card > * { min-width: 0; }
	.nte-fa-row { flex-wrap: wrap; row-gap: 2px; }
	.nte-fa-row i { min-width: 16px; }
	.nte-fa-row span:last-child { flex: 0 1 auto; min-width: 0; text-align: right; overflow-wrap: anywhere; }
}
@media (max-width: 430px) {
	.nte-fa-row:has(a[href^="mailto:"]) { display: grid; grid-template-columns: 1fr; }
	.nte-fa-row:has(a[href^="mailto:"]) i { display: none; }
	.nte-fa-row:has(a[href^="mailto:"]) span:last-child { text-align: left; text-transform: none; letter-spacing: .02em; }
}
/* The closing lettering's drawing is 181 % wide on phones (its second line is moved under the first): its box must not
   widen the page, or phones lay the whole page out wider than the screen. */
.nte-fa-close { overflow-x: clip; }
html { overflow-x: clip; }