/* KIOS shop. A complete stylesheet on its own: the lookbook keeps styles.css and the shop never loads it.
   It wears the lookbook's folio: the same paper, the double rule under the header, the typewriter nav and
   "Fig." labels, IM Fell English for display text and Libre Caslon Text for reading.
   Libre Caslon Text draws lining figures by default; .num also asks for tabular ones so prices line up. */
:root {
  --paper: #EFE6D2; --paper-light: #F6F0E4; --leaf: #E6DAC0; --rule: #CDBC9A; --sepia: #3B2A20; --faded: #6E5A48;
  --indigo: #2F4A7A; --mengkudu: #A8432E;
  --fell: "IM Fell English", "Iowan Old Style", Georgia, serif;
  --caslon: "Libre Caslon Text", "Iowan Old Style", Georgia, serif;
  --type: "Courier Prime", "Courier New", ui-monospace, monospace;
  /* One scale, 1.25 between steps from the body size up. --t-support is the one smaller reading size. */
  --t-support: 15px; --t-body: 17px; --t-md: 21px; --t-lg: 26.5px;
  --t-xl: clamp(33px, 1.6vw + 26px, 41.5px); --t-display: clamp(41.5px, 3.8vw + 26px, 72px);
  --gutter: clamp(16px, 4vw, 48px);
  --section: clamp(56px, 8vw, 112px);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--sepia); font: 400 var(--t-body)/1.6 var(--caslon); padding-inline: var(--gutter); overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--mengkudu); }
:focus-visible { outline: 2px solid var(--mengkudu); outline-offset: 3px; }
[hidden] { display: none !important; }
.wrap { max-width: 1240px; margin: 0 auto; }
.num { font-variant-numeric: lining-nums tabular-nums; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--sepia); color: var(--paper-light); padding: 10px 14px; }
.skip:focus { left: 8px; z-index: 10; }
.kicker { display: block; font: 400 12.5px/1.4 var(--caslon); letter-spacing: .08em; text-transform: uppercase; color: var(--faded); margin: 0 0 14px; }
.display { font: 400 var(--t-display)/1.02 var(--fell); letter-spacing: -.005em; margin: 0; text-wrap: balance; }

/* Header: one row at every width */
.mast { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; border-bottom: 3px double var(--sepia); position: relative; }
.kios { display: inline-flex; align-items: center; min-height: 44px; padding-top: 6px; font: 700 19px/1 var(--caslon); letter-spacing: .32em; text-decoration: none; }
.mast ul { display: flex; align-items: center; margin: 0 -12px 0 0; padding: 0; list-style: none; }
.mast nav { margin-left: auto; }
.mast nav a, .cart-link { display: flex; align-items: center; min-height: 44px; padding: 0 12px; font: 400 13px/1 var(--type); letter-spacing: .05em; text-decoration: none; }
.cart-link { padding-right: 0; }
.cart-link:hover { color: var(--mengkudu); }
/* Phone: KIOS, a Menu button (native <details>) and Cart, as on the lookbook. */
.menu { display: none; }
.mast nav a:hover { text-decoration: underline; color: var(--sepia); }
.cart-count { margin-left: 6px; font-size: 15px; }
.cart-count::before { content: "("; } .cart-count::after { content: ")"; }

/* Page heads */
.page-head { padding-block: var(--section) clamp(40px, 5vw, 64px); max-width: 65ch; }
.page-head .status { margin: 22px 0 0; font-size: var(--t-body); }
.page-head .note, .page-head .lede { margin: 6px 0 0; font-size: var(--t-support); color: var(--faded); }
.page-head .lede { margin-top: 22px; font-size: var(--t-body); }

