/* Right of Way — restrained, editorial, mobile-first where it matters. */
:root { color-scheme: light; --cream:#F7F5EF; --ink:#202722; --muted:#62675F; --red:#AD352A; --line:#DADCD3; --dark:#1C2520; --soft:#ECEEE6; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:108px; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
[hidden] { display:none !important; }
button,input,textarea { font:inherit; }
a { color:inherit; text-decoration:none; }
button,a,summary { -webkit-tap-highlight-color:transparent; }
button,a,summary,input,textarea { touch-action:manipulation; }
button:not(:disabled),summary { cursor:pointer; }
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible { outline:3px solid var(--red); outline-offset:4px; }
::selection { background:#EACAC0; color:var(--ink); }
h1,h2,h3,p { margin:0; }
img { display:block; max-width:100%; }
.icon { width:24px; height:24px; flex-shrink:0; vertical-align:middle; display:inline-block; }
.site .shell { width:calc(100% - 112px); max-width:1328px; margin-inline:auto; padding-inline:0; }
.site .eyebrow { display:block; font-size:10px; font-weight:750; letter-spacing:.17em; line-height:1.5; text-transform:uppercase; }
.eyebrow-line::before { content:""; display:inline-block; width:27px; height:2px; background:var(--red); margin:0 12px 3px 0; }
.site em { font-family:Georgia,"Times New Roman",serif; font-weight:400; color:var(--red); letter-spacing:-.055em; }
.site .button { display:inline-flex; align-items:center; justify-content:center; gap:24px; min-height:52px; padding:14px 22px; font-size:13px; line-height:1.4; font-family:inherit; font-weight:650; border-radius:7px; text-transform:none; letter-spacing:0; box-shadow:none; text-decoration:none; transition:background .2s,transform .2s,border-color .2s; border:1px solid transparent; white-space:nowrap; }
.site .button .icon { width:19px; height:19px; }
.site .button:hover { transform:translateY(-2px); box-shadow:none; }
.site .button-primary { color:#FFF; background:var(--red); }
.site .button-primary:hover { background:#8F2A22; }
.site .button-outline { color:var(--ink); background:transparent; border-color:#AAB0A5; }
.site .button-outline:hover { background:#E8EBE1; border-color:var(--ink); }
.site .button:disabled,.site .button[aria-disabled="true"] { color:#687063; background:#E3E6DC; border-color:#D3D8CC; cursor:not-allowed; transform:none; box-shadow:none; }
.site .text-link { display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:600; line-height:1.5; min-height:44px; text-decoration:underline; text-underline-offset:6px; text-decoration-color:#A9AFA3; }
.text-link .icon { width:17px; height:17px; transition:transform .2s; }
.text-link:hover .icon { transform:translate(2px,2px); }
.skip-link { position:fixed; top:8px; left:8px; z-index:100; padding:10px 18px; background:var(--cream); border:2px solid var(--red); border-radius:6px; transform:translateY(-150%); }
.skip-link:focus { transform:translateY(0); }
.utility-bar { height:32px; display:flex; align-items:center; justify-content:center; background:var(--dark); color:#F2F3EC; font-size:9px; font-weight:650; letter-spacing:.16em; text-align:center; padding:0 16px; }
.header { position:sticky; top:0; z-index:20; background:rgba(247,245,239,.96); border-bottom:1px solid var(--line); backdrop-filter:blur(16px); }
.site .header-inner { display:flex; align-items:center; justify-content:space-between; gap:30px; height:86px; }
.brand { display:inline-flex; align-items:center; gap:11px; flex-shrink:0; }
.brand-mark { background:var(--red); color:var(--cream); display:grid; place-items:center; width:37px; height:43px; border-radius:5px 5px 12px 12px; }
.brand-mark .icon { width:29px; height:29px; transform:rotate(7deg); }
.brand-type { display:flex; flex-direction:column; line-height:1; gap:7px; }
.brand-type strong { font-size:16px; font-weight:850; letter-spacing:.075em; }
.brand-type>span { font-size:8px; font-weight:600; letter-spacing:.285em; }
.desktop-nav { display:flex; gap:10px; align-items:center; }
.site .nav-link { display:inline-flex; position:relative; justify-content:center; align-items:center; padding:13px 20px; min-height:44px; min-width:64px; border:0; border-radius:6px; color:var(--ink); font-size:13px; font-weight:550; text-transform:none; letter-spacing:0; line-height:1.4; background:none; }
.site .nav-link:hover { background:#EEEDE5; }
.site .nav-link.is-current { background:#EAECE3; }
.site .nav-link.is-current::after { content:""; display:block; width:4px; height:4px; border-radius:50%; background:var(--red); margin-left:7px; }
.header-signoff { display:flex; gap:13px; align-items:center; font-size:8px; font-weight:650; letter-spacing:.1em; }
.header-signoff .icon { width:18px; color:var(--red); }
.mobile-menu { display:none; }
.site .hero { display:grid; grid-template-columns:.94fr 1.13fr; gap:46px; align-items:center; padding-block:42px 34px; }
.hero-copy { padding-block:22px; }
.site .hero-title { font-family:inherit; font-size:clamp(46px,5.2vw,76px); font-weight:500; letter-spacing:-.064em; line-height:1.05; margin:24px 0 25px; }
.site .hero-title em { display:inline-block; line-height:1.03; letter-spacing:-.065em; }
.site .hero-description { max-width:380px; color:var(--muted); font-size:14px; line-height:1.85; margin:0 0 27px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px 23px; align-items:center; }
.hero-footnote { display:flex; align-items:center; gap:12px; margin-top:42px; color:var(--muted); font-size:10px; line-height:1.65; max-width:330px; }
.hero-footnote .icon { color:var(--red); width:24px; height:30px; transform:rotate(8deg); }
.site .artwork { position:relative; aspect-ratio:1.12; border-radius:14px; overflow:hidden; margin:0; background:#D9DACC; box-shadow:none; isolation:isolate; }
.artwork picture { display:block; width:100%; height:100%; }
.artwork img { width:100%; height:100%; object-fit:cover; object-position:center; }
.artwork-label { position:absolute; top:20px; left:21px; display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border-radius:4px; font-size:7px; font-weight:750; letter-spacing:.10em; line-height:1.5; color:var(--ink); background:rgba(247,245,239,.94); }
.tiny-dot { display:inline-block; width:5px; height:5px; background:var(--red); border-radius:50%; flex-shrink:0; }
.artwork-caption { position:absolute; left:21px; right:21px; bottom:20px; display:flex; align-items:center; justify-content:space-between; gap:15px; padding:13px 16px; border-radius:5px; background:rgba(247,245,239,.94); font-size:11px; font-weight:550; backdrop-filter:blur(8px); }
.artwork-caption .icon { width:20px; height:20px; color:var(--red); }
.site .places { display:flex; justify-content:space-between; gap:20px; align-items:center; border-bottom:1px solid var(--line); padding-block:24px 31px; }
.places-intro { font-size:9px; font-weight:700; letter-spacing:.12em; color:var(--muted); }
.places>div { display:flex; align-items:center; gap:27px; font-size:12px; }
.places i { display:inline-block; height:4px; width:4px; border-radius:50%; background:#AAB1A4; }
.site .story { display:grid; grid-template-columns:.85fr 1.15fr; gap:100px; padding-block:88px 91px; scroll-margin-top:22px; }
.story .eyebrow { font-size:9px; color:var(--muted); }
.site .story h2 { font-size:clamp(40px,3.8vw,54px); font-weight:500; line-height:1.08; letter-spacing:-.055em; margin:18px 0 23px; }
.hook-divider { display:flex; align-items:center; gap:14px; max-width:164px; margin-top:28px; }
.hook-divider .icon { width:20px; height:26px; color:var(--red); }
.hook-divider span { height:1px; flex:1; background:#BCC2B5; }
.story-copy { padding-top:18px; max-width:610px; }
.site .story-copy p { font-size:15px; line-height:1.9; margin:0 0 22px; color:var(--muted); }
.site .story-copy .story-lead { font-size:19px; line-height:1.7; color:var(--ink); letter-spacing:-.01em; }
.story-signoff { display:flex; align-items:center; gap:10px; font-size:10px; font-weight:650; margin-top:30px; }
.mission-band { background:var(--dark); color:var(--cream); }
.site .mission-inner { display:flex; justify-content:space-between; align-items:center; gap:40px; padding-block:64px 67px; }
.mission-band .eyebrow { color:#C8CEC3; font-size:9px; }
.site .mission-band h2 { font-size:clamp(37px,4.2vw,61px); line-height:1.15; font-weight:450; letter-spacing:-.05em; margin-top:18px; }
.site .mission-band em { color:#F0927C; letter-spacing:-.045em; position:relative; }
.mission-band em::after { content:""; position:absolute; left:0; right:-10px; bottom:-11px; height:9px; border-top:3px solid #C75140; border-radius:50%; transform:rotate(-3deg); }
.mission-seal { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; width:168px; height:168px; border:1px solid #687467; border-radius:50%; color:#D4DCCF; margin-right:40px; transform:rotate(10deg); flex-shrink:0; }
.mission-seal .icon { width:59px; height:59px; stroke-width:1; }
.mission-seal span { font-size:7px; font-weight:600; letter-spacing:.17em; }
.footer { background:var(--dark); color:var(--cream); }
.footer-top { display:flex; align-items:center; justify-content:space-between; gap:40px; padding-block:37px 36px; border-top:1px solid #455044; }
.brand-light .brand-mark { background:#2D392E; color:#EBC6B7; border:1px solid #62715F; }
.brand-light .brand-type strong { font-size:14px; }
.brand-light .brand-type>span { font-size:7px; }
.footer-top p { font-size:10px; color:#BAC4B5; margin-top:17px; }
.footer-social { text-align:right; }
.footer-social .eyebrow { font-size:8px; color:#C4CDBE; letter-spacing:.14em; margin-bottom:13px; }
.social-icons { display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.site .social-icon { display:inline-flex; justify-content:center; align-items:center; width:44px; height:44px; padding:11px; border:1px solid #62715F; border-radius:50%; color:#F4F4EB; font-size:0; line-height:1; background:transparent; transition:background .2s,transform .2s; }
.site .social-icon .icon { width:20px; height:20px; }
.site .social-icon:hover { background:#354334; transform:translateY(-2px); }
.site .social-icon[aria-disabled="true"] { color:#A6B39E; border-color:#50604B; cursor:default; transform:none; }
.social-pending { display:block; font-size:9px; color:#AEBBA6; margin-top:9px; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; gap:20px; color:#B6C3AD; border-top:1px solid #3D493A; padding-block:21px 23px; font-size:8px; }
.footer-bottom>span:nth-child(2) { font-size:7px; letter-spacing:.13em; }
.footer-bottom>a { display:inline-flex; align-items:center; gap:8px; min-height:32px; }
.footer-bottom>a .icon { width:14px; height:14px; }
.site .shop-hero { padding-block:64px; }
.site .shop-hero .hero-title { font-size:clamp(47px,4.8vw,69px); }
.site .status-pill { display:inline-flex; align-items:center; padding:7px 12px; border:1px solid #C4CDBB; border-radius:5px; font-size:9px; line-height:1.5; letter-spacing:.12em; font-weight:650; background:var(--soft); color:#3C5137; height:auto; margin-bottom:20px; }
.site .status-pill .MuiChip-label { padding:0; }
.shop-hero .hero-footnote { margin-top:30px; }
.shop-bottom { background:var(--soft); padding-block:54px 59px; text-align:center; }
.site .shop-bottom h2 { font-size:clamp(28px,3.2vw,44px); font-weight:500; line-height:1.2; letter-spacing:-.045em; margin:16px 0; }
.shop-bottom p { font-size:13px; color:var(--muted); }
.shop-bottom .text-link { margin-top:12px; }
.small-note { font-size:11px; color:var(--muted); margin-top:13px; }
.site .contact-heading { padding-block:58px 28px; }
.site .contact-heading .hero-title { font-size:clamp(46px,5vw,70px); margin-bottom:22px; }
.site .contact-heading .hero-description { max-width:490px; }
.site .contact-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:54px; padding-block:0 78px; align-items:start; }
.site .contact-card { background:var(--soft); border:1px solid #DBE0D3; border-radius:12px; padding:31px; }
.contact-icon { display:grid; place-items:center; width:43px; height:43px; border-radius:50%; background:#DEE5D5; color:#4C5E43; margin-bottom:17px; }
.site .contact-card h2,.site .contact-social h2,.site .contact-form-card h2 { font-size:26px; letter-spacing:-.04em; line-height:1.25; font-weight:500; margin-bottom:12px; }
.contact-card p { font-size:13px; color:var(--muted); margin-bottom:20px; max-width:310px; overflow-wrap:anywhere; }
.contact-card p a { text-decoration:underline; text-underline-offset:3px; }
.contact-social { padding-top:32px; }
.contact-social .eyebrow { color:var(--muted); font-size:8px; }
.site .contact-social h2 { font-size:23px; margin:11px 0 16px; }
.social-list { display:flex; flex-direction:column; }
.site .social-row { display:flex; align-items:center; gap:14px; width:100%; text-align:left; border-bottom:1px solid var(--line); border-radius:0; padding:15px 0; color:var(--ink); font-family:inherit; background:transparent; line-height:1.4; }
.social-row>.icon { width:21px; height:21px; }
.social-row-label { font-size:13px; font-weight:600; }
.social-row-state { margin-left:auto; font-size:10px; color:var(--muted); }
.social-row>.icon:last-child { width:16px; height:16px; color:var(--red); }
.site .social-row[aria-disabled="true"] { color:#687362; cursor:default; }
.site .social-row[aria-disabled="true"]>.icon:last-child { color:#78816F; }
.site .contact-form-card { background:#FDFCFA; border:1px solid #DCDDD5; padding:34px 35px; border-radius:12px; color:var(--ink); }
.contact-form-card>p { color:var(--muted); font-size:13px; margin-bottom:25px; }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
#contact-form label { display:flex; flex-direction:column; gap:9px; font-size:11px; font-weight:650; margin-bottom:21px; }
#contact-form input,#contact-form textarea { display:block; width:100%; border:1px solid #CFD3C7; border-radius:6px; background:transparent; color:var(--ink); padding:13px 14px; font-weight:400; line-height:1.55; font-size:14px; min-width:0; }
#contact-form input { height:48px; }
#contact-form textarea { resize:vertical; min-height:160px; max-height:450px; }
#contact-form input::placeholder,#contact-form textarea::placeholder { color:#777D70; opacity:1; }
.site .form-submit { width:100%; justify-content:space-between; }
.form-explainer { font-size:10px; color:var(--muted); margin-top:13px; line-height:1.7; }
.form-unavailable { font-size:10px; color:#77564A; background:#F2E9DE; padding:10px 12px; border-radius:5px; margin-top:14px; }
.toast { position:fixed; bottom:22px; left:50%; transform:translate(-50%,20px); opacity:0; pointer-events:none; z-index:80; width:max-content; max-width:calc(100vw - 32px); color:white; background:#283727; padding:14px 20px; border-radius:8px; font-size:13px; line-height:1.5; box-shadow:0 5px 25px #0003; transition:opacity .2s,transform .2s; }
.toast.is-visible { opacity:1; transform:translate(-50%,0); }
@media (min-width:1100px) { .hero-copy { animation:enter .55s ease-out both; } .artwork { animation:enter .65s .05s ease-out both; } }
@keyframes enter { from { transform:translateY(10px); } to { transform:translateY(0); } }
@media (min-width:1540px) { .site .hero { gap:64px; } .site .artwork { aspect-ratio:1.17; } }
@media (max-width:1150px) { .site .shell { width:calc(100% - 72px); } .header-signoff { display:none; } .site .hero { gap:30px; grid-template-columns:1fr 1.08fr; } .site .hero-title { font-size:clamp(42px,5.5vw,64px); } .hero-footnote { margin-top:25px; } .site .story { gap:65px; } .places>div { gap:17px; } .mission-seal { margin-right:0; width:148px; height:148px; } .site .contact-grid { gap:32px; } .field-grid { grid-template-columns:1fr; gap:0; } }
@media (max-width:900px) { .site .shell { width:calc(100% - 48px); } .site .hero { gap:22px; } .site .hero-title { font-size:44px; } .site .hero-description { font-size:13px; } .hero-actions { gap:9px; } .hero-footnote { font-size:9px; } .site .artwork { aspect-ratio:.85; } .artwork-label { font-size:6px; left:12px; top:15px; padding:6px 8px; } .artwork-caption { left:12px; right:12px; bottom:15px; padding:10px 12px; font-size:10px; } .site .places { gap:15px; flex-direction:column; padding-block:20px 25px; } .site .story { gap:45px; padding-block:60px; } .site .story-copy .story-lead { font-size:17px; } .site .story-copy p { font-size:13px; } .story-signoff { font-size:9px; } .site .contact-form-card { padding:28px; } .site .contact-card { padding:26px; } .site .contact-grid { grid-template-columns:.85fr 1.15fr; gap:24px; } }
@media (max-width:760px) { html { scroll-padding-top:85px; } .utility-bar { height:29px; font-size:7px; letter-spacing:.14em; } .site .header-inner { height:72px; } .brand-mark { width:31px; height:36px; } .brand-mark .icon { width:25px; height:25px; } .brand-type strong { font-size:13px; } .brand-type>span { font-size:6.5px; } .brand-type { gap:6px; } .desktop-nav { display:none; } .mobile-menu { display:block; position:relative; } .mobile-menu summary { list-style:none; display:flex; align-items:center; justify-content:center; padding:10px; min-height:44px; border:1px solid #D9DED1; border-radius:6px; } .mobile-menu summary::-webkit-details-marker { display:none; } .mobile-menu summary>.icon { width:21px; height:21px; } .mobile-menu summary>span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); } .mobile-menu nav { position:absolute; right:0; top:54px; width:210px; padding:8px; background:var(--cream); border:1px solid var(--line); border-radius:9px; box-shadow:0 12px 30px #15211018; display:flex; flex-direction:column; gap:4px; } .mobile-menu .nav-link { justify-content:flex-start; } .site .hero { grid-template-columns:1fr; gap:28px; padding-block:28px 22px; } .hero-copy { padding:0; } .site .hero-title { font-size:clamp(43px,8.8vw,62px); margin:20px 0 20px; } .site .hero-description { font-size:14px; max-width:430px; margin-bottom:23px; } .site .eyebrow { font-size:8px; } .hero-actions { gap:12px 21px; } .hero-footnote { margin-top:24px; font-size:9px; max-width:100%; } .site .artwork { aspect-ratio:1.16; } .artwork-label { font-size:6.5px; top:12px; left:12px; } .artwork-caption { bottom:12px; font-size:10px; } .site .places { padding-block:13px 24px; gap:13px; } .places-intro { font-size:8px; } .places>div { font-size:10px; gap:16px; flex-wrap:wrap; justify-content:center; row-gap:8px; } .places i { width:3px; height:3px; } .site .story { grid-template-columns:1fr; gap:28px; padding-block:43px 47px; } .site .story h2 { font-size:42px; margin:15px 0 0; } .hook-divider { display:none; } .story-copy { padding:0; max-width:none; } .site .story-copy .story-lead { font-size:17px; line-height:1.7; } .site .story-copy p { font-size:14px; line-height:1.8; margin-bottom:19px; } .story-signoff { margin-top:24px; font-size:9px; } .site .mission-inner { padding-block:44px 49px; gap:20px; } .site .mission-band h2 { font-size:clamp(31px,6.8vw,44px); line-height:1.2; margin-top:17px; } .mission-seal { display:none; } .footer-top { padding-block:31px; gap:28px; align-items:flex-start; flex-direction:column; } .footer-social { text-align:left; } .social-icons { justify-content:flex-start; } .footer-top p { font-size:10px; } .footer-bottom { flex-wrap:wrap; gap:5px 18px; font-size:8px; padding-block:17px; } .footer-bottom>span:nth-child(2) { display:none; } .footer-bottom>a { margin-left:auto; } .site .shop-hero { padding-block:34px; } .site .shop-hero .hero-title { font-size:clamp(44px,8.5vw,64px); } .shop-bottom { padding-block:40px; } .site .shop-bottom h2 { font-size:30px; } .site .contact-heading { padding-block:34px 14px; } .site .contact-heading .hero-title { font-size:clamp(41px,7.9vw,62px); } .site .contact-grid { grid-template-columns:1fr; padding-bottom:47px; gap:28px; } .contact-aside { display:contents; } .contact-card { order:0; } .contact-form-card { order:1; } .contact-social { order:2; padding-top:9px; } .site .contact-card h2,.site .contact-social h2,.site .contact-form-card h2 { font-size:25px; } .field-grid { grid-template-columns:1fr 1fr; gap:14px; } #contact-form input,#contact-form textarea { font-size:16px; } .site .contact-form-card { padding:25px; } }
@media (max-width:420px) { .site .shell { width:calc(100% - 36px); } .brand { gap:9px; } .brand-type strong { font-size:12px; } .brand-type>span { font-size:6px; } .site .hero-title { font-size:clamp(38px,10.5vw,44px); } .site .button { padding-inline:16px; gap:18px; min-height:49px; font-size:12px; } .site .text-link { font-size:11px; gap:8px; } .hero-actions { gap:13px; } .hero-footnote { font-size:8px; gap:8px; } .site .artwork { aspect-ratio:1.08; } .places>div { gap:10px; font-size:9px; } .field-grid { grid-template-columns:1fr; gap:0; } .artwork-label { font-size:6px; } .footer-bottom { font-size:7.5px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none !important; transition:none !important; } }
@media print { .utility-bar,.header,.hero-actions,.mobile-menu,.footer-social,.contact-form-card,.toast { display:none !important; } .site .shell { width:100%; } .site .hero,.site .story { padding-block:20px; } .mission-band,.footer { background:white; color:black; } .footer-top,.footer-bottom { border-color:#AAA; } .artwork { break-inside:avoid; } }