/* Profile pages: the shared frame, then one block per archetype (.pf--food …), then the
   sheets a profile opens (docs/r2/DESIGN.md §4, §6). Tokens only. */

/* ---- frame ---- */
.pf{padding-bottom:var(--s6)}
.pf-hero{display:block}
.pf-head{padding-top:var(--s5)}
.pf-head > * + *{margin-top:var(--s4)}
.pf-name{overflow-wrap:anywhere}
.pf-name + .pf-line{margin-top:var(--s1)}
.pf-line{font:var(--t-subhead);color:var(--label-2)}
.pf-line + .checks{margin-top:0}
.pf-sec{margin-top:var(--section-gap)}
.pf-sec > h2{margin-bottom:var(--s3)}
.pf-sec > h2 + .t-footnote{margin-top:calc(-1 * var(--s2));margin-bottom:var(--s3)}
.pf-sec > * + p, .pf-sec > * + .btn, .pf-sec > * + .place, .pf-sec > * + .kv{margin-top:var(--s3)}
.pf-foot{margin-top:var(--section-gap);padding-top:var(--s4);border-top:var(--hairline) solid var(--separator);font:var(--t-footnote);color:var(--label-2)}
.pf-foot p{max-width:var(--reading-max)}
.pf-foot a{color:inherit;text-decoration:underline;display:inline-block;min-width:var(--target);padding-block:0.8125rem}
.pf-aside{position:sticky;bottom:0;z-index:20;margin-inline:calc(-1 * var(--gutter))}
.pf-aside .orderbar{position:static;margin-top:var(--s6)}
.pf-aside .orderbar[data-empty], .order-card{display:none}
.hours th, .hours td{padding-block:var(--s2);font:var(--t-callout);font-weight:400;vertical-align:top}
.hours th{width:8rem;color:var(--label-2)}
.hours .is-today th, .hours .is-today td{font-weight:600;color:var(--label)}
.hours .is-special td{color:var(--warn)}
.place{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:var(--s4);border-radius:var(--r-m);background:var(--bg-2)}
.place-main{min-width:0}
.portrait{flex:none;border-radius:50%;object-fit:cover}
.ticks li{padding-left:var(--s5);position:relative}
.ticks li + li{margin-top:var(--s1)}
.ticks li::before{content:"";position:absolute;left:2px;top:0.6em;width:6px;height:6px;border-radius:50%;background:var(--label-3)}
.timeline li{display:grid;grid-template-columns:5.5rem minmax(0, 1fr);gap:var(--s3);padding-block:var(--s2)}
.timeline li + li{border-top:var(--hairline) solid var(--separator)}
.timeline .num{color:var(--label-2)}
.dated{display:grid;grid-template-columns:5.5rem minmax(0, 1fr);gap:var(--s1) var(--s4);padding-block:var(--s3)}
.dated + .dated{border-top:var(--hairline) solid var(--separator)}
.dated > :first-child{font:var(--t-subhead);color:var(--label-2);font-variant-numeric:tabular-nums;padding-top:1px}
.dated-sub{display:block;font:var(--t-subhead);color:var(--label-2)}
.dated .t-headline{display:block}
.dated a.t-headline{padding-block:0.6875rem;margin-block:-0.6875rem}
@media (min-width: 37.5rem) and (max-width: 63.99rem) {
  .pf-hero{aspect-ratio:21 / 9;max-height:22rem}
}
@media (min-width: 64rem) {
  .pf-hero{max-width:var(--page-max);margin:var(--s4) auto 0;aspect-ratio:21 / 9;max-height:26.25rem;width:calc(100% - 2 * var(--gutter));border-radius:var(--r-l)}
  .pf-cols{display:grid;grid-template-columns:minmax(0, 2fr) minmax(0, 1fr);gap:var(--s9);align-items:start}
  .pf-aside{position:sticky;top:5.5rem;bottom:auto;margin:var(--s7) 0 0;padding:var(--s5);border-radius:var(--r-l);background:var(--bg-2)}
  .pf-aside .orderbar, .pf-aside .orderbar[data-empty]{display:flex;margin:var(--s4) 0 0;padding:0;background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none}
  .pf-aside > .orderbar:first-child{margin-top:0}
  .order-card{display:block}
  .dated{grid-template-columns:7.5rem minmax(0, 1fr)}
}

