.article-page{padding-bottom:0}
.article-header{background:var(--cream);border-bottom:1px solid #d5d9c8}
.article-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:100px;padding-block:18px}
.article-header .brand{width:240px}
.article-header .button{font-size:12px;min-height:45px}
.article-hero{background:#e2e7d5;border-bottom:1px solid #cbd3ba;padding-block:48px 56px}
.article-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.article-hero h1{font-size:clamp(37px,4.15vw,66px);line-height:1.16;letter-spacing:-2px}
.article-hero .place-name{white-space:nowrap}
.article-hero p{margin-top:25px;color:#4f614a;font-size:17px;line-height:1.8}
.article-hero figure{position:relative}
.article-hero img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:4px 30px 4px 30px;box-shadow:0 8px 0 #c5cfb4}
.article-hero figcaption{font-size:10px;color:#52614a;text-align:right;margin-top:16px}
.article-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(35px,6vw,95px);padding-block:64px 78px;align-items:start}
.article-prose{font-size:17px;line-height:1.85;color:#455646}
.article-prose h2{font-size:clamp(25px,2.35vw,34px);color:var(--green);line-height:1.3;letter-spacing:-.9px;margin-top:39px;margin-bottom:18px}
.article-prose h2:first-child{margin-top:0}
.article-prose p+p{margin-top:18px}
.article-prose .button{margin-top:25px;line-height:1.4}
.article-prose strong{color:var(--green)}
.article-note{padding:24px 27px;margin-top:30px;background:#f3e5bc;border-left:4px solid #ae8c36;border-radius:3px 16px 3px 3px;color:#3f503b}
.article-note p+p{margin-top:9px}
.article-sidebar{position:sticky;top:30px;background:var(--green);color:var(--cream);border-radius:4px 24px 4px 24px;padding:clamp(25px,3vw,43px);box-shadow:7px 7px 0 #d9deca}
.article-sidebar h2{font-size:30px;letter-spacing:-1px}
.article-sidebar address{font:16px/1.7 var(--sans);margin-top:21px}
.article-sidebar .hours{border-block:1px solid #d5dfc640;padding-block:15px;margin-block:24px 15px}
.article-sidebar .hours>div{font-size:13px}
.article-sidebar .hours-note{color:#d0d9c5}
.article-sidebar .button{width:100%;margin-top:24px;font-size:12px;gap:14px}
.article-sidebar .button-outline{border-color:#aebda2;color:var(--cream);margin-top:12px}
.article-sidebar .button-outline:hover{background:#355442}
.article-more{border-top:1px solid #cbd3ba;background:#e2e7d5;padding-block:38px}
.article-more .wrap{display:flex;justify-content:space-between;align-items:center;gap:25px}
.article-more h2{font-size:27px;letter-spacing:-.8px}
.article-more p{margin-top:10px;color:#52614a;font-size:14px}
.article-more .button{flex-shrink:0;font-size:12px}
.article-footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:30px;font-size:11px;color:var(--muted)}
@media(max-width:1000px){
 .article-hero h1{font-size:43px}
 .article-layout{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:35px}
 .article-sidebar{padding:25px}
 .article-sidebar .hours>div{flex-direction:column;gap:0}
}
@media(max-width:760px){
 .article-hero-grid,.article-layout{grid-template-columns:1fr}
 .article-hero-grid{gap:30px}
 .article-hero{padding-block:35px}
 .article-hero h1{font-size:clamp(36px,7vw,49px);letter-spacing:-1.5px}
 .article-hero p{font-size:16px;margin-top:20px}
 .article-layout{padding-block:42px 50px;gap:40px}
 .article-prose{font-size:16px}
 .article-sidebar{position:static}
 .article-sidebar .hours>div{flex-direction:row;gap:12px}
 .article-more .wrap{display:block}
 .article-more .button{margin-top:24px}
}
@media(max-width:600px){
 .article-header .wrap{min-height:85px;gap:15px}
 .article-header .brand{width:165px}
 .article-header .button{font-size:10px;padding:10px 12px;min-height:40px}
 .article-footer .wrap{flex-wrap:wrap}
 .article-note{padding:20px}
}
@media(prefers-reduced-motion:reduce){.article-page *{scroll-behavior:auto!important;transition:none!important}}

/* ---------------------------------------------------------------- Our story (pages/about.php)
   Tony Happel, the store he opened in 2016, and the people carrying it forward. Family photographs sit in the
   site's snapshot frame (a cream mat on a slight tilt, a caption line underneath), the way photos get tucked
   into the mirror frame behind a register. Side-by-side blocks line up top (cap height) and bottom. */
.story-page{color:var(--green)}
.snap{position:relative;margin:0;display:flex;flex-direction:column;background:#eee7d9;padding:12px 12px 0;box-shadow:0 16px 35px #213e3218;transform:rotate(var(--snap-tilt,-1.6deg))}
.snap img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:50% 40%}
.snap--tall img{aspect-ratio:3/4}
.snap--square img{aspect-ratio:1}
.snap--portrait img{aspect-ratio:4/5}
.snap figcaption{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:16px 10px 18px;font-size:11px;line-height:1.4;color:#68715e}
.snap figcaption span:first-child{font:italic 19px/1.2 var(--serif);color:var(--green);white-space:nowrap}

/* Hero: the title and lead beside Tony's portrait, the "since 2016" line level with the photo's bottom. */
.sp-hero{padding-block:clamp(44px,5.4vw,84px) clamp(56px,6.4vw,100px);background:var(--cream);border-bottom:1px solid #e3d8bf}
.sp-hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(36px,6vw,96px);align-items:stretch}
.sp-hero-copy{display:flex;flex-direction:column;min-width:0}
.sp-hero .eyebrow{display:flex;align-items:center;gap:12px;color:var(--red);margin-bottom:26px}
.sp-hero .eyebrow span{width:25px;height:1px;background:var(--red)}
.sp-hero h1{font-size:clamp(44px,5.2vw,82px);line-height:1.04;letter-spacing:-2.8px;max-width:9.5em}
.sp-lead{font-size:clamp(17px,1.35vw,20px);line-height:1.75;color:#4f614a;margin-top:28px;max-width:30em}
.sp-since{margin-top:22px;font:italic 17px/1.4 var(--serif);color:var(--green)}
.sp-hero-photo{--snap-tilt:1.4deg;max-width:520px;justify-self:end}

/* Tony's own words close the hero, level with the photo's bottom. */
.sp-hero-quote{margin:auto 0 0;padding:28px 0 0 26px;border-left:3px solid var(--gold)}
.sp-hero-quote p{font:italic clamp(22px,2vw,30px)/1.4 var(--serif);letter-spacing:-.6px;color:var(--green);max-width:20em}
.sp-hero-quote p:before{content:"“"}
.sp-hero-quote p:after{content:"”"}
.sp-hero-quote footer{margin-top:14px;font-size:14px;color:var(--muted)}

/* Chapters: prose beside a photo that fills the prose's height. */
.sp-chapter{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(36px,6vw,96px);align-items:stretch;padding-block:clamp(56px,6.4vw,100px)}
.sp-chapter--photo-first{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.sp-chapter .sp-aside-photo{--snap-tilt:-1.6deg;height:100%}
.sp-chapter .sp-aside-photo img{flex:1 1 auto;aspect-ratio:auto;height:100%;min-height:0}
.sp-chapter--photo-first .sp-aside-photo{--snap-tilt:1.2deg}
.sp-prose{font-size:17px;line-height:1.85;color:#455646;max-width:62ch}
.sp-prose h2{font-size:clamp(32px,3.1vw,46px);line-height:1.15;letter-spacing:-1.4px;color:var(--green);margin:-.19em 0 22px}
.sp-prose p+p{margin-top:18px}
.sp-pull{margin:26px 0 0;padding:4px 0 4px 22px;border-left:3px solid var(--gold)}
.sp-pull p{font:italic clamp(20px,1.7vw,24px)/1.45 var(--serif);color:var(--green);letter-spacing:-.4px}
.sp-pull p:before{content:"“"}
.sp-pull p:after{content:"”"}

/* A section's heading row, like the home page's. */
.sp-section-head{display:flex;justify-content:space-between;align-items:end;gap:48px;margin-bottom:clamp(32px,3.6vw,48px)}
.sp-section-head h2{font-size:clamp(34px,3.4vw,52px);line-height:1.1;letter-spacing:-1.6px;margin-top:-.13em}
.sp-section-head p{font-size:16px;line-height:1.7;color:var(--muted);max-width:30em;text-align:right}

/* The timeline: six stops along a gold line, the year in the ticket's red serif. */
.sp-timeline-band{background:var(--paper);border-block:1px solid #e3d8bf;padding-block:clamp(56px,6.4vw,100px)}
.sp-timeline{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 clamp(18px,2vw,30px)}
.sp-timeline li{position:relative;padding-top:30px;border-top:2px solid #e2cf96}
.sp-timeline li:before{content:"";position:absolute;top:-8px;left:0;width:14px;height:14px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px var(--paper)}
.sp-timeline li:last-child:before{background:var(--red)}
.sp-year{display:block;font:italic clamp(30px,2.6vw,40px)/1 var(--serif);color:var(--red);letter-spacing:-1px}
.sp-timeline h3{font-size:19px;line-height:1.3;letter-spacing:-.4px;margin-top:14px}
.sp-timeline p{font-size:14px;line-height:1.7;color:var(--muted);margin-top:10px}

/* Remembering Tony: the family on the deep green, the copy level with the photo. */
.sp-remember{background:var(--green);color:var(--cream);padding-block:clamp(60px,6.8vw,108px)}
.sp-remember-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,6vw,100px);align-items:stretch}
.sp-remember-photo{--snap-tilt:-1.8deg;background:#f3ecdc;box-shadow:0 24px 50px #0000004d}
.sp-remember-photo img{object-position:50% 35%}
.sp-remember-copy{display:flex;flex-direction:column;min-width:0}
.sp-remember h2{font-size:clamp(36px,3.6vw,56px);line-height:1.08;letter-spacing:-1.8px;color:var(--cream);margin-top:-.13em}
.sp-remember p{font-size:16.5px;line-height:1.8;color:#d7dfcf;margin-top:20px}
.sp-remember p:last-of-type{font:italic 20px/1.5 var(--serif);color:var(--cream)}
.sp-remember .text-link{margin-top:auto;padding-top:30px;align-self:flex-start;color:var(--cream);border-color:#aebda2;font-size:14px}
.sp-remember .text-link svg{width:17px;height:17px}

/* The two people at the counter. */
.sp-people{padding-block:clamp(56px,6.4vw,100px)}
.sp-people-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,64px);max-width:1100px}
.sp-person{display:flex;flex-direction:column}
.sp-person .snap{--snap-tilt:-1.2deg;max-width:380px}
.sp-person:nth-child(2) .snap{--snap-tilt:1.3deg}
.sp-person h3{font-size:clamp(24px,2.1vw,30px);line-height:1.2;letter-spacing:-.8px;margin-top:30px}
.sp-person h3 small{display:block;margin-top:6px;font:700 12.5px/1.4 var(--sans);letter-spacing:.3px;color:var(--red)}
.sp-person p{font-size:15.5px;line-height:1.8;color:#55634f;margin-top:14px;max-width:34em}

/* The close, in the brand's red. */
.sp-close{background:var(--red);color:#fff8e6;padding-block:clamp(60px,6.6vw,104px)}
.sp-close h2{font-size:clamp(32px,3.6vw,56px);line-height:1.12;letter-spacing:-1.8px;max-width:16em}
.sp-close p{font-size:17px;line-height:1.75;color:#f6ddd0;margin-top:22px;max-width:36em}
.sp-close-actions{display:flex;flex-wrap:wrap;gap:14px 18px;margin-top:34px}
.sp-close .button-outline{border-color:#f3d9c8;color:#fff8e6}
.sp-close .button-outline:hover{background:#7d2a1f}
.sp-close .button svg{width:17px;height:17px}

@media(max-width:1150px){
 .sp-timeline{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px clamp(18px,2vw,30px)}
}
@media(max-width:900px){
 .sp-hero-grid,.sp-chapter,.sp-chapter--photo-first,.sp-remember-grid{grid-template-columns:1fr}
 .sp-hero-photo{justify-self:start;max-width:440px}
 .sp-chapter--photo-first .sp-aside-photo{order:2}
 .sp-chapter .sp-aside-photo{height:auto;max-width:440px}
 .sp-chapter .sp-aside-photo img{aspect-ratio:3/2;height:auto}
 .sp-chapter .snap--square img{aspect-ratio:1}
 .sp-section-head{display:block}.sp-section-head p{text-align:left;margin-top:14px}
 .sp-remember-photo{max-width:560px}
 .sp-remember .text-link{padding-top:26px}
}
@media(max-width:600px){
 .sp-timeline{grid-template-columns:1fr;gap:0;border-left:2px solid #e2cf96;padding-left:26px}
 .sp-timeline li{padding:0 0 30px;border-top:0}
 .sp-timeline li:before{top:6px;left:-34px}
 .sp-people-grid{grid-template-columns:1fr;gap:44px}
 .sp-person .snap{max-width:320px}
 .sp-prose{font-size:16px}
 .sp-close-actions .button{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:no-preference){.snap{transition:transform .4s cubic-bezier(.2,.8,.2,1)}.snap:hover{transform:rotate(0)}}