:root{--ink:#28251f;--muted:#675f54;--paper:#f9f7f0;--linen:#eae5da;--line:#cdc6b8;--wine:#643b37;--serif:Georgia,"Times New Roman",serif;--sans:"Helvetica Neue",Arial,sans-serif;color-scheme:light}
*{box-sizing:border-box}
html{min-height:100%;color:var(--ink);font:16px/1.4 var(--sans);font-variant-numeric:tabular-nums}
body{margin:0;min-height:100vh;background:var(--linen)}
button,a{font:inherit;-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:focus-visible,a:focus-visible{outline:3px solid #9e4824;outline-offset:3px}
::selection{background:#c7aa8b;color:#161510}
[hidden]{display:none!important}
.masthead{max-width:1550px;margin:auto;min-height:88px;padding:16px clamp(20px,4.9vw,88px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #c7bfb2;gap:15px}
.mastbrand{display:flex;align-items:center;gap:clamp(15px,2.4vw,40px)}
.mastbrand img{width:clamp(70px,7.2vw,116px);height:auto;display:block}
.mastbrand h1{font:400 clamp(27px,2.8vw,46px)/1 var(--serif);margin:0;padding-left:clamp(15px,2.4vw,40px);border-left:1px solid #b9afa2;letter-spacing:-.035em}
.masthead p{font-size:14px;color:#615b50;margin:0}
.floor{max-width:1440px;margin:auto;padding:clamp(28px,3.4vw,56px) clamp(20px,5vw,82px) 22px;display:grid;grid-template-columns:minmax(212px,.351fr) minmax(0,1fr);gap:clamp(27px,4vw,78px);align-items:start}
.device{min-width:0}
.device-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px;min-height:38px}
.device-bar h2{font:400 clamp(18px,1.72vw,28px)/1.15 var(--serif);margin:0;letter-spacing:-.035em}
.expand,.back{display:inline-flex;align-items:center;justify-content:center;gap:6px;color:#514e43;text-decoration:none;font-size:12px;font-weight:500;min-height:40px;white-space:nowrap}
.expand svg,.back svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.expand:hover{color:var(--wine);text-decoration:underline;text-underline-offset:3px}
.monitor{padding:clamp(4px,.55vw,9px);background:#282a25;border-radius:6px;box-shadow:0 13px 22px -16px #322a1c80}
.monitor-face{background:#f4f0e7;aspect-ratio:9/16;container-type:size;overflow:hidden}
.post{margin:auto;width:13%;height:clamp(17px,2.7vw,44px);background:linear-gradient(90deg,#3e403a,#63635b 48%,#403f39)}
.foot{margin:auto;width:49%;height:6px;border-radius:50% 50% 2px 2px;background:#3a3b34;box-shadow:0 7px 8px -4px #49403370}
.tablet-frame{background:linear-gradient(125deg,#484a43 0,#232521 22%,#161714 85%,#45463f);padding:clamp(7px,.9vw,15px);border-radius:clamp(18px,2.2vw,34px);box-shadow:0 13px 30px -15px #27241c78}
.tablet{background:var(--paper);border-radius:clamp(10px,1.4vw,21px);overflow:hidden;container-type:inline-size;min-width:0}
.tablet-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px clamp(12px,3.4cqw,36px);min-height:clamp(50px,7cqw,75px);border-bottom:1px solid #ddd7cb}
.brand-line{display:flex;align-items:baseline;gap:12px}
.brand-line strong{font:400 clamp(27px,4.15cqw,50px)/1 var(--serif);letter-spacing:-.038em}
.brand-line small{font-size:clamp(11px,1.45cqw,15px);color:var(--muted)}
.tabs{display:flex;gap:clamp(11px,2.5cqw,30px)}
.tab{padding:0;min-height:44px;border:0;background:none;color:#625c52;font-size:clamp(12px,1.52cqw,18px);position:relative;white-space:nowrap}
.tab[aria-pressed="true"]{color:var(--ink);font-weight:600}
.tab[aria-pressed="true"]:after{content:"";position:absolute;height:2px;bottom:4px;left:0;right:0;background:var(--wine)}
.scene{margin:0;position:relative;background:#d3c5ad}
.scene img{display:block;width:100%;height:clamp(210px,39.8cqw,460px);object-fit:cover;object-position:50% 85%}
.controls{display:grid;grid-template-columns:minmax(0,1.29fr) minmax(0,1fr);gap:clamp(15px,2.6cqw,32px);padding:clamp(14px,2.2cqw,26px) clamp(12px,3.4cqw,36px) clamp(16px,2.4cqw,27px)}
.group h3{margin:0 0 8px;font-size:clamp(12px,1.7cqw,17px);font-weight:600}
.fabric-options,.lights{display:flex;gap:5px;align-items:stretch}
.fabric,.kelvin{background:transparent;color:var(--ink);border:1px solid #d0c9bc;border-radius:5px;min-height:44px}
.fabric:hover,.kelvin:hover{background:#ede8db}
.fabric[aria-pressed=true],.kelvin[aria-pressed=true]{border-color:#524b3b;background:#ebe6d8;box-shadow:inset 0 0 0 1px #524b3b}
.fabric{display:flex;align-items:center;text-align:left;gap:clamp(4px,.8cqw,10px);padding:5px clamp(5px,.85cqw,14px);flex:1}
.fabric b,.fabric small{display:block;white-space:nowrap}
.fabric b{font-size:clamp(11px,1.43cqw,15px);font-weight:500}
.fabric small{font-size:clamp(9px,1.17cqw,13px);color:#60594e;margin-top:2px}
.swatch{flex:none;display:flex;width:clamp(19px,2.9cqw,38px);height:clamp(21px,3.1cqw,38px);overflow:hidden;border-radius:3px;box-shadow:0 1px 2px #332d201f}
.swatch img{width:52%;height:100%;object-fit:cover}
.lights{gap:4px}
.kelvin{padding:4px 2px;flex:1;font-size:clamp(10px,1.45cqw,16px);line-height:1.15}
.kelvin small{display:block;font-size:clamp(9px,1.1cqw,12px);margin-top:3px}
.fixed-light{margin:0;min-height:44px;display:flex;align-items:center;color:var(--muted);font-size:clamp(12px,1.6cqw,17px)}
.measurements{padding:clamp(20px,4cqw,45px) clamp(14px,4.3cqw,52px);min-height:clamp(335px,54cqw,640px);display:flex;flex-direction:column;justify-content:center}
.measurements h3{font:400 clamp(26px,4.6cqw,55px)/1 var(--serif);letter-spacing:-.03em;margin:0 0 12px}
.measurements img{display:block;width:100%;height:clamp(105px,18cqw,220px);object-fit:contain;mix-blend-mode:multiply;margin:0 auto 15px}
.measurements table{width:100%;border-collapse:collapse;font-size:clamp(13px,1.9cqw,20px)}
.measurements caption{text-align:left;color:var(--muted);font-size:clamp(11px,1.5cqw,15px);padding:0 0 6px}
.measurements td,.measurements th{text-align:left;padding:9px 0;border-top:1px solid var(--line)}
.measurements th{font-weight:500}.measurements td{text-align:right;white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.back{position:fixed;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));z-index:12;border:1px solid #a69c8c;background:#f9f7f0;color:#302d26;border-radius:22px;padding:3px 13px;box-shadow:0 3px 13px #17150f26}
body[data-view=pair] .back,body:not([data-view=pair]) .masthead,body:not([data-view=pair]) .device-bar,body:not([data-view=pair]) .post,body:not([data-view=pair]) .foot{display:none}
body[data-view=stand]{background:#191a17}
body[data-view=stand] .tablet-device,body[data-view=tablet] .stand-device{display:none}
body[data-view=stand] .floor{display:grid;grid-template-columns:minmax(0,1fr);place-items:center;max-width:none;padding:0;min-height:100vh;min-height:100dvh}
body[data-view=stand] .stand-device{width:min(100vw,56.25vh);width:min(100vw,56.25dvh)}
body[data-view=stand] .monitor,body[data-view=tablet] .tablet-frame{padding:0;border-radius:0;box-shadow:none}
body[data-view=tablet]{background:var(--paper)}
body[data-view=tablet] .floor{display:block;padding:0 0 52px;max-width:1450px}
body[data-view=tablet] .tablet{border-radius:0}
body[data-view=tablet] .scene img{height:clamp(240px,55vh,760px);height:clamp(240px,55dvh,760px);object-position:50% 81%}
body[data-view=tablet] .tablet-frame{background:var(--paper)}
body[data-view=stand].idle .back:not(:focus-visible){opacity:0}
@media(max-width:980px) and (min-width:721px){.floor{padding-right:24px;padding-left:24px;gap:22px;grid-template-columns:minmax(184px,.355fr) minmax(0,1fr)}.device-bar h2{font-size:19px}.expand{font-size:11px}.masthead{min-height:75px}}
@container(max-width:660px){.controls{grid-template-columns:1fr}.fabric-options{max-width:100%}.kelvin{min-height:44px}.kelvin small{display:inline;margin-left:3px}.fabric b{font-size:12px}.fabric small{font-size:10px}.swatch{width:25px;height:27px}.lights{max-width:100%}.controls{gap:12px}.group h3{margin-bottom:5px}.brand-line small{display:none}}
@media(max-width:720px){.masthead{min-height:68px}.floor{grid-template-columns:1fr;gap:36px;padding:16px 13px 30px}.device-bar{margin:0 3px 7px}.tablet-device{grid-row:1}.stand-device{width:min(82vw,335px);justify-self:center}.tablet-frame{padding:6px;border-radius:20px}.tablet{border-radius:15px}.device-bar h2{font-size:21px}.masthead p{font-size:12px}.expand{min-height:44px}}
@media(prefers-reduced-motion:no-preference){.back{transition:opacity .2s}.scene img.changed{animation:arrive .22s ease-out}@keyframes arrive{from{opacity:.82}to{opacity:1}}}


.info-display {
  display: block;
  box-sizing: border-box;
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  isolation: isolate;
  background: #f4f0e7;
  color: #26251f;
  text-align: left;
  font-family: "Avenir Next", Avenir, Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-variant-numeric: lining-nums tabular-nums;
}
.info-display * { box-sizing: border-box; }
.info-display .id-face {
  width: 100%;
  height: 177.778cqw;
  padding: 7cqw 6.6cqw 5.4cqw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.info-display .id-brand {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 3.7cqw;
  border-bottom: .18cqw solid #aba898;
}
.info-display .id-brand img { display: block; width: 20.4cqw; height: auto; }
.info-display .id-edition, .info-display .id-key {
  display: block; letter-spacing: .12em; font-size: 2.55cqw; line-height: 1.2; font-weight: 650; color: #56594c;
}
.info-display .id-model { margin: 0; font: normal 400 19.5cqw/.87 Baskerville, "Iowan Old Style", "Times New Roman", serif; letter-spacing: -.04em; color: #24251f; }
.info-display .id-family { margin: 1.7cqw 0 0 .3cqw; font-size: 4.45cqw; line-height: 1.1; letter-spacing: -.025em; }
.info-display .id-hero { display: block; width: 100%; height: 58.8cqw; object-fit: cover; object-position: center 55%; }
.info-display .id-facts, .info-display .id-dim { margin: 0; }
.info-display .id-scale { margin: 1cqw 0 2.6cqw; font-size: 3.02cqw; line-height: 1.2; color: #56594c; }
.info-display .id-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1cqw;
  padding: 2cqw 0 2.2cqw; border-top: .14cqw solid #aba898;
}
.info-display .id-row dt { margin: 0; font-size: 3.75cqw; line-height: 1.2; }
.info-display .id-row dd { margin: 0; white-space: nowrap; font: normal 400 5.25cqw/1 Baskerville, "Iowan Old Style", "Times New Roman", serif; }
.info-display .id-materials {
  display: grid; grid-template-columns: 1.14fr 1fr; gap: 3cqw;
  padding-top: 3.6cqw; border-top: .18cqw solid #aba898;
}
.info-display .id-list {
  margin: 1.7cqw 0 0; color: #292a24;
  font-size: 3.6cqw; line-height: 1.4; letter-spacing: -.025em;
}
.info-display .id-foot {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: .14cqw solid #aba898; padding-top: 2.3cqw;
  font-size: 2.85cqw; line-height: 1.2; color: #57584e;
}

/* Gallery navigation stays outside both fair displays. */
.masthead{min-height:70px}
.mastbrand h1{font-size:clamp(22px,2.5vw,36px)}
.utilities,.langs,.contact-links{display:flex;align-items:center;gap:16px}
.utilities a,.visitor-en,.pocket-link{color:var(--ink);font-size:13px;text-underline-offset:3px}
.langs{gap:2px}
.langs button{background:transparent;color:var(--muted);border:none;min-width:40px;height:44px}
.langs button[aria-pressed=true]{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:4px}
.gallery-chooser{max-width:1440px;padding:13px clamp(20px,5vw,82px) 0;margin:auto}
.gallery-chooser nav{display:flex;overflow-x:auto;gap:clamp(8px,1.4vw,24px);scrollbar-width:thin}
.model-choice{display:flex;align-items:center;gap:10px;padding:7px 5px 8px 0;text-align:left;border:0;border-bottom:2px solid transparent;background:none;min-height:50px;line-height:1.15}
.model-choice[aria-pressed=true]{border-bottom-color:var(--wine)}
.model-choice img{width:48px;height:36px;object-fit:cover;border-radius:2px}
.model-choice b{font:400 19px/1 var(--serif)}
.model-choice small{display:block;color:var(--muted);font-size:11px;margin-top:3px;white-space:nowrap}
.floor{padding-top:clamp(11px,1.2vw,22px);padding-bottom:20px}
body:not([data-view=pair]) .gallery-chooser{display:none}
.info-display .id-face{padding:5.5cqw 5.8cqw 4.3cqw}
.info-display .id-model{font-size:17.4cqw;line-height:1}
.info-display .id-hero{height:49cqw}
.info-display .id-family{font-size:4.2cqw}
.info-display .id-foot{display:grid;grid-template-columns:23cqw 1fr;align-items:center;gap:3cqw}
.id-qr{display:block;width:23cqw;height:23cqw;image-rendering:pixelated}
.id-follow{font-size:4cqw;line-height:1.2;text-decoration:none;color:var(--ink)}
.id-follow small{display:block;margin-top:1cqw;font-size:2.8cqw;color:#514c40}
.info-display .id-key{font-size:2.8cqw}
.info-display .id-list{font-size:3.5cqw}
.id-colour{margin:0;font-size:3.75cqw;line-height:1.25}
.info-display .id-scale{font-size:3.1cqw}
.info-display .id-row dt{font-size:3.45cqw}
.info-display .id-row dd{font-size:4.4cqw}
.brand-line strong{white-space:nowrap}.tablet-top{flex-wrap:wrap}
.scene-opener{background:transparent;border:0;display:block;padding:0;width:100%;position:relative;color:var(--ink)}
.zoom-label{position:absolute;right:10px;bottom:10px;background:#faf7ee;color:#28251f;border-radius:20px;padding:7px 10px;box-shadow:0 2px 7px #221b171a;font-size:12px}
.fabric{max-width:100%;min-width:0}.fabric b,.fabric small{white-space:normal}.swatch img:only-child{width:100%}
.fabric-options:has(.fabric:only-child) .fabric{max-width:max-content;min-width:145px}
.fabric[aria-pressed=true]:only-child{background:none;border-color:#d0c9bc;box-shadow:none;cursor:default}
.controls{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.scene-actions{padding:0 clamp(12px,3.4cqw,36px) 12px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.visitor-en,.pocket-link{display:inline-flex;align-items:center;min-height:38px;text-decoration:underline;font-size:clamp(12px,1.6cqw,16px)}
.product-contact{min-height:clamp(310px,48cqw,580px);padding:clamp(16px,4cqw,48px);display:flex;gap:clamp(15px,4cqw,50px);align-items:center;justify-content:center}
.product-contact img{width:clamp(94px,26cqw,280px);height:auto;image-rendering:pixelated}
.product-contact h3{font:normal 400 clamp(24px,4.2cqw,52px)/1.1 var(--serif);margin:0 0 10px}
.product-contact p{font-size:clamp(13px,1.8cqw,18px);margin:0 0 9px;max-width:31ch;color:var(--muted)}
.contact-links{align-items:flex-start;gap:2px;flex-direction:column}
.contact-links a{min-height:36px;display:flex;align-items:center;font-size:clamp(12px,1.8cqw,18px);color:var(--ink);text-underline-offset:3px}
dialog{border:0;background:#1a1916;color:#fff;padding:0;max-width:96vw;max-height:96dvh;overflow:auto}dialog::backdrop{background:#171511d9}
dialog img{display:block;width:auto;max-width:91vw;max-height:78dvh;object-fit:contain}dialog form{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:8px 12px}
dialog p{margin:0;font-size:14px}dialog button{color:#201c16;background:#f4efe3;border:0;padding:8px 16px;min-height:44px}
#problem{padding:20px}#problem a{color:var(--ink)}
@media(max-width:980px) and (min-width:721px){.gallery-chooser{padding-left:24px;padding-right:24px}}
@media(max-width:720px){.gallery-chooser{padding:6px 13px 0}.model-choice{gap:5px}.model-choice img{width:32px;height:27px}.model-choice b{font-size:17px}.model-choice small{font-size:10px}.utilities{gap:5px}.utilities>a{font-size:11px;max-width:67px}.langs button{min-width:32px}.mastbrand{gap:10px}.mastbrand h1{font-size:19px;padding-left:10px}.mastbrand img{width:61px}.masthead{padding:8px 14px;min-height:65px}.device-bar{min-height:36px}.device-bar h2{font-size:20px}.gallery-chooser nav{gap:14px}}
@container(max-width:660px){.controls{grid-template-columns:1fr}.tabs{gap:12px}.tab{font-size:12px}.tablet-top{row-gap:1px}.scene-actions a{font-size:12px}.contact-links a{min-height:44px}}
@media(max-width:375px){.gallery-chooser nav{gap:12px}.tablet-top{gap:4px}.tabs{gap:9px}.brand-line strong{font-size:23px}}
@media(max-width:510px){.utilities{gap:6px}.utilities>a{font-size:11px;line-height:1.2;max-width:54px}.utilities .general-qr{max-width:37px}.masthead{padding-inline:10px}.mastbrand img{width:48px}.mastbrand h1{font-size:17px}.mastbrand{gap:6px}.mastbrand h1{padding-left:6px}.langs button{min-width:28px;padding:0}}
.info-display .id-foot{grid-template-columns:32cqw 1fr}
.id-qr-link{width:32cqw;background:white;padding:0;border:0;display:block;cursor:zoom-in}
.id-qr{width:100%;height:auto}
#qr-popup{padding:16px;background:#fbf9f3;color:var(--ink)}
#qr-popup>img{width:min(392px,75vw,57vh);height:auto;margin:0 auto;image-rendering:pixelated}
#qr-popup>p{padding-top:11px;text-align:center;font-weight:600}
#qr-popup form{padding:9px 0 0}
#qr-popup a{font-size:14px;color:var(--ink);text-underline-offset:3px}
/* The model QR is a 49-module square including its quiet zone. */
.info-display .id-face{--qr-size:98px;--qr-size:clamp(49px,round(nearest,32cqw,49px),392px)}
.info-display .id-foot{grid-template-columns:var(--qr-size) 1fr}
.id-qr-link{width:var(--qr-size)}