/* ---- food: the menu ---- */
.pf .cats{margin-top:var(--s5)}
.pf-head > .facts{margin-top:var(--s5)}
.pf-menu{margin-top:var(--s3)}
.pf-menu > .t-subhead{margin-top:var(--s2)}
.menu-sec{padding-top:var(--s6)}
.menu-sec > h2 + p{margin-top:var(--s1)}
.menu{margin-top:var(--s2)}
.mi{position:relative;display:grid;grid-template-columns:minmax(0, 1fr) auto;column-gap:var(--s4);align-items:start;padding-block:var(--s4);min-height:5.5rem}
.mi + .mi{border-top:var(--hairline) solid var(--separator)}
.mi-main{display:flex;flex-direction:column;gap:2px;color:var(--label)}
.mi-main:hover{text-decoration:none}
.mi-name{font:var(--t-headline);letter-spacing:var(--k-headline)}
.mi-desc{font:var(--t-subhead);color:var(--label-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mi-marks{display:flex;flex-wrap:wrap;gap:var(--s2);font:var(--t-caption);letter-spacing:var(--k-caption);color:var(--label-2)}
.mi-heat{font-weight:400}
.mi-price{margin-top:var(--s2);font:var(--t-subhead)}
.mi-photo{grid-column:2;grid-row:1;width:5.5rem;height:5.5rem;border-radius:var(--r-m);overflow:hidden}
.mi-photo img{width:100%;height:100%;object-fit:cover;object-position:var(--fx, 50%) var(--fy, 50%)}
.mi-add{grid-column:2;grid-row:1;align-self:end;justify-self:end;z-index:1}
/* One Add control everywhere: the filled icon button at the row's bottom right. Over a
   photograph it keeps the same fill; a ring of the page colour sets it off the picture. */
.mi-add .btn{box-shadow:0 0 0 2px var(--bg)}
.mi.has-photo .mi-add{margin:0 var(--s1) var(--s1) 0}
.mi.is-out .mi-name, .mi.is-out .mi-price{color:var(--label-2);font-weight:400}
.mi.is-out .mi-photo{opacity:0.45}
.order-lines li{display:grid;grid-template-columns:2.25rem minmax(0, 1fr) auto;gap:var(--s2);padding-block:var(--s2);font:var(--t-subhead)}
.order-lines .dim{display:block}
@media (min-width: 64rem) {
  .menu{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));column-gap:var(--s8)}
  .mi:nth-child(2){border-top:0}
}