/* The chapter grid: one image shape, name and price beneath */
.grid { list-style: none; margin: 0; padding: 0 0 var(--section); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 5vw, 72px) clamp(12px, 2vw, 32px); }
.grid a { display: block; text-decoration: none; }
.grid a:hover { color: var(--sepia); }
.tile-img { display: block; aspect-ratio: 4 / 5; overflow: hidden; }
.tile-img img { width: 100%; height: 100%; object-fit: cover; }
.grid .fig { display: block; margin-top: 14px; font: 400 12.5px/1.4 var(--type); letter-spacing: .06em; color: var(--faded); }
.grid .name { display: block; margin-top: 4px; font: italic 400 var(--t-md)/1.25 var(--fell); }
.tile-img { border: clamp(6px, .8vw, 10px) solid var(--leaf); box-shadow: 0 0 0 1px var(--rule), 0 18px 40px -30px rgba(59, 42, 32, .55); }
.grid a:hover .name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.grid .price { display: block; margin-top: 2px; font: 400 var(--t-support)/1.4 var(--caslon); color: var(--faded); white-space: nowrap; }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* The drops index */
.drops { list-style: none; margin: 0 0 var(--section); padding: 0; border-top: 1px solid var(--rule); }
.drops a { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; align-items: baseline; gap: 8px 32px; padding-block: 28px; border-bottom: 1px solid var(--rule); text-decoration: none; }
.drops a:hover { color: var(--sepia); }
.drops a:hover .t { text-decoration: underline; text-decoration-thickness: 1px; }
.drops .kicker { margin: 0; }
.drops .t { font: 400 var(--t-xl)/1.1 var(--fell); }
.drops .p { font-size: var(--t-support); color: var(--faded); text-align: right; }
.empty { padding-block: 24px; color: var(--faded); }
/* Chapters with no drop yet: the same row, quieter, pointing at the lookbook */
.drops .soon a { padding-block: 20px; }
.drops .soon .t { font-size: var(--t-lg); color: var(--faded); }
.drops .soon a:hover .t { color: var(--sepia); }
.drops .soon .p::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--rule); vertical-align: middle; }

/* Footer */
.foot { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 32px 48px; padding-block: 56px 32px; border-top: 1px solid var(--rule); font-size: var(--t-support); }
.foot h2 { margin: 0 0 6px; font: italic 400 var(--t-support)/1.4 var(--caslon); color: var(--faded); }
.foot p { margin: 0; max-width: 46ch; line-height: 1.65; }
.foot ul { margin: 0; padding: 0; list-style: none; }
.foot li a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.foot li a:hover { text-decoration: underline; color: var(--sepia); }
.colophon { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-top: 24px; border-top: 1px solid var(--rule); color: var(--faded); }
.colophon .house { display: inline-flex; align-items: center; gap: 12px; }
.colophon img { width: 24px; height: 24px; }

/* Buttons and fields */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; font: 400 16px/1.2 var(--caslon); letter-spacing: .02em; text-decoration: none; text-align: center; color: var(--paper-light); background: var(--sepia); border: 1px solid var(--sepia); border-radius: 0; cursor: pointer; }
.btn:hover { background: #251A14; border-color: #251A14; color: var(--paper-light); }
.btn[disabled] { background: transparent; color: var(--faded); border-color: var(--rule); cursor: default; }
.btn.quiet { background: transparent; color: var(--sepia); }
.btn.quiet:hover { background: var(--paper); color: var(--sepia); }
input[type="number"], input[type="email"], select { min-height: 48px; font: 400 var(--t-body)/1.2 var(--caslon); font-variant-numeric: lining-nums tabular-nums; color: var(--sepia); background: var(--paper-light); border: 1px solid var(--rule); border-radius: 0; padding: 0 12px; }
input[type="number"]:hover, input[type="email"]:hover, select:hover { border-color: var(--sepia); }
.country select, .field input { width: 100%; max-width: 100%; }
.cart .pay { width: 100%; min-height: 52px; }

/* Product page: image column 7/12, details 5/12 and sticky while the plates scroll */
.product { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 5vw, 96px); align-items: start; padding-block: clamp(32px, 4vw, 56px) var(--section); }
.product-media { display: grid; gap: clamp(56px, 7vw, 96px); }
.product figure { margin: 0; }
.main-plate img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.product .note, .flat figcaption { margin-top: 12px; font-size: var(--t-support); color: var(--faded); }
.flat img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } /* the same piece laid flat, a photograph like the one above it */
.product-details { position: sticky; top: 32px; }
.crumb { margin: 0 0 10px; font-size: var(--t-support); }
.crumb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--faded); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.product h1 { font: 400 var(--t-xl)/1.08 var(--fell); margin: 0 0 18px; text-wrap: balance; }
.price-block { margin: 0 0 36px; }
.price-block .primary { display: block; font: 400 var(--t-md)/1.3 var(--caslon); }
.price-block .others { display: block; margin-top: 4px; font-size: var(--t-support); color: var(--faded); }
.choice { border: 0; margin: 0 0 24px; padding: 0; min-width: 0; }
.choice legend { padding: 0; margin: 0 0 10px; font-size: var(--t-support); }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opts label { position: relative; display: block; }
.opts input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opts span { display: flex; align-items: center; justify-content: center; min-width: 56px; min-height: 48px; padding: 0 18px; border: 1px solid var(--rule); font-size: var(--t-support); line-height: 1.2; }
.opts label:hover input:not(:disabled) + span { border-color: var(--sepia); }
.opts input:checked + span { border-color: var(--sepia); box-shadow: inset 0 0 0 1px var(--sepia); }
.opts input:focus-visible + span { outline: 2px solid var(--mengkudu); outline-offset: 3px; }
.opts input:disabled { cursor: not-allowed; }
.opts input:disabled + span { color: #A08B74; border-style: dashed; text-decoration: line-through; }
.qty { display: flex; align-items: center; gap: 16px; margin: 0 0 28px; font-size: var(--t-support); }
.qty input { width: 88px; }
.buy .btn { width: 100%; min-height: 52px; }
.assure { margin: 20px 0 0; font-size: var(--t-support); line-height: 1.6; max-width: 65ch; }
.details { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--rule); }
.details p { margin: 0 0 12px; max-width: 65ch; }
.details .spec { font-size: var(--t-support); color: var(--faded); }

