/* House of Fades: old school Yuma shop. Felt letterboard, porcelain-mint chairs, bottle green. */
:root{
  --green:#0f3b2e; --green-2:#185443; --mint:#cfe9da; --mint-2:#e8f4ec; --felt:#1d1d1f; --chrome:#a9b1b4; --pole:#c8323b; --cream:#fbfaf5;
  --sans:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif; --serif:"Newsreader", Georgia, serif; --g:clamp(18px,4vw,48px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--cream);color:var(--green);font:400 1.125rem/1.6 var(--serif)}
img{max-width:100%;height:auto;display:block}
a{color:var(--green-2)}
:focus-visible{outline:3px solid var(--pole);outline-offset:3px}
.skip-link{position:absolute;left:-9999px;top:8px;z-index:1000;background:var(--green);color:#fff;padding:10px 14px}
.skip-link:focus{left:8px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3{font-family:var(--sans);line-height:1.04;margin:0;letter-spacing:-.02em}
.photo-note{display:inline-block;background:#fff3b0;color:#3b3000;font:600 .74rem/1.3 var(--sans);padding:5px 9px;border:1px dashed #a08400;margin-top:8px}

/* header */
.hof-head{position:sticky;top:0;z-index:50;background:var(--cream);border-bottom:2px solid var(--green)}
.hof-bar{position:relative;display:flex;align-items:center;gap:20px;max-width:1240px;margin:0 auto;padding:12px var(--g)}
.hof-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--green);margin-right:auto}
.hof-brand svg{width:42px;height:42px;flex:none}
.hof-brand span{font:800 1.3rem/1 var(--sans);letter-spacing:-.02em}
.hof-brand em{display:block;font:italic 400 .85rem/1.3 var(--serif);letter-spacing:0;color:var(--green-2)}
.hof-links{display:none;list-style:none;margin:0;padding:0;gap:28px}
.hof-links a{font:600 .98rem var(--sans);color:var(--green);text-decoration:none;background:linear-gradient(var(--pole),var(--pole)) 0 100%/0 2px no-repeat;transition:background-size .2s}
.hof-links a:hover{background-size:100% 2px}
.hof-call{font:700 .98rem var(--sans);color:var(--cream);background:var(--green);text-decoration:none;padding:10px 16px;border-radius:6px}
.hof-call .long{display:none}
.nav-toggle{width:44px;height:44px;border:2px solid var(--green);border-radius:6px;background:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:"";display:block;width:18px;height:2px;background:var(--green);position:relative;transition:transform .2s}
.nav-toggle span::before{position:absolute;top:-6px}.nav-toggle span::after{position:absolute;top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
.mobile-menu{position:absolute;top:100%;left:0;right:0;background:var(--mint-2);border-block:2px solid var(--green);padding:6px var(--g) 18px;visibility:hidden;opacity:0;transition:opacity .2s,visibility .2s;max-height:calc(100dvh - 80px);overflow-y:auto}
.mobile-menu.is-open{visibility:visible;opacity:1}
.mobile-menu ul{list-style:none;margin:0;padding:0}
.mobile-menu a{display:block;padding:14px 0;border-bottom:1px solid #9cc5b0;font:700 1.3rem var(--sans);color:var(--green);text-decoration:none}
.demo-ribbon{margin:0;background:var(--green);color:var(--mint);font:500 .8rem/1.3 var(--sans);text-align:center;padding:6px 12px}
@media (min-width:960px){.hof-links{display:flex}.nav-toggle,.mobile-menu{display:none}.hof-call .long{display:inline}.hof-call .short{display:none}}

/* hero */
.hof-hero{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,5vw,64px);max-width:1240px;margin:0 auto;padding:clamp(32px,6vw,84px) var(--g) clamp(40px,6vw,90px);align-items:center}
.kicker{font:600 .95rem var(--sans);margin:0 0 14px;color:var(--green-2)}
.kicker::before{content:"";display:inline-block;width:28px;height:3px;background:var(--pole);vertical-align:middle;margin-right:10px}
.hof-hero h1{font-size:clamp(2.4rem,6.4vw,4.4rem);font-weight:800;max-width:14ch}
.hero-lead{max-width:32em;margin:20px 0 26px;font-size:1.2rem}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px}
.btn-green{display:inline-block;background:var(--green);color:var(--cream);border:0;font:700 1.05rem var(--sans);padding:15px 22px;border-radius:6px;text-decoration:none;cursor:pointer;box-shadow:inset 0 -4px 0 rgba(0,0,0,.25)}
.btn-green:hover{background:var(--green-2)}
.link-arrow{font:700 1.05rem var(--sans);color:var(--green);text-underline-offset:5px}
.letterboard{margin:0;justify-self:center;width:min(100%,520px)}
.board{background:var(--felt);background-image:repeating-linear-gradient(180deg,#232325 0 9px,#141415 9px 11px);border:14px solid #6b4a2b;border-image:linear-gradient(135deg,#8a6339,#5a3d22 40%,#8a6339 70%,#4e351e) 1;padding:clamp(22px,4vw,36px) clamp(14px,3vw,28px);text-align:center;box-shadow:0 22px 40px -18px rgba(15,59,46,.55);transform:rotate(-1.5deg)}
.board p{margin:0;color:#f6f6f2;font:700 clamp(1.5rem,5.4vw,2.3rem)/1.35 var(--sans);letter-spacing:.12em;white-space:nowrap;text-shadow:0 2px 0 #000}
.board .small{font-size:clamp(.95rem,3vw,1.25rem);letter-spacing:.24em;margin-top:10px;color:#e9e5d4}
.letterboard figcaption{font:italic .9rem var(--serif);text-align:center;margin-top:16px;color:var(--green-2)}
@media (min-width:900px){.hof-hero{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}

/* chairs */
.chairs{background:var(--mint);padding:clamp(50px,7vw,96px) var(--g);border-block:2px solid var(--green)}
.chairs-intro{max-width:1240px;margin:0 auto 34px;display:grid;gap:10px 40px;grid-template-columns:minmax(0,1fr)}
.chairs h2{font-size:clamp(2rem,5vw,3.2rem);font-weight:800}
.chairs-intro p{margin:0;max-width:30em}
.chair-row{list-style:none;margin:0 auto;padding:0;max-width:1240px;display:grid;gap:18px;grid-template-columns:repeat(2,minmax(0,1fr))}
.chair{background:var(--cream);border:2px solid var(--green);border-radius:18px 18px 4px 4px;padding:18px 16px 20px;text-align:center}
.chair svg{width:min(120px,70%);margin:0 auto 10px}
.chair .seat{fill:var(--mint);stroke:var(--green);stroke-width:3}
.chair .chrome{fill:var(--chrome);stroke:var(--green);stroke-width:2}
.chair h3{font-size:1.3rem;font-weight:700}
.chair p{margin:.4rem 0 0;font-size:1rem}
.chair--open{border-style:dashed;background:transparent}
.chair--open .seat{fill:transparent;stroke-dasharray:6 5}
.roster-note{max-width:1240px;margin:20px auto 0;font:italic .95rem var(--serif)}
@media (min-width:900px){.chairs-intro{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end}.chair-row{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* kids */
.kids{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(26px,5vw,70px);max-width:1240px;margin:0 auto;padding:clamp(56px,8vw,110px) var(--g);align-items:center}
.kids-photo{margin:0;background:var(--mint);border-radius:200px 200px 10px 10px;overflow:hidden;max-width:460px;position:relative}
.kids-photo img{aspect-ratio:9/10;object-fit:cover;width:100%}
.kids-photo .photo-note{position:absolute;left:12px;bottom:12px;margin:0}
.kids h2{font-size:clamp(2rem,5vw,3.3rem);font-weight:800;max-width:15ch}
.pull{font:italic 400 clamp(1.35rem,3vw,1.7rem)/1.4 var(--serif);margin:20px 0;padding-left:18px;border-left:4px solid var(--pole)}
.aside-tag{display:inline-block;background:var(--mint-2);border:2px solid var(--green);border-radius:999px;padding:8px 18px;font:600 .95rem var(--sans)}
@media (min-width:900px){.kids{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}

/* menu */
.menu{display:grid;grid-template-columns:minmax(0,1fr);gap:0;background:var(--green);color:var(--cream)}
.menu-card{padding:clamp(44px,7vw,90px) var(--g)}
.menu h2{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:800;margin-bottom:24px;color:var(--mint)}
.leaders{margin:0;max-width:560px}
.leaders div{display:flex;align-items:baseline;gap:10px;padding:10px 0}
.leaders dt{font:600 1.25rem var(--sans);white-space:nowrap}
.leaders div::after{content:"";order:2;flex:1;border-bottom:2px dotted var(--chrome);transform:translateY(-4px)}
.leaders dd{order:3;margin:0;font:italic 1rem var(--serif);color:var(--mint);white-space:nowrap}
.menu-foot{margin-top:18px;font:italic 1rem var(--serif);color:var(--mint)}
.menu-photo{margin:0;position:relative;background:var(--green-2);min-height:320px}
.menu-photo img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.menu-photo .photo-note{position:absolute;right:12px;bottom:12px;margin:0}
@media (min-width:900px){.menu{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
@media (max-width:420px){.leaders dt{font-size:1.08rem}.leaders dd{font-size:.9rem}}

/* words */
.words{max-width:1240px;margin:0 auto;padding:clamp(56px,8vw,100px) var(--g);display:grid;gap:26px;grid-template-columns:minmax(0,1fr)}
.words blockquote{margin:0;padding-top:18px;border-top:2px solid var(--green)}
.words blockquote p{margin:0;font:400 clamp(1.4rem,3vw,1.9rem)/1.3 var(--serif)}
.words blockquote footer{margin-top:10px;font:600 .85rem var(--sans);color:var(--green-2)}
.words-src{font:600 .95rem var(--sans);margin:0}
@media (min-width:900px){.words{grid-template-columns:repeat(3,minmax(0,1fr))}.words-src{grid-column:1/-1}}

.dove{background:var(--felt);color:#f1efe6;padding:22px var(--g);text-align:center}
.dove p{margin:0 auto;max-width:52em;font-size:1.08rem}
.dove strong{font-family:var(--sans);color:#fff}

/* ask */
.ask{background:var(--mint-2);padding:clamp(50px,7vw,90px) var(--g)}
.ask-inner{max-width:880px;margin:0 auto}
.ask h2{font-size:clamp(1.9rem,4.5vw,2.8rem);font-weight:800}
.demo-label{display:inline-block;font:700 .78rem var(--sans);background:#fff3b0;border:1px dashed #a08400;padding:4px 8px;color:#3b3000}
.ask-form{display:grid;gap:4px 18px;grid-template-columns:minmax(0,1fr);margin-top:14px}
.field{margin-bottom:12px;min-width:0}
.field label{display:block;font:600 .92rem var(--sans);margin-bottom:5px}
.field input,.field textarea{width:100%;font:inherit;font-size:1rem;padding:12px;border:2px solid var(--green);border-radius:6px;background:#fff;color:var(--green)}
.field.has-error input,.field.has-error textarea{border-color:#a3161f}
.field-error{display:none;color:#a3161f;font:600 .85rem var(--sans);margin:4px 0 0}
.field.has-error .field-error{display:block}
.ask-form .btn-green{justify-self:start}
.form-success{display:none;padding:16px 0}
.form-success.is-visible{display:block}
@media (min-width:700px){.ask-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.field--wide{grid-column:1/-1}}

/* visit */
.visit{position:relative;min-height:520px;background:#cfd8d3}
.visit iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.visit-card{position:relative;margin:0 var(--g);top:clamp(24px,5vw,60px);max-width:400px;background:var(--cream);border:2px solid var(--green);border-radius:16px;padding:26px;box-shadow:0 14px 30px -12px rgba(15,59,46,.5)}
.visit h2{font-size:2rem;font-weight:800}
.visit-addr{font:600 1.2rem/1.4 var(--sans);margin:12px 0}
.hof-hours{border-collapse:collapse;width:100%;font-family:var(--sans)}
.hof-hours caption{caption-side:bottom;text-align:left;font:italic .88rem var(--serif);padding-top:8px}
.hof-hours th,.hof-hours td{padding:7px 0;border-bottom:1px solid #9cc5b0;text-align:left;font-weight:600}
.hof-hours td{text-align:right}
.visit-links{font:700 1.05rem var(--sans);margin:16px 0 0}
@media (max-width:640px){.visit{min-height:0;display:flex;flex-direction:column-reverse}.visit iframe{position:static;height:320px}.visit-card{top:0;margin:0;max-width:none;border-radius:0;border-width:0 0 2px;box-shadow:none}}

/* footer */
.hof-foot{background:var(--green);color:var(--mint)}
.stripe{height:18px;background:repeating-linear-gradient(-45deg,var(--pole) 0 14px,#fff 14px 28px,#2b5fa8 28px 42px,#fff 42px 56px)}
.foot-inner{max-width:1240px;margin:0 auto;padding:34px var(--g) 40px;text-align:center}
.foot-name{font:800 clamp(2.2rem,7vw,4rem)/1 var(--sans);color:var(--cream);margin:0 0 12px;letter-spacing:-.03em}
.foot-inner p{margin:6px 0}
.foot-inner a{color:var(--cream)}
.foot-small{font-size:.85rem;opacity:.85}
.board .small{white-space:normal}