:root{--sc-line:var(--line,rgba(255,255,255,.17));--sc-yellow:var(--yellow,#FFC83B);--sc-muted:var(--muted,rgba(255,255,255,.64));--sc-ease-out:var(--ease-out,cubic-bezier(.23,1,.32,1));--sc-wrap:min(1200px,calc(100% - 96px))}
@media(max-width:800px){:root{--sc-wrap:calc(100% - 40px)}}

/* ===== nav =====
   Self-contained (design.md §1.8): every font, size, weight, letter-spacing, line-height and
   colour the chrome needs is set explicitly below, with the values rannvijay.html renders today
   — nothing here is allowed to depend on a page's own stylesheet. dist/styles.css already styles
   ".site-nav" and ".site-nav nav"/".site-nav nav a" (loaded by index + the four case pages that
   use it; valentine.html does not), so every rule below that needs to win over it is still
   prefixed with ".site-nav " to beat that specificity reliably, on every page, instead of relying
   on source order. */
.site-nav{position:sticky;top:0;z-index:40;background:#000;color:#fff;border-bottom:1px solid var(--sc-line)}
.sc-nav-inner,.sc-mobile-head-inner,.sc-mobile-body,.sc-footer-inner{width:var(--sc-wrap);margin-inline:auto}
.sc-nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 0}
.site-nav .brand{font-family:Manrope,Arial,sans-serif;font-weight:700;color:#fff;text-decoration:none;font-size:15px;letter-spacing:.02em;white-space:nowrap}
.site-nav .sc-nav-desktop{display:flex;align-items:center;gap:22px;flex-wrap:nowrap;min-width:0}
.site-nav .sc-nav-desktop a{position:relative;font:500 11px/1 DMMono,Mono,monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--sc-muted);text-decoration:none;white-space:nowrap;padding-bottom:6px}
.site-nav .sc-nav-desktop a:hover,.site-nav .sc-nav-desktop a[aria-current]{color:var(--sc-yellow)}
.site-nav .sc-nav-desktop a:after{content:'';position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--sc-yellow)}
.sc-menu-btn{display:none;font:500 11px/1 DMMono,Mono,monospace;text-transform:uppercase;letter-spacing:.08em;color:#fff;background:none;border:1px solid var(--sc-line);padding:10px 18px;cursor:pointer}
.sc-menu-btn:hover{border-color:var(--sc-yellow);color:var(--sc-yellow)}

@media(hover:hover) and (pointer:fine){
 .site-nav .sc-nav-desktop a:after{transition:width .16s cubic-bezier(.23,1,.32,1)}
 .site-nav .sc-nav-desktop a:hover:after{width:100%}
}
@media(max-width:1200px) and (min-width:1041px){
 .site-nav .sc-nav-desktop{gap:14px}
 .site-nav .sc-nav-desktop a{font-size:10px}
}
@media(max-width:1040px){
 .site-nav .sc-nav-desktop{display:none}
 .sc-menu-btn{display:inline-flex;align-items:center}
}
@media(min-width:1041px){
 .sc-mobile-panel{display:none}
}

/* mobile panel — a sibling of .site-nav (task 2), not nested inside it: dist/styles.css's
   ".site-nav nav a" cannot reach it any more (nothing else in dist/styles.css targets these
   classes), so none of the selectors below need a ".site-nav " prefix to win. */
.sc-mobile-panel{position:fixed;inset:0;z-index:200;min-height:100dvh;background:#0B0B0B;overflow-y:auto;-webkit-overflow-scrolling:touch}
.sc-mobile-panel[hidden]{display:none}
.sc-mobile-head{border-bottom:1px solid var(--sc-line)}
.sc-mobile-head-inner{display:flex;justify-content:flex-end;align-items:center;padding:20px 0}
.sc-mobile-close{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:none;border:1px solid var(--sc-line);color:#fff;font-size:16px;line-height:1;cursor:pointer;opacity:0;transform:translateY(8px);transition:opacity .15s var(--sc-ease-out),transform .15s var(--sc-ease-out)}
.sc-mobile-close:hover{border-color:var(--sc-yellow);color:var(--sc-yellow)}
.sc-mobile-body{padding:32px 0 calc(48px + env(safe-area-inset-bottom,0px))}
.sc-nav-mobile{display:flex;flex-direction:column;gap:2px;margin-bottom:44px}
.sc-nav-mobile a{font:500 22px/1 Manrope,Arial,sans-serif;color:#fff;text-decoration:none;padding:15px 0;border-bottom:1px solid var(--sc-line);opacity:0;transform:translateY(8px);transition:opacity .15s var(--sc-ease-out),transform .15s var(--sc-ease-out)}
.sc-nav-mobile a[aria-current]{color:var(--sc-yellow)}
.sc-mobile-label{display:block;font:500 11px/1.7 DMMono,Mono,monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--sc-muted);padding:20px 0 4px;opacity:0;transform:translateY(8px);transition:opacity .15s var(--sc-ease-out),transform .15s var(--sc-ease-out)}
.sc-mobile-contact{display:flex;flex-direction:column;gap:16px}
.sc-mobile-contact a{font:500 13px/1.4 DMMono,Mono,monospace;color:var(--sc-muted);text-decoration:none;opacity:0;transform:translateY(8px);transition:opacity .15s var(--sc-ease-out),transform .15s var(--sc-ease-out)}
.sc-mobile-contact a:hover{color:var(--sc-yellow)}

/* the panel surface itself never fades (task 2a) — only its contents animate, staggered in on
   open; closing reverses the same properties over 150ms (task 2d), driven by chrome.js removing
   .sc-open and waiting for this transition before it sets [hidden]. */
.sc-mobile-panel.sc-open .sc-mobile-close,
.sc-mobile-panel.sc-open .sc-mobile-label,
.sc-mobile-panel.sc-open .sc-nav-mobile a,
.sc-mobile-panel.sc-open .sc-mobile-contact a{opacity:1;transform:none;transition:opacity .2s var(--sc-ease-out),transform .2s var(--sc-ease-out);transition-delay:calc(var(--i,0)*30ms)}

@media(prefers-reduced-motion:reduce){
 .sc-mobile-close,.sc-mobile-label,.sc-nav-mobile a,.sc-mobile-contact a{transform:none;transition:opacity .15s ease}
 .sc-mobile-panel.sc-open .sc-mobile-close,
 .sc-mobile-panel.sc-open .sc-mobile-label,
 .sc-mobile-panel.sc-open .sc-nav-mobile a,
 .sc-mobile-panel.sc-open .sc-mobile-contact a{transform:none;transition:opacity .2s ease;transition-delay:0s}
}

.sc-menu-btn:focus-visible,.sc-mobile-close:focus-visible,.site-nav .sc-nav-desktop a:focus-visible,.sc-nav-mobile a:focus-visible,.sc-mobile-contact a:focus-visible,.sc-footer-box:focus-visible,.sc-footer-linkedin:focus-visible,.sc-footer-heading:focus-visible,.sc-footer-links a:focus-visible,.sc-footer-about:focus-visible{outline:2px solid var(--sc-yellow);outline-offset:3px}

/* ===== footer =====
   .sc-footer sits on the <footer> element itself: case pages already carry it, and
   build-shared.mjs now adds it to index's own <footer class="contact"> too (keeping the
   `contact` class, since app.js scrolls #contact to it). One rule neutralises index's
   `.contact{padding/border/margin}` everywhere at once, with rannvijay's actual (zero) values —
   equal specificity to `.contact`, and this file loads after styles.css, so source order wins
   without !important. */
.sc-footer{padding:0;border:0;margin:0;color:#fff}
.container .sc-footer-inner{width:100%}   /* already inside a container: don't double-inset */
/* Every text rule below is scoped under .sc-footer-inner (0,2,0) so it beats index's
   ".contact h2"/".contact p" (0,1,1) on specificity, not load order — checked every chrome
   text rule against page context, not just the two that were visibly wrong. */
.sc-footer-inner .sc-footer-hire{font-family:Manrope,Arial,sans-serif;font-weight:800;font-size:clamp(44px,8vw,72px);line-height:1;letter-spacing:-.02em;color:#fff;margin:0 0 40px}
.sc-footer-inner .sc-footer-hire span{color:var(--sc-yellow)}
.sc-footer-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:40px}
.sc-footer-inner .sc-footer-box{border:1px solid var(--sc-line);color:#fff;font:500 12px/1 DMMono,Mono,monospace;padding:18px 24px;text-decoration:none;transition:border-color .15s,color .15s}
.sc-footer-box:hover{border-color:var(--sc-yellow);color:var(--sc-yellow)}
.sc-footer-inner .sc-footer-linkedin{display:inline-flex;align-items:center;color:#fff;font:500 12px/1 DMMono,Mono,monospace;text-decoration:underline;text-underline-offset:4px;padding:18px 4px;transition:color .15s}
.sc-footer-linkedin:hover{color:var(--sc-yellow)}
.sc-footer-rule{border:0;border-top:1px solid var(--sc-line);margin:0 0 48px}
.sc-footer-columns{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-bottom:48px}
.sc-footer-inner .sc-footer-heading{display:inline-block;font:600 11px/1 DMMono,Mono,monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--sc-yellow);text-decoration:none;margin-bottom:22px;transition:color .15s}
.sc-footer-heading:hover{color:#fff}
.sc-footer-links{display:flex;flex-direction:column;gap:14px}
.sc-footer-inner .sc-footer-links a{color:#fff;text-decoration:none;font:400 17px/1.3 Manrope,Arial,sans-serif;transition:color .15s}
.sc-footer-links a:hover{color:var(--sc-yellow)}
.sc-footer-inner .sc-footer-links-yellow a{font:500 11px/1 DMMono,Mono,monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--sc-yellow)}
.sc-footer-links-yellow a:hover{color:#fff}
.sc-footer-inner .sc-footer-about{display:inline-block;margin-top:30px;color:#fff;text-decoration:none;font:400 17px/1.3 Manrope,Arial,sans-serif;transition:color .15s}
.sc-footer-about:hover{color:var(--sc-yellow)}
.sc-footer-inner .sc-footer-bottom{text-align:right;color:var(--sc-muted);font:11px/1.5 DMMono,Mono,monospace;margin:0}

@media(max-width:1040px){
 .sc-footer-columns{grid-template-columns:1fr;gap:36px}
}
@media(max-width:640px){
 .sc-footer-actions{flex-direction:column}
 .sc-footer-box,.sc-footer-linkedin{width:100%;box-sizing:border-box;justify-content:center;text-align:center}
}

/* keyboard focus on zoomable case images (Wave 20) */
img.zoom:focus-visible,a.zoom-link:focus-visible{outline:2px solid var(--yellow,#FFC83B);outline-offset:4px}

/* Button arrow (Wave 24). The → in <span class="arrow"> used to be a text glyph, but DMMono has no arrow, so every
   device drew it with its own fallback font: a different shape and height on each (about 6px low on Samsung phones).
   The glyph is now hidden (font-size:0; it stays in the markup) and the arrow is drawn as a mask in the 23 x 20 box
   styles.css already gives it, so it sits on the centre of the button text on every device. Colour follows the text
   (currentColor), so hover/active still work; the -45deg hover turn in styles.css is untouched. Same specificity as
   styles.css's .button .arrow; this file loads after it, no !important. In forced-colours mode the glyph comes back. */
.button .arrow{font-size:0;overflow:hidden;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 20' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M.5 10h21M17.5 6l4 4-4 4'/%3E%3C/svg%3E") center/23px 20px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 20' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M.5 10h21M17.5 6l4 4-4 4'/%3E%3C/svg%3E") center/23px 20px no-repeat}
@media(forced-colors:active){.button .arrow{font-size:32px;overflow:visible;background:none;-webkit-mask:none;mask:none}}