/* Cart, thanks and the policy pages */
.page { max-width: 65ch; padding-block: var(--section); }
.page.wide { max-width: 960px; }
.page .display { margin-bottom: 28px; }
.page p, .page li { max-width: 65ch; }
.page h2 { font: 400 var(--t-lg)/1.2 var(--fell); margin: 56px 0 12px; }
.page .meta { margin: 0 0 14px; font-size: var(--t-support); color: var(--faded); }
.fine { margin: 16px 0 0; font-size: var(--t-support); line-height: 1.6; color: var(--faded); }
.order-lines, .cart-lines, .totals { list-style: none; margin: 0 0 24px; padding: 0; font-variant-numeric: lining-nums tabular-nums; }
.order-lines li, .cart-lines li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding-block: 16px; border-bottom: 1px solid var(--rule); }
.cart-lines .grow { flex: 1 1 14em; }
.cart-lines select { width: 72px; }
.cart-lines button { min-height: 44px; padding: 0 4px; font: 400 var(--t-support)/1 var(--caslon); color: var(--faded); background: none; border: 0; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.totals li { display: flex; justify-content: space-between; gap: 16px; padding-block: 10px; border-bottom: 1px solid var(--rule); }
.totals li.total { font-size: var(--t-md); border-bottom-color: var(--sepia); }
.field, .country { display: grid; gap: 8px; margin: 28px 0; }
.field > span, .country label { font-size: var(--t-support); }
.form-status { margin-top: 16px; font-size: var(--t-support); min-height: 1.6em; }
.form-status.ok { color: var(--indigo); }
.form-status.err { color: var(--mengkudu); }
.page table { width: 100%; border-collapse: collapse; margin: 16px 0 8px; font-size: var(--t-support); font-variant-numeric: lining-nums tabular-nums; }
.page th, .page td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--rule); }
.page th { font-weight: 400; color: var(--faded); }

