/* ==========================================================================
Yaseem Nasi Kandar — demo site stylesheet
--------------------------------------------------------------------------
§1–§6 the design system's six token files, transcribed VERBATIM from
_ds/yaseem-nasi-kandar-design-system-e979e09a-306c-44a1-9590-957db2f99682/
tokens/ (fonts, colors, typography, spacing, effects, base).
Values unchanged.
§7 AA-safe variants where a token falls short of WCAG AA on the ground
it is used on. The originals above stay exactly as the DS defined
them; these are additions.
§8+ the reset, the shared Nav/Footer components, the canvas's brand
devices (tape, snapshot, handwritten note, menu panel, heritage
seal) and the four page layouts.
========================================================================== */
/* ── §1 fonts.css ──────────────────────────────────────────────────────────
The DS loads its webfonts with an @import. Here the four families are
a 1em/40px margin and the same. Both are
zeroed here: an un-zeroed figure once inset every photograph on a site 40px
from its column — invisible at desktop, badly wrong at 414px. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden;text-wrap:pretty}
figure,blockquote{margin:0}
p{margin:0}
img{display:block;max-width:100%}
iframe{border:0;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:2px}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
.skip-link{
position:absolute;left:-9999px;top:0;z-index:var(--z-skip);
background:var(--yellow-500);color:var(--kicap-950);
padding:12px 20px;font-family:var(--font-condensed);font-size:16px;letter-spacing:.12em;
}
.skip-link:focus{left:16px;top:16px}
/* ── §9 Shared page shell ────────────────────────────────────────────────── */
.page{background:var(--kicap-950)}
.wrap{max-width:var(--page-max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.eyebrow{
font-family:var(--font-condensed);font-size:var(--text-eyebrow);
letter-spacing:.16em;color:var(--yellow-500);display:block;
}
.eyebrow--quiet{color:var(--ink-on-dark-60)}
.hand{font-family:var(--font-hand);line-height:1.15}
.rule-top{border-top:1px solid var(--hairline-on-dark-soft)}
/* The site's to-confirm marker. Placeholder markers are the one piece of
build apparatus that belongs on a customer-facing page. */
.tc{
font-family:var(--font-body);font-style:italic;font-weight:400;
color:var(--muted-on-card);white-space:nowrap;
}
.tc--dark{color:var(--ink-on-dark-60);font-style:italic}
/* ── §10 Brand devices: tape + snapshot ──────────────────────────────────── */
.snap{
position:relative;background:var(--white);
box-shadow:var(--shadow-slab);
transform:rotate(var(--rot,0deg));
}
.tape{
position:absolute;top:-12px;height:24px;width:74px;
background:var(--tape);box-shadow:0 1px 3px rgba(20,9,3,.2);
transform:rotate(var(--tape-rot,-4deg));pointer-events:none;
}
.tape--l{left:24px}
.tape--c{left:50%;margin-left:-37px}
.tape--r{right:22px}
.tape--wide{width:84px;height:28px;top:-14px;margin-left:-42px}
.snap__cap{
font-family:var(--font-hand);font-size:20px;line-height:1.25;
color:var(--kicap-800);margin-top:10px;
}
.snap__cap--red{color:var(--red-600)}
/* Every photograph gets a fixed aspect ratio + object-fit:cover, so its height
never depends on the length of the copy beside it. */
.snap__img{width:100%;height:auto;aspect-ratio:var(--ar,3 / 2);object-fit:cover}
/* ── §11 Buttons ─────────────────────────────────────────────────────────── */
.slab{
display:inline-block;background:var(--red-600);color:var(--yellow-500);
font-family:var(--font-condensed);font-size:clamp(24px,3vw,30px);letter-spacing:.06em;
line-height:1.1;padding:17px 32px 13px;min-height:48px;
box-shadow:var(--shadow-slab);text-decoration:none;
transform:rotate(var(--rot,1.2deg));cursor:pointer;
transition:background-color var(--dur-fast) var(--ease-brand);
}
.slab:hover{background:var(--accent-action-hover);color:var(--yellow-500);text-decoration:none}
.slab:active{background:var(--accent-action-press)}
.slab--sm{font-size:clamp(24px,2.6vw,28px);padding:16px 30px 12px}
/* The handwritten inline link ("read the story →"). */
.hand-link{
display:inline-block;font-family:var(--font-hand);
font-size:clamp(19px,2.2vw,23px);color:var(--yellow-500);
transform:rotate(-2deg);text-decoration:none;min-height:44px;padding:8px 0;
}
.hand-link:hover{color:var(--yellow-400);text-decoration:underline}
/* ── §12 Nav (shared component — Nav.dc.html) ────────────────────────────── */
.nav{background:var(--kicap-950);border-bottom:1px solid var(--hairline-on-dark)}
.nav__in{
max-width:var(--page-max);margin:0 auto;
display:flex;align-items:center;justify-content:space-between;gap:20px;
padding:12px var(--gutter);
}
.brand{position:relative;display:flex;align-items:baseline;gap:14px;text-decoration:none;flex-shrink:1;min-width:0}
.brand:hover{text-decoration:none}
/* 44px touch target without moving a pixel of the wordmark. */
.brand::after{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px}
.brand__mark{
display:inline-block;font-family:var(--font-display);font-size:27px;line-height:1;
color:var(--red-500);text-shadow:2px 2px 0 var(--yellow-600);transform:rotate(-1.5deg);
}
.brand__sub{
font-family:var(--font-condensed);font-size:13px;letter-spacing:.22em;
color:var(--ink-on-dark-60);white-space:nowrap;
}
.nav__right{display:flex;align-items:center;gap:32px}
.nav__links{display:flex;align-items:center;gap:32px}
.nav__link{
display:inline-block;padding:12px 0;
font-family:var(--font-condensed);font-size:16px;letter-spacing:.14em;
color:var(--ink-on-dark-85);text-decoration:none;
}
.nav__link:hover{color:var(--rice-50);text-decoration:none}
.nav__link::after{
content:"";display:block;height:3px;margin-top:3px;
background:transparent;transform:rotate(-2deg);
}
.nav__link[aria-current="page"]{color:var(--rice-50)}
.nav__link[aria-current="page"]::after{background:var(--red-500)}
.nav__badge{display:inline-flex;align-items:center;gap:8px}
.nav__dot{
width:9px;height:9px;border-radius:99px;background:var(--yellow-500);
box-shadow:0 0 0 3px rgba(249,170,39,.3);flex:0 0 auto;
}
.nav__badge span:last-child{
font-family:var(--font-condensed);font-size:15px;letter-spacing:.14em;color:var(--yellow-500);
}
.nav-toggle{
display:none;align-items:center;gap:9px;cursor:pointer;
min-height:44px;padding:8px 14px;
border:1px solid var(--hairline-on-dark);
font-family:var(--font-condensed);font-size:16px;letter-spacing:.14em;
color:var(--ink-on-dark-85);
}
.nav-toggle .bars{display:inline-flex;flex-direction:column;gap:3px}
.nav-toggle .bars i{display:block;width:17px;height:2px;background:currentColor}
/* ── §13 Drawer — hidden IN PLACE with opacity/visibility. Never translated
off-screen: a translated drawer creates horizontal overflow at phone
widths. ───────────────────────────────────────────────────────────────── */
.nav-backdrop{
position:fixed;inset:0;z-index:var(--z-drawer-backdrop);background:rgba(20,9,3,.62);
opacity:0;visibility:hidden;
transition:opacity var(--dur-med) var(--ease-brand),visibility var(--dur-med) var(--ease-brand);
}
.nav-backdrop[data-open="true"]{opacity:1;visibility:visible}
.nav-drawer{
position:fixed;top:0;right:0;bottom:0;z-index:var(--z-drawer);width:min(320px,86vw);
background:var(--kicap-900);border-left:1px solid var(--hairline-on-dark);
padding:18px 24px 32px;display:flex;flex-direction:column;overflow-y:auto;
opacity:0;visibility:hidden;
transition:opacity var(--dur-med) var(--ease-brand),visibility var(--dur-med) var(--ease-brand);
}
.nav-drawer[data-open="true"]{opacity:1;visibility:visible}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.drawer-close{
min-width:44px;min-height:44px;font-size:28px;line-height:1;
color:var(--ink-on-dark-75);cursor:pointer;
}
.drawer-close:hover{color:var(--rice-50)}
.drawer-link{
display:block;padding:15px 0;border-bottom:1px solid var(--hairline-on-dark-soft);
font-family:var(--font-condensed);font-size:20px;letter-spacing:.14em;
color:var(--ink-on-dark-85);text-decoration:none;
}
.drawer-link[aria-current="page"]{color:var(--yellow-500)}
.drawer-link:hover{color:var(--rice-50);text-decoration:none}
.drawer-foot{margin-top:22px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.drawer-hours{
font-family:var(--font-body);font-size:var(--text-small);line-height:1.7;color:var(--ink-on-dark-75);
}
.drawer-call{
display:inline-block;font-family:var(--font-condensed);font-size:26px;letter-spacing:.04em;
color:var(--yellow-500);text-decoration:none;min-height:44px;padding:6px 0;
}
/* ── §14 Footer (shared component — Footer.dc.html) ──────────────────────── */
.site-footer{background:var(--kicap-950);border-top:1px solid var(--hairline-on-dark)}
.footer__in{max-width:var(--page-max);margin:0 auto;padding:64px var(--gutter) 28px}
.footer__grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:40px;align-items:start}
.footer__mark{
position:relative;
display:inline-block;font-family:var(--font-display);font-size:34px;line-height:1;
color:var(--red-500);text-shadow:2px 2px 0 var(--yellow-600);transform:rotate(-1.5deg);
text-decoration:none;
}
.footer__mark::after{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px}
.footer__mark:hover{text-decoration:none;color:var(--red-500)}
.footer__sub{
font-family:var(--font-condensed);font-size:var(--text-small);letter-spacing:.22em;
color:var(--ink-on-dark-60);margin-top:8px;
}
.footer__addr{
font-family:var(--font-body);font-style:normal;font-size:15px;line-height:1.6;
color:var(--ink-on-dark-75);margin-top:16px;
}
/* The phone number is the site's primary contact action, so it gets a full
48px target. It is the last line of the address, so the block only grows
downward. */
.footer__addr a{
display:inline-flex;align-items:center;min-height:48px;
color:var(--ink-on-dark-75);text-decoration:underline;text-underline-offset:3px;
}
.footer__addr a:hover{color:var(--yellow-500)}
.footer__head{
font-family:var(--font-condensed);font-size:var(--text-eyebrow);letter-spacing:.16em;
color:var(--yellow-500);display:block;
}
.footer__lines{font-family:var(--font-body);font-size:15px;line-height:1.7;color:var(--ink-on-dark-75);margin-top:14px}
.footer__lines--airy{line-height:1.9}
/* Inline-block padding grows the line box too, so these