/* Home fixes on top of pass five (Mason, 2026-10-21, KEY-2 S2): the closing words never sit on top of the size picker;
   only their own visible link takes a tap. On a short phone the open size fits, so its button is always reachable. */
.end{pointer-events:none}.end a{pointer-events:auto}
@media (max-width:760px) and (max-height:720px){
 .sizes{top:176px;bottom:12px;gap:6px}
 .sz{flex-basis:48px}.sz-hd{flex-basis:46px}.sz-t{font-size:21px}
 .sz-in{padding:10px 14px 12px}.sz-price{font-size:30px}
 .sz-d{margin-top:8px;font-size:14.5px;line-height:1.35}.sz-d2{display:none}
 .sz-in .go{margin-top:10px;min-height:46px}
}

/* Steve's iPhone pass, 2026-10-21 */
@media (max-width:760px){
 /* 1. the counter has its own row: every headline under it starts below it */
 .l6,.l7,.l8{top:124px}
 .sizes{top:226px}
 /* 6. screen two: the photo is the top half, head to chest with room above the head; the words and the four sizes
    fill the bottom half, the sizes sitting on the bottom edge */
}
@media (max-width:760px) and (max-height:720px){
 .l7{font-size:10vw}
 .sizes{top:206px}
 .what .wh{font-size:9vw}.what .wd{font-size:13.5px;margin-top:8px}
}
/* 3. the footer map in four tidy columns, two by two on a phone */
.foot .map{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:760px){.foot .map{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* GREEN HAS ONE JOB (Steve picked option B, 2026-10-21): one solid acid green button per screen, the main action.
   Every other button is a cream outline; prices and labels that were green are cream; thin lines take the section's
   accent. Green stays on the "Open for new work" dot. */
.go{background:transparent;color:var(--cream)!important;box-shadow:inset 0 0 0 1.5px rgba(235,222,208,.8)}
.go:hover{background:rgba(235,222,208,.08)}
.hero .go.big,.sz-in .go,.end .go,.mnu .go{background:var(--acid);color:var(--ink)!important;box-shadow:none}
.o-p,.el b,.live,.dev .live,.map a:hover,.eh .hv{color:var(--cream)!important}
.ofr:hover{border-color:var(--cream)!important}
.ring .prog{stroke:var(--acc)}
.sz-p{color:var(--cream)!important}
/* screen two: the photo is cropped to the faces and top-anchored; its height and the words' place come from settle.js */
@media (max-width:760px){#sp-studio .base{height:100%;margin:0;padding:0;object-fit:cover;object-position:50% 0%}}  /* the specimen frame's margin and padding left a dark strip above the faces */
/* the corrected founder photos (2026-10-21): on desktop each size card shows about a third of a landscape frame, so
   each one centers between the two faces (re-measured on the 4K renders: paper stock faces at 40% and 67%, table prints 36% and 58%,
   laptops and materials 36% and 73%) */
.sz-ph img[src*="snswatch"]{object-position:55% 30%}
.sz-ph img[src*="sntable"]{object-position:45% 25%}
.sz-ph img[src*="snleather"]{object-position:30% 30%}  /* the two faces sit 37% apart, wider than the panel: it shows Steve, whole, with the swatch */
/* photo 9, the coffee windows (portrait frame), cut to the step card's landscape box: anchored on the faces */
.sph img[src*="sncoffee"]{object-position:50% 28%}