/* Tablet and phone */
@media (max-width: 899px) {
  .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot .about { grid-column: 1 / -1; }
  .product { grid-template-columns: minmax(0, 1fr); padding-top: 0; }
  .product-media { display: contents; }
  .product .main-plate { order: 1; margin-inline: calc(-1 * var(--gutter)); }
  .product-details { order: 2; }
  .product .flat { order: 3; margin-top: 24px; }
  .main-plate .note { padding-inline: var(--gutter); }
  .product-details { position: static; }
  .drops a { grid-template-columns: minmax(0, 1fr); }
  .drops .p { text-align: left; }
}
@media (max-width: 719px) {
  body { font-size: 16px; }
  .mast { min-height: 60px; }
  .mast > nav { display: none; }
  .menu { display: block; margin-left: auto; }
  .menu summary { list-style: none; cursor: pointer; min-height: 44px; padding: 0 14px; display: flex; align-items: center;
    font: 400 14px/1 var(--type); letter-spacing: .05em; border: 1px solid var(--sepia); }
  .menu summary::-webkit-details-marker { display: none; }
  .menu[open] summary { background: var(--sepia); color: var(--paper); }
  .menu ul { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; margin: 0; padding: 4px 0 12px; list-style: none; display: block;
    background: var(--paper); border-bottom: 3px double var(--sepia); box-shadow: 0 18px 30px -22px rgba(59, 42, 32, .5); }
  .menu a { display: block; font: 400 17px/48px var(--caslon); text-decoration: none; border-top: 1px dotted var(--rule); }
  .grid .name { margin-top: 12px; font-size: var(--t-support); }
  .grid .price { font-size: 14px; }
  .page table, .page thead, .page tbody, .page tr, .page td { display: block; }
  .page thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .page tr { padding-block: 12px; border-bottom: 1px solid var(--rule); }
  .page td { padding: 2px 0; border: 0; }
  .page td[data-label]::before { content: attr(data-label) ". "; color: var(--faded); }
  .page td:first-child { font-size: var(--t-body); }
}
.remind { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 28px; font-size: var(--t-support); line-height: 1.5; max-width: 65ch; }
.remind input { width: 20px; height: 20px; margin: 3px 0 0; flex: none; accent-color: currentColor; }
/* The footer's one switch: optional UI tones, off until asked for. */
.sound { min-height: 44px; padding: 0; font: inherit; color: inherit; background: none; border: 0; border-bottom: 1px solid currentColor; cursor: pointer; }
.sound:hover, .sound[aria-pressed="true"] { color: var(--sepia); }

/* ---- 2026-10-20 jury round: motion, hover, layout ---- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: kios-out .3s cubic-bezier(.4, 0, 1, 1) both; }
  ::view-transition-new(root) { animation: kios-in .55s cubic-bezier(.22, 1, .36, 1) .08s both; }
  @keyframes kios-out { to { opacity: 0; } }
  @keyframes kios-in { from { opacity: 0; transform: translateY(14px); } }
}
.btn:not([disabled]) { background: linear-gradient(var(--mengkudu), var(--mengkudu)) left / 0 100% no-repeat, var(--sepia);
  transition: background-size .4s cubic-bezier(.22, 1, .36, 1), border-color .4s; }
.btn:not([disabled]):hover { background: linear-gradient(var(--mengkudu), var(--mengkudu)) left / 100% 100% no-repeat, var(--sepia); border-color: var(--mengkudu); }
.btn.quiet:not([disabled]) { background: linear-gradient(var(--paper), var(--paper)) left / 0 100% no-repeat, transparent; }
.btn.quiet:not([disabled]):hover { background: linear-gradient(var(--paper), var(--paper)) left / 100% 100% no-repeat, transparent; border-color: var(--sepia); }
.grid img { background: var(--leaf); transition: transform .7s cubic-bezier(.22, 1, .36, 1); }
.grid a { overflow: hidden; }
.grid a:hover img { transform: scale(1.04); }
/* an odd last card spans the row instead of sitting alone */
@media (min-width: 1024px) { .grid > li:last-child:nth-child(3n + 1) { grid-column: 1 / -1; max-width: calc((100% - 2 * clamp(12px, 2vw, 32px)) / 3); justify-self: center; } }
.mast nav a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .3s cubic-bezier(.22, 1, .36, 1); }
.mast nav a:hover { text-decoration: none; background-size: 100% 1px; }
/* /shop: each drop opens with its chapter's scene */
.drops .drop-img { grid-column: 1 / -1; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--leaf); margin-bottom: 12px; }
.drops .drop-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.drops a:hover .drop-img img { transform: scale(1.03); }
.page.cart { min-height: 72vh; } /* the cart fills in after load: hold its space so the footer does not jump */
.kios, .foot a, .colophon a, .fine a { display: inline-block; padding-block: 4px; }
.kios, main p a:not(.btn) { background-image: linear-gradient(currentColor, currentColor); background-position: 0 100%; background-size: 0 1px; background-repeat: no-repeat;
  transition: background-size .3s cubic-bezier(.22, 1, .36, 1), color .2s; }
.kios:hover, main p a:not(.btn):hover { background-size: 100% 1px; color: var(--mengkudu); }
main p a:not(.btn) { display: inline-block; padding-block: 3px; }