/* Jack Sheehan's Drive-In Cleaners. Look: mid-century porcelain-enamel shop sign (teal + white + red),
   pink claim-ticket stubs, a printed counter price list. Fonts self-hosted (Oswald OFL, Yellowtail Apache-2.0). */
@font-face{font-family:"Oswald";src:url(fonts/oswald-latin-var.woff2) format("woff2");font-weight:200 700;font-display:swap}
@font-face{font-family:"Yellowtail";src:url(fonts/yellowtail-latin.woff2) format("woff2");font-weight:400;font-display:swap}
:root{
  --ink:#151515; --gray:#555; --rule:#d5d5cf; --paper:#fff;
  --enamel:#0d5257; --enamel-2:#093c40; --enamel-tint:#eaf1f1;
  --red:#b3202a; --red-dk:#8f1820; --gold:#f3c64a;
  --stub:#f9dcd8; --stub-edge:#d9aaa4;
  --tag:#fff1a8; --tag-ink:#4d3b00; --focus:#ffbf47;
  --sign:"Oswald","Arial Narrow","Roboto Condensed",sans-serif-condensed,Impact,sans-serif;
  --script:"Yellowtail","Brush Script MT",cursive;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:76px;scroll-padding-bottom:84px;-webkit-text-size-adjust:100%}