/* ---- pieces several archetypes share ---- */
.pf-head--text{padding-top:var(--s7)}
.pf-strip, .pf-gallery .strip{gap:2px}
.who{display:flex;align-items:flex-start;gap:var(--s4)}
.who > div{min-width:0;flex:1}
.who-photo{width:4rem;height:4rem}
.firm-logo{flex:none;width:3.5rem;height:3.5rem;object-fit:contain;border-radius:var(--r-s)}
.svc > summary{min-height:3.5rem}
.svc-group + .svc-group{margin-top:var(--s7)}
.svc-group > h2{margin-bottom:var(--s1)}
.svc-side{flex:none;display:flex;flex-direction:column;align-items:flex-end}
.svc-side .btn{margin:0 calc(-1 * var(--s2)) calc(-1 * var(--s3)) 0}
.creds li{display:flex;flex-direction:column;padding-block:var(--s3)}
.creds li + li{border-top:var(--hairline) solid var(--separator)}
.people{display:grid;grid-template-columns:repeat(auto-fill, minmax(6.5rem, 1fr));gap:var(--s4) var(--s3)}
.people li{display:flex;flex-direction:column}
.people .portrait{width:3.5rem;height:3.5rem;margin-bottom:var(--s2)}
.cols{columns:2;column-gap:var(--s6)}
.cols li{break-inside:avoid}
.grid2{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:var(--s6) var(--s3)}
.tile{display:flex;flex-direction:column;gap:2px;color:var(--label)}
.tile:hover, .trip:hover, .case:hover, .work:hover, .ev:hover{text-decoration:none}
.tile .photo{border-radius:var(--r-m);margin-bottom:var(--s2)}
.tile-name{font:var(--t-headline);letter-spacing:var(--k-headline)}
.tile.is-out .photo{opacity:0.45}
.post{padding-block:var(--s4);max-width:var(--reading-max)}
.post + .post{border-top:var(--hairline) solid var(--separator)}
.post > * + *{margin-top:var(--s1)}
.pf-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s4)}
.pf-pair--left{display:flex}
.tbl, .tt, .year{overflow-x:auto}
.tbl th, .tbl td, .tt th, .tt td{padding:var(--s3) var(--s4) var(--s3) 0;font:var(--t-subhead);text-align:left;vertical-align:top;border-top:var(--hairline) solid var(--separator)}
.tbl thead th{border-top:0;color:var(--label-2);font-weight:400}
.tbl tbody th, .tt th{font-weight:600}
.tbl .row-sub{font-weight:400}
.tbl .num{text-align:right;padding-right:0}
/* A table too wide for a phone becomes rows: the name and its detail on the left, the price on the right. */
@media (max-width: 37.49rem) {
  .tbl--rows{overflow:visible}
  .tbl--rows table, .tbl--rows tbody{display:block}
  .tbl--rows thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .tbl--rows tr{display:grid;grid-template-columns:minmax(0, 1fr) auto;column-gap:var(--s4);align-items:baseline;padding-block:var(--s3);border-top:var(--hairline) solid var(--separator)}
  .tbl--rows tr:first-child{border-top:0}
  .tbl--rows th, .tbl--rows td{display:block;padding:0;border:0}
  .tbl--rows tbody th{grid-column:1;font:var(--t-headline);letter-spacing:var(--k-headline)}
  .tbl--rows .tbl-sub{grid-column:1;grid-row:2;color:var(--label-2)}
  .tbl--rows .row-sub{text-wrap:balance}
  .tbl--rows .num{grid-column:2;grid-row:1;font:var(--t-subhead)}
}
@media (min-width: 64rem) { .grid2 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- trades · health · professional ---- */
.jobs{display:grid;gap:var(--s5)}
.job-pair{display:grid;gap:var(--s1);border-radius:var(--r-m);overflow:hidden}
.job-pair.is-pair{grid-template-columns:1fr 1fr}
.job figcaption{margin-top:var(--s2)}
.photo-count{left:auto}
.areas{display:flex;flex-wrap:wrap;gap:var(--s2)}
.areas span{padding:var(--s2) var(--s3);border-radius:var(--r-s);background:var(--bg-2);font:var(--t-subhead)}
.reg{display:flex;flex-direction:column;padding:var(--s3) 0;border-block:var(--hairline) solid var(--separator)}
.emergency{font:var(--t-subhead);font-weight:600}
.org-what{max-width:var(--reading-max);color:var(--label-2);font-weight:400}
@media (min-width: 37.5rem) { .jobs { grid-template-columns: 1fr 1fr; } }

/* ---- stays · tours · transport ---- */
.pf-gallery{margin-bottom:0}
.rooms{display:grid;gap:var(--s4)}
.room{border:var(--hairline) solid var(--separator);border-radius:var(--r-l);overflow:hidden}
.room-body{padding:var(--s4)}
.room-body > * + *{margin-top:var(--s1)}
.room-go{display:flex;justify-content:flex-end;margin-bottom:calc(-1 * var(--s2))}
.offers{columns:2;column-gap:var(--s6);font:var(--t-callout)}
.offers li{padding-block:var(--s1);break-inside:avoid}
.offers--no{color:var(--label-2)}
.offers-h{margin:var(--s4) 0 var(--s1)}
.more > summary{justify-content:flex-start;padding-inline:0}
.more[open] > summary{display:none}
.trips{display:grid;gap:var(--s6)}
.trip{display:flex;flex-direction:column;gap:2px;color:var(--label)}
.trip .photo{border-radius:var(--r-l);margin-bottom:var(--s3)}
.vehicle{display:grid;grid-template-columns:9.5rem minmax(0, 1fr);gap:var(--s4);align-items:center}
.vehicle .photo{border-radius:var(--r-m)}
.notice-pin{padding-top:var(--s4);font:var(--t-subhead)}
.tt{margin-top:var(--s3)}
.tt h3{margin-bottom:var(--s1)}
.js .tt h3, .js .day-panel h3{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media (min-width: 37.5rem) { .rooms, .trips { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) {
  .pf-gallery{max-width:calc(var(--page-max) + 2 * var(--gutter));margin:var(--s4) auto 0;padding-inline:var(--gutter)}
  .pf-gallery .strip{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:var(--s1);height:26.25rem;border-radius:var(--r-l);overflow:hidden}
  .pf-gallery .strip > *{aspect-ratio:auto}
  .pf-gallery .strip > :first-child{grid-row:span 2}
  .pf-strip{max-width:var(--page-max);margin:var(--s4) auto 0;display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--s1);height:22.5rem;border-radius:var(--r-l);overflow:hidden}
  .pf-strip > *{aspect-ratio:auto}
  .pf-strip > :first-child{grid-row:span 2}
  .pf-strip > :only-child{grid-column:1 / -1}
}

/* ---- retail · farm ---- */
.today{font:var(--t-callout)}
.pf-shop .menu-sec > h2{margin-bottom:var(--s3)}
.board-row{display:flex;align-items:center;gap:var(--s3);min-height:4.5rem;padding-block:var(--s3)}
.board-row + .board-row{border-top:var(--hairline) solid var(--separator)}
.board-main{flex:1;min-width:0}
.board-main > *, .board-price > *{display:block}
.board-price{text-align:right}
.year table{table-layout:fixed}
.year-name{width:8.5rem}
.year th, .year td{padding:var(--s2) 0;font:var(--t-footnote);text-align:center}
.year thead th{color:var(--label-3);font-weight:400}
.year thead .is-now{color:var(--label);font-weight:600}
.year tbody th{text-align:left;font:var(--t-subhead);font-weight:600;padding-right:var(--s3)}
.year td::before{content:"";display:block;height:var(--s2);margin-inline:1px;background:var(--fill)}
.year td.is-on::before{background:var(--accent)}

/* ---- creator · public figure · writer · artist · performer · freelancer ---- */
.pf-narrow, .pf-read{max-width:calc(var(--reading-max) + 2 * var(--gutter))}
.pf-id{text-align:center;padding-top:var(--s7)}
.pf-id-photo{width:6rem;height:6rem;margin-inline:auto}
.pf-id .checks{justify-content:center}
.latest-row{display:flex;gap:var(--s3);align-items:center;min-height:var(--target);padding-block:var(--s2);color:var(--label)}
.latest-row > span > span{display:block}
.latest-thumb{flex:none;width:8rem;aspect-ratio:16 / 9;border-radius:var(--r-s)}
.feature{padding-top:var(--s6);border-top:var(--hairline) solid var(--separator)}
.poem{margin:var(--s5) 0 var(--s4)}
.poem span{display:block;padding-left:1.5em;text-indent:-1.5em;min-height:1em}
.it-body{white-space:pre-wrap}
.book{display:grid;grid-template-columns:4.5rem minmax(0, 1fr);gap:var(--s4);padding-block:var(--s3)}
.book-cover{aspect-ratio:2 / 3;border-radius:var(--r-xs)}
.book:not(:has(.book-cover)){grid-template-columns:minmax(0, 1fr)}
.book p + p{margin-top:var(--s1)}
.pf-head--quiet{padding-block:var(--s5) var(--s4)}
.works{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:var(--s5) var(--s3)}
.works--small{grid-template-columns:repeat(3, minmax(0, 1fr))}
.work{color:var(--label)}
.work-cap{display:flex;flex-direction:column;margin-top:var(--s2);font:var(--t-footnote)}
.case{display:block;color:var(--label);margin-bottom:var(--s6)}
.case .photo{margin-bottom:var(--s2)}
@media (min-width: 64rem) { .works { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s7) var(--s5); } }

/* ---- events · education · fitness · community · individual ---- */
.ev-name{margin-top:var(--s1)}
.ev-name a{color:inherit}
.ev-by{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--s2);font:var(--t-subhead)}
.ev-by .checks{flex-basis:100%;margin-block:0}
.ev{display:flex;gap:var(--s4);align-items:center;padding-block:var(--s3);color:var(--label)}
.evs li + li{border-top:var(--hairline) solid var(--separator)}
.ev > span > span{display:block}
.ev-date{flex:none;width:3rem;height:3.5rem;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:var(--r-s);background:var(--bg-2);font:var(--t-caption);letter-spacing:var(--k-caption);text-transform:uppercase;color:var(--label-2)}
.ev-date b{font:var(--t-title2);color:var(--label)}
.row-thumb--l{width:4.5rem;height:4.5rem;border-radius:var(--r-m)}
.seg--days span{padding-inline:0;font:var(--t-footnote);font-weight:600}
.day-panel{margin-top:var(--s2)}
.cls-time{flex:none;width:4.75rem;font:var(--t-subhead);font-weight:600}
.cls.is-off .row-title, .cls.is-off .cls-time{color:var(--label-3);text-decoration:line-through}
.pf-inset{border-radius:var(--r-l)}
.gather{display:block}
.gather + .gather{margin-top:var(--s1)}
.gather .num{display:inline-block;min-width:4.75rem;font-weight:600}
.pf-cv-photo{margin-top:var(--s6);max-width:var(--reading-max)}
.pf-cv .pf-sec > h2{font:var(--t-title3);letter-spacing:var(--k-title3)}

/* ---- sheets a profile opens: an item, a request ---- */
.sheet-body > * + *, .sheet-body form > * + *{margin-top:var(--s4)}
.sheet-body .stepper > *{margin-top:0}
.it-photo{margin:calc(-1 * var(--s2)) calc(-1 * var(--s4)) 0}
.sheet-page .it-photo{margin-inline:calc(-1 * var(--gutter))}
.it > .split + .dim{margin-top:var(--s1)}
.og{padding-top:var(--s4);border-top:var(--hairline) solid var(--separator)}
.og legend{width:100%;padding-bottom:var(--s1);float:left}
.og legend + *{clear:both}
.it-block > * + *{margin-top:var(--s2)}
.rq > .t-footnote + .t-headline{margin-top:var(--s1)}
.rq-notice{font:var(--t-subhead);font-weight:600}
.rq-count{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
.rq-count > label{margin:0}
.rq-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin-top:var(--s2)}
.rq-pair > :only-of-type{grid-column:span 2}
.order-edit li{display:flex;align-items:center;gap:var(--s3);padding-block:var(--s3)}
.order-edit li + li{border-top:var(--hairline) solid var(--separator)}
.order-edit-main{flex:1;min-width:0;display:flex;flex-direction:column}
.order-sum{border-top:var(--hairline) solid var(--separator);padding-top:var(--s3)}
.order-sum > div{display:flex;justify-content:space-between;padding-block:var(--s1)}
.rq-answer{padding:var(--s3) var(--s4);border-radius:var(--r-m);background:var(--bg-2)}
.rq-total > p + p{margin-top:var(--s1)}
.sheet-body > .rq-next{margin-top:var(--s7)}
.rq-next > * + *{margin-top:var(--s2)}
.rq-sent .btn-destructive{padding-inline:0}
.sheet-page.is-gallery{max-width:none;padding:0;background:var(--gallery-bg);color:var(--on-photo)}
.sheet-page.is-gallery .gallery-track{flex-direction:column;overflow:visible}
.sheet-page.is-gallery .gallery-head .btn{color:var(--on-photo)}
/* The order sheet shows only what the chosen way of getting it needs — in the stylesheet, so it holds without script and on the sheet opened as a page. */
[data-order-form]:has(input[name=mode]:checked:not([value=delivery])) [data-when-mode=delivery], [data-order-form]:has(input[type=hidden][name=mode]:not([value=delivery])) [data-when-mode=delivery]{display:none}
[data-order-form]:has(input[name=mode]:checked:not([value=dine_in])) [data-when-mode=dine_in], [data-order-form]:has(input[type=hidden][name=mode]:not([value=dine_in])) [data-when-mode=dine_in]{display:none}
[data-order-form]:has(input[name=when][value=asap]:checked) [data-when=later]{display:none}