@media (min-width:900px){html{scroll-padding-top:140px;scroll-padding-bottom:32px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
body{margin:0;font:17px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--ink);background:var(--paper);padding-bottom:calc(76px + env(safe-area-inset-bottom))}
@media (min-width:900px){body{padding-bottom:0}}
h1,h2,h3{font-family:var(--sign);font-weight:600;line-height:1.08;margin:0 0 .45em;letter-spacing:.005em}
h2{font-size:clamp(1.9rem,6vw,2.6rem);text-transform:uppercase;font-weight:700}
h3{font-size:1.3rem}
a{color:var(--enamel)}
p{margin:0 0 .9em}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;padding:0 max(18px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left))}
.narrow{max-width:800px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:12px 16px;z-index:100}
.skip:focus{left:8px;top:8px}
.small{font-size:.92rem;color:var(--gray)}
.center{text-align:center}
.confirm{display:inline-block;background:var(--tag);color:var(--tag-ink);font:600 .75rem/1.3 system-ui,sans-serif;padding:2px 7px;border:1px dashed #a68600;border-radius:3px;vertical-align:middle;letter-spacing:.01em}
.spec-bar{background:#2a2a2a;color:#f1f1f1;font-size:.875rem;line-height:1.4;padding:7px 18px;text-align:center}

/* ---------- buttons: rectangular, sign-shop, not pills ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 16px;border-radius:4px;font:650 1rem/1.15 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;text-decoration:none;border:2px solid transparent;cursor:pointer;text-align:center}
.btn-lg{min-height:54px;font-size:1.08rem}
.btn-block{width:100%}
.btn-red{background:var(--red);color:#fff}.btn-red:hover{background:var(--red-dk)}
.btn-ink{background:var(--ink);color:#fff}.btn-ink:hover{background:#333}
.btn-line{background:#fff;color:var(--ink);border-color:var(--ink)}.btn-line:hover{background:var(--ink);color:#fff}
.ico{width:18px;height:18px;flex:none}
.linkish{background:none;border:0;color:var(--enamel);text-decoration:underline;font:inherit;cursor:pointer;padding:4px 2px;min-height:44px;min-width:44px}

/* ---------- enamel sign wordmark ---------- */
.sign{display:inline-flex;flex-direction:column;align-items:flex-start;background:var(--enamel);color:#fff;padding:5px 12px 3px;border-radius:4px;box-shadow:inset 0 0 0 2px var(--enamel),inset 0 0 0 3.5px #fff}
.sign-name{font:700 1.2rem/1 var(--sign);text-transform:uppercase;letter-spacing:.06em}
.sign-script{font:400 1.2rem/1.05 var(--script);color:var(--gold);margin:-1px 0 0 14px;letter-spacing:.01em}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:3px solid var(--ink)}
.header-row{display:flex;align-items:center;gap:14px;min-height:62px;position:relative}
.brand{display:flex;align-items:center;text-decoration:none;margin-right:auto;min-height:48px}
.menu-btn{min-height:46px;min-width:76px;padding:8px 14px;border:2px solid var(--ink);border-radius:4px;background:#fff;color:var(--ink);font:650 16px/1 system-ui,-apple-system,sans-serif;cursor:pointer}
.menu-btn[aria-expanded="true"]{background:var(--ink);color:#fff}
.main-nav{display:none}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:2px}
.main-nav a{display:flex;align-items:center;min-height:48px;padding:0 11px;color:var(--ink);text-decoration:none;font:500 1.02rem/1 var(--sign);text-transform:uppercase;letter-spacing:.04em}
.main-nav a:hover{color:var(--red)}
.header-call{display:none}
@media (max-width:899px){
  .main-nav.is-open{display:block;position:absolute;left:-18px;right:-18px;top:calc(100% + 3px);background:#fff;border-bottom:3px solid var(--ink);box-shadow:0 10px 20px rgba(0,0,0,.18);z-index:70}
  .main-nav.is-open ul{flex-direction:column;padding:4px 18px 10px}
  .main-nav.is-open a{border-bottom:1px solid var(--rule);font-size:1.15rem}
}
@media (max-width:899px) and (max-height:520px){.main-nav.is-open ul{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}}
@media (min-width:900px){
  .menu-btn{display:none}
  .main-nav{display:block}
  .header-row{min-height:72px}
  .sign-name{font-size:1.45rem}.sign-script{font-size:1.45rem}
  .header-call{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:52px;padding:4px 16px;background:var(--red);color:#fff;text-decoration:none;border-radius:4px;line-height:1.1}
  .header-call:hover{background:var(--red-dk)}
  .hc-label{font-size:.875rem;opacity:.95}
  .hc-num{font:600 1.25rem/1.1 var(--sign);letter-spacing:.03em}
}

/* ---------- store picker: joined segmented control on enamel ---------- */
.store-picker-row{background:var(--enamel);color:#fff}
@media (min-width:900px){.store-picker-row{position:sticky;top:75px;z-index:49}}
.store-picker-row .wrap{display:flex;align-items:center;gap:6px 16px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.store-picker{border:0;margin:0;padding:0;display:flex;align-items:center}
.store-picker legend{float:left;font-size:.9rem;margin-right:10px;padding:0}
.store-picker label{position:relative;cursor:pointer}
.store-picker input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.store-picker span{display:inline-flex;align-items:center;min-height:44px;padding:6px 14px;border:2px solid #fff;font:600 1rem/1 var(--sign);text-transform:uppercase;letter-spacing:.05em}
.store-picker label+label span{border-left:0}
.store-picker label:first-of-type span{border-radius:4px 0 0 4px}
.store-picker label:last-of-type span{border-radius:0 4px 4px 0}
.store-picker input:checked+span{background:#fff;color:var(--enamel)}
.store-picker input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}
.store-picker-hint{margin:0;font-size:.9rem}
@media (max-width:520px){.store-picker-hint{display:none}}
@media (max-width:360px){.store-picker span{padding:6px 10px}.store-picker legend{margin-right:8px}}

/* ---------- top board: info first ---------- */
.board{padding:22px 0 30px;border-bottom:1px solid var(--rule)}
.board-grid{display:grid;gap:22px}
@media (min-width:900px){.board{padding:40px 0 48px}.board-grid{grid-template-columns:1fr 1.05fr;gap:44px;align-items:start}}
.board h1{font-size:clamp(1.85rem,7.4vw,3rem);font-weight:600;margin-bottom:10px}
.board-sub{color:var(--gray);font-size:1.05rem;max-width:36em;margin-bottom:18px}
.stubs{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:12px}
@media (min-width:600px) and (max-width:899px){.stubs{grid-template-columns:1fr 1fr}}
/* claim-ticket stub: pink stock, perforated left edge, red serial (= the street number) */
.stub{position:relative;background:var(--stub);border:1px solid var(--stub-edge);border-left:0;padding:14px 14px 14px 26px;border-radius:0 3px 3px 0}
.stub::before{content:"";position:absolute;left:0;top:0;bottom:0;width:12px;border-right:2px dashed var(--stub-edge);background:radial-gradient(circle at 0 50%,#fff 4.5px,transparent 5px) 0 2px/12px 15px repeat-y,var(--stub)}
.stub-no{position:absolute;top:12px;right:14px;font:700 .95rem/1 var(--mono);color:var(--red);letter-spacing:.04em}
.stub-name{font:700 1.65rem/1 var(--sign);text-transform:uppercase;letter-spacing:.03em;margin:0 0 4px}
.stub-addr{margin:0;font-weight:600}
.today{margin:2px 0 10px;font-size:.95rem;color:#3a3a3a;line-height:1.55;min-height:3.1em} /* JS fills this; space reserved so the store cards never jump (CLS). "Listed today … please call ahead" is 2 lines under 1024px */
@media (min-width:1024px){.today{min-height:1.55em}}
.stub-actions,.loc-actions{display:flex;flex-wrap:wrap;gap:8px}
.stub-actions .btn-red{flex:1.5 1 170px}
.stub-actions .btn-line{flex:1 1 104px}
[data-store-card].is-active.stub{box-shadow:0 0 0 3px var(--enamel)}
.board-pickup{margin:0;font-size:1.02rem}
.board-pickup a{font-weight:700;color:var(--red);display:inline-block;min-height:44px;padding:10px 0;line-height:24px}

/* ---------- photo slots: the centerpiece, waiting for real photos ---------- */
.photo{margin:0}
.photo-frame{position:relative;display:flex;flex-direction:column;justify-content:center;gap:8px;aspect-ratio:3/2;padding:22px 26px;color:var(--ink);background-color:#e4eaea;
  /* viewfinder corner brackets: "shoot this here" */
  background-image:linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink)),
    linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink));
  background-size:28px 3px,3px 28px,28px 3px,3px 28px,28px 3px,3px 28px,28px 3px,3px 28px;
  background-position:10px 10px,10px 10px,calc(100% - 10px) 10px,calc(100% - 10px) 10px,10px calc(100% - 10px),10px calc(100% - 10px),calc(100% - 10px) calc(100% - 10px),calc(100% - 10px) calc(100% - 10px);
  background-repeat:no-repeat}
.photo-tag{align-self:flex-start;background:var(--red);color:#fff;font:700 1rem/1 var(--sign);text-transform:uppercase;letter-spacing:.08em;padding:7px 10px}
.photo-what{font-size:1rem;line-height:1.45;max-width:30em}
.photo figcaption{margin-top:8px;font-size:.92rem;color:var(--gray)}
.photo-hero .photo-frame{aspect-ratio:4/3}
@media (min-width:900px){.photo-hero .photo-frame{aspect-ratio:4/3.3}}
.photo-side .photo-frame{aspect-ratio:4/5;max-width:360px}
.photo-about .photo-frame{aspect-ratio:4/3}
@media (min-width:860px){.photo-about .photo-frame{aspect-ratio:1/1}}

/* ---------- same-day sign band ---------- */
.sameday{background:var(--enamel);color:#fff;padding:22px 0}
.sameday-row{display:grid;gap:6px 28px;align-items:center}
@media (min-width:760px){.sameday-row{grid-template-columns:auto 1fr}}
.sameday-sign{margin:0;font-size:clamp(1.8rem,7vw,2.5rem);color:#fff;border-bottom:4px solid var(--red);padding-bottom:4px;justify-self:start}
.sameday p{margin:0;font-size:1.05rem}

/* ---------- sections ---------- */
.section{padding:44px 0}
@media (min-width:900px){.section{padding:64px 0}}
.sec-head{border-top:6px solid var(--ink);padding-top:14px;margin-bottom:22px;display:grid;gap:4px 40px}
@media (min-width:900px){.sec-head{grid-template-columns:auto 1fr;align-items:end}.sec-head p{max-width:44em}}
.sec-head h2{margin:0}
.sec-head p{margin:0;color:var(--gray)}

/* counter price list: printed, ruled, dense */
.pricelist{display:grid;gap:8px 40px}
@media (min-width:980px){.pricelist{grid-template-columns:repeat(3,1fr)}}
.pl-group h3{font:700 1.15rem/1 var(--sign);text-transform:uppercase;letter-spacing:.07em;color:var(--red);margin:18px 0 0;padding-bottom:8px;border-bottom:2px solid var(--ink)}
.pl-group h3:first-child{margin-top:4px}
.pricelist table{width:100%;border-collapse:collapse}
.pricelist th,.pricelist td{padding:9px 0;border-bottom:1px solid var(--rule);vertical-align:middle;text-align:left}
.pricelist tbody th{font-weight:600;padding-right:10px}
.pricelist tbody th small{display:block;font-weight:400;color:var(--gray);font-size:.92rem;line-height:1.35}
.pricelist td:nth-child(2){white-space:nowrap;padding-right:10px;font-size:.95rem;color:#333}
.pricelist td:last-child{width:1%;text-align:right}
.add{min-height:44px;min-width:66px;padding:0 10px;border:2px solid var(--ink);border-radius:4px;background:#fff;color:var(--ink);font:650 15px/1 system-ui,-apple-system,sans-serif;cursor:pointer;white-space:nowrap}
.add:hover{background:var(--ink);color:#fff}
.add[aria-pressed="true"]{background:var(--enamel);border-color:var(--enamel);color:#fff}
@media (max-width:380px){.pricelist td:nth-child(2){white-space:normal}}

/* ---------- pickup ---------- */
.section-pickup{background:var(--enamel-tint)}
.pickup-grid{display:grid;gap:26px}
@media (min-width:960px){.pickup-grid{grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}#form-result{grid-column:2}}
.pickup-info h2{border-top:6px solid var(--ink);padding-top:14px}
.terms{margin:0 0 22px;display:grid;grid-template-columns:auto 1fr;border-top:2px solid var(--ink)}
.terms dt,.terms dd{margin:0;padding:9px 0;border-bottom:1px solid #c9d3d3}
.terms dt{font:600 1rem/1.4 var(--sign);text-transform:uppercase;letter-spacing:.05em;padding-right:18px}
@media (max-width:959px){.photo-side{display:none}}
/* the form is a pickup ticket */
.ticket-form{background:#fff;border:2px solid var(--ink);border-radius:3px;padding:0 18px 20px;position:relative}
.tf-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:0 -18px 16px;padding:12px 18px 12px;background:var(--stub);border-bottom:2px dashed var(--stub-edge)}
.tf-head h3{margin:0;font:700 1.55rem/1 var(--sign);text-transform:uppercase;letter-spacing:.05em}
.tf-store{font:700 .95rem/1.2 var(--mono);color:var(--red)}
.field{margin:0 0 14px;min-width:0}
.field-row{display:grid;gap:0 14px}
@media (min-width:560px){.field-row{grid-template-columns:1fr 1fr}}
label,legend{font-weight:600;display:block;margin-bottom:4px}
.opt{font-weight:400;color:var(--gray);font-size:.92rem}
input[type=text],input[type=tel],input[type=email],input[type=date],select,textarea{width:100%;min-height:50px;padding:10px 12px;border:1.5px solid #6b6b6b;border-radius:3px;font:17px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:#fff;-webkit-appearance:none;appearance:none}
input[type=date]{display:block;min-width:0;text-align:left}
input[type=date]::-webkit-date-and-time-value{text-align:left}
select{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23151515' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;padding-right:36px}
textarea{min-height:92px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--enamel);outline:3px solid var(--focus);outline-offset:1px}
[aria-invalid="true"]{border-color:var(--red)!important;background-color:#fff6f5}
.hint{margin:4px 0 0;font-size:.9rem;color:var(--gray)}
.err{margin:4px 0 0;font-size:.92rem;color:var(--red);font-weight:600}
.err:empty{display:none}
.err.err-hold:empty{display:block} /* keeps a cleared error's space until next submit: no layout jump under a tap (WebKit lost-tap fix) */
.form-errors{background:#fff2f0;border:2px solid var(--red);color:#6e150f;border-radius:3px;padding:10px 14px;margin-bottom:14px;font-weight:600}
.checks{border:0;padding:0}
.check-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:2px 10px}
.check-grid label{font-weight:500;display:flex;align-items:center;gap:8px;min-height:44px;margin:0;cursor:pointer}
.check-grid input{width:22px;height:22px;accent-color:var(--enamel);flex:none;margin:0}
.hp{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.ticket-form>.small.center a{display:inline-flex;align-items:center;gap:.3em;min-height:44px} /* gap: inline-flex drops the space in "Call (561)…" */
.result{padding-top:0}
.result h3{font:700 1.5rem/1.1 var(--sign);margin:16px 0 10px}
.summary{white-space:pre-wrap;word-break:break-word;background:var(--stub);border:1px dashed var(--stub-edge);padding:12px;font:.92rem/1.5 var(--mono);margin:0 0 12px}
.result-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.result-actions .btn{flex:1 1 200px}
.nowrap{white-space:nowrap}

/* ---------- locations ---------- */
.loc-grid{display:grid;gap:34px}
@media (min-width:820px){.loc-grid{grid-template-columns:1fr 1fr;gap:40px}}
.loc{display:flex;flex-direction:column}
.loc h3{font:700 1.9rem/1 var(--sign);text-transform:uppercase;letter-spacing:.03em;margin:0 0 6px}
.photo-loc{margin-top:18px}
@media (min-width:820px){.photo-loc{order:-1;margin:0 0 16px}}
.loc.is-active h3{color:var(--enamel)}
.loc.is-active h3::after{content:"Your store";display:inline-block;margin-left:10px;vertical-align:middle;font:600 .8rem/1 system-ui,sans-serif;text-transform:none;letter-spacing:0;background:var(--enamel);color:#fff;padding:5px 8px;border-radius:3px}
.addr{margin:0 0 2px}
.tel-big{font:600 1.7rem/1 var(--sign);color:var(--red);text-decoration:none;display:inline-flex;align-items:center;min-height:48px;letter-spacing:.02em}
.tel-big:hover{text-decoration:underline}
.hours{width:100%;border-collapse:collapse;margin:4px 0 16px;border-top:2px solid var(--ink)}
.hours th,.hours td{text-align:left;padding:7px 4px;border-bottom:1px solid var(--rule);font-size:1rem}
.hours th{font-weight:500}
.hours td{font-variant-numeric:tabular-nums}
.hours tr.is-today{background:var(--stub)}
.hours tr.is-today th{font-weight:700}
.hours tr.is-today th::after{content:"  today";font-weight:400;color:var(--red);font-size:.92rem}
.map{margin-top:14px;border:2px solid var(--ink)}
.map iframe{display:block;width:100%;height:280px;border:0}
.map p{margin:6px 10px;font-size:.875rem}

/* ---------- story ---------- */
.section-about{border-top:1px solid var(--rule)}
.about-grid{display:grid;gap:26px}
@media (min-width:860px){.about-grid{grid-template-columns:.8fr 1.2fr;gap:48px;align-items:center}.about-grid .photo-about{order:-1}}
.section-about h2{border-top:6px solid var(--ink);padding-top:14px}
.about-note{font-weight:600;color:var(--enamel)}

/* ---------- FAQ ---------- */
.section-faq{background:var(--enamel-tint)}
.section-faq h2{border-top:6px solid var(--ink);padding-top:14px}
details{border-bottom:1px solid #c3cfcf}
details:first-of-type{border-top:2px solid var(--ink)}
summary{cursor:pointer;padding:14px 4px;font-weight:650;min-height:52px;list-style-position:inside}
summary:hover{color:var(--red)}
details p{padding:0 4px 16px}

/* ---------- footer ---------- */
.site-footer{background:var(--enamel-2);color:#e8f0f0;padding:34px 0 18px}
.site-footer a{color:#fff;display:inline-flex;align-items:center;min-height:44px}
.footer-grid{display:grid;gap:14px}
@media (min-width:760px){.footer-grid{grid-template-columns:1.2fr 1fr 1fr}}
.footer-sign .sign-name{font-size:1.5rem;display:block}
.footer-sign .sign-script{font-size:1.5rem;margin-left:0}
.footer-base{border-top:1px solid rgba(255,255,255,.25);margin-top:18px;padding-top:4px;font-size:.92rem}

/* ---------- phone action bar ---------- */
.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1fr 1.3fr 1fr;background:var(--ink);border-top:3px solid var(--enamel);padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.mobile-bar a{display:flex;align-items:center;justify-content:center;gap:7px;min-height:60px;color:#fff;text-decoration:none;font-weight:650;font-size:1rem;text-align:center;padding:6px}
.mobile-bar .mb-primary{background:var(--red);font:600 1.1rem/1.1 var(--sign);text-transform:uppercase;letter-spacing:.04em}
.mb-stack{display:flex;flex-direction:column;line-height:1.1;align-items:flex-start}
.mb-stack small{font-weight:500;font-size:.875rem;opacity:.9}
.kb-open .mobile-bar{display:none}
@media (min-width:900px){.mobile-bar{display:none}}
@media print{.mobile-bar,.site-header,.spec-bar,.store-picker-row{display:none}}

/* round-1 critique fixes: vary section openings instead of one repeated rule */
.sec-plate{border-top:0;padding:0;margin-bottom:22px}
.sec-plate h2{display:inline-block;background:var(--enamel);color:#fff;padding:8px 14px 6px;border-radius:3px;box-shadow:inset 0 0 0 2px var(--enamel),inset 0 0 0 3.5px #fff}
.pickup-info h2{border-top:0;padding-top:0;border-bottom:4px solid var(--red);display:inline-block;padding-bottom:4px}
.section-about h2{border-top:0;padding-top:0}
.section-faq h2{border-top:0;padding-top:0;font-size:clamp(1.6rem,5vw,2.1rem)}
.clipping{margin:6px 0 18px;padding:14px 16px;background:#fbfaf6;border:1px solid #cfccc2;font:1.05rem/1.5 Georgia,"Times New Roman",serif;color:#222;transform:rotate(-.6deg);box-shadow:2px 3px 0 rgba(0,0,0,.08)}
.clipping p{margin:0}
.clipping .clip-src{font:700 .875rem/1.2 var(--sign);text-transform:uppercase;letter-spacing:.08em;color:var(--gray);margin-bottom:6px}
@media (prefers-reduced-motion:reduce){.clipping{transform:none}}

/* ---------- sample photos (see IMAGES.md) ----------
   Each slot keeps its aspect-ratio box, so the image can never shift the layout (CLS 0).
   html[data-photos="sample"] = spec preview: sample badge + "try your own photo" camera button.
   html[data-photos="final"]  = launch: both hidden. */
.pslot{position:relative;overflow:hidden;padding:0;display:block;background:#cfd2d2}
.pslot::before,.pslot::after{content:none}
.pslot picture{position:absolute;inset:0;display:block}
.pslot img{display:block;width:100%;height:100%;object-fit:cover}
.pslot .own-img{position:absolute;inset:0;z-index:1}
.sample-badge,.try-photo{display:none}
[data-photos="sample"] .sample-badge{display:block;position:absolute;z-index:2;left:8px;bottom:8px;max-width:calc(100% - 70px);font-size:14px;line-height:1.25;padding:5px 8px;pointer-events:none}
[data-photos="sample"] .try-photo{display:inline-flex;align-items:center;justify-content:center;position:absolute;z-index:2;right:8px;bottom:8px;width:44px;height:44px;padding:0;margin:0;border:0;cursor:pointer}
.try-photo svg{width:22px;height:22px}
.try-photo:focus-visible{box-shadow:0 0 0 2px #fff}
.pslot.is-own .sample-badge{background:#fff;color:#111}
/* Jack's: the badge is a little pink claim-ticket stub; the camera button is an enamel-teal plate */
.photo-frame.pslot{background:#d6dede}
[data-photos="sample"] .photo-frame .sample-badge{background:var(--pink,#f9dcd8);color:var(--ink);font-family:var(--sign);font-weight:500;letter-spacing:.03em;border-left:3px dashed var(--red);box-shadow:1px 2px 0 rgba(0,0,0,.25)}
[data-photos="sample"] .photo-frame .try-photo{background:var(--enamel,#0d5257);color:#fff;border-radius:4px;box-shadow:0 0 0 2px rgba(255,255,255,.85)}