/* signature theme: pieces that exist only on the real site (not in the mockup). */
.t-ftr__news { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; padding: 0 0 34px; margin-bottom: 38px; border-bottom: 1px solid rgba(233,226,217,.18); }
.t-ftr__news > div { display: grid; gap: 4px; }
.t-ftr__news b { font-family: var(--serif); font-variation-settings: "SOFT" 20, "WONK" 0; font-weight: 400; font-size: 26px; line-height: 1.15; color: var(--chalk); }
.t-ftr__news span { color: #CFC4B6; font-size: 15px; }
.t-ftr__form { display: flex; flex-wrap: wrap; gap: 10px; flex: 1 1 360px; max-width: 520px; }
.t-ftr__form input[type=email] { flex: 1 1 220px; min-height: 52px; padding: 0 16px; border: 1px solid rgba(233,226,217,.35); border-radius: var(--r); background: transparent; color: var(--chalk); font: inherit; }
.t-ftr__form input[type=email]::placeholder { color: #A99D90; }
.t-ftr__form #fnl-msg { flex-basis: 100%; font-size: 14px; color: #E9E2D9; }
.t-ftr__social { margin: 14px 0 0; display: flex; gap: 18px; font-size: 14px; }
.t-ftr__social a { color: #E9E2D9; }
@media (max-width: 860px) { .t-ftr__news b { font-size: 22px; } .t-ftr__form .t-btn { flex: 1 1 100%; } }
/* the site's form validation also marks the footer field; keep it in the footer's look */
.t-ftr__form input[type=email], .t-ftr__form input[type=email]:focus, .t-ftr__form input[type=email].error, .t-ftr__form input[type=email]:invalid { background: transparent !important; color: var(--chalk) !important; border: 1px solid rgba(233,226,217,.35) !important; box-shadow: none !important; }
.t-ftr__form input[type=email]:focus { border-color: var(--chalk) !important; outline: none; }
.t-ftr__form label.error { display: none !important; }

/* ── tile models, measured from the owner's photos (2 Nov 2026) ──
   Photo Tile: 21 cm, matte black or white frame, 5 mm lip, print slightly recessed, 20 mm deep.
   Foam Tile: no frame, print over an 18 mm charcoal foam block (texture: img/foam-side*.jpg).
   The wall photo is lit from the window on the left, so depth shadows fall down and to the right. */
.t-preview .t-preview__tiles i {
  --lip: max(1.5px, calc(100cqw * .55 / 260));
  border: var(--lip) solid #1d1c1b; background-color: #ddd;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.38), inset 1px 1px 0 1px rgba(0,0,0,.12),
              calc(100cqw * .9 / 260) calc(100cqw * 1.3 / 260) calc(100cqw * 1.8 / 260) rgba(46,30,18,.34), 0 0 1px rgba(0,0,0,.45);
}
.t-preview[data-colour="white"] .t-preview__tiles i { border-color: #F3F1ED; box-shadow: inset 0 0 0 1px rgba(0,0,0,.16), calc(100cqw * .9 / 260) calc(100cqw * 1.3 / 260) calc(100cqw * 1.8 / 260) rgba(46,30,18,.3), 0 0 1px rgba(0,0,0,.3); }
.t-preview[data-kind="foam"] .t-preview__tiles i {
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28),
              calc(100cqw * .45 / 260) calc(100cqw * .45 / 260) 0 #34312E,
              calc(100cqw * 1.2 / 260) calc(100cqw * 1.6 / 260) calc(100cqw * 2 / 260) rgba(46,30,18,.36);
}

/* close-up: one tile at an angle, so the frame depth / foam edge shows */
.t-model { position: absolute; right: 4.5cqw; top: 3.5cqw; width: 19cqw; perspective: 70cqw; pointer-events: none; z-index: 2; filter: drop-shadow(calc(100cqw * .02) calc(100cqw * .025) calc(100cqw * .02) rgba(46,30,18,.32)); }
/* a filter on the 3D box itself would flatten it, so the shadow sits on the wrapper */
.t-model__box { position: relative; width: 19cqw; height: calc(19cqw * var(--th, 21) / var(--tw, 21)); transform-style: preserve-3d; transform: rotateY(-34deg) rotateX(16deg); transition: height .3s ease; }
.t-model__box > i { position: absolute; display: block; backface-visibility: hidden; }
.t-model__front { inset: 0; background: #ccc center / cover; border: calc(19cqw * 5 / 210) solid #1f1e1d; box-shadow: inset 0 0 0 1px rgba(0,0,0,.45); }
.t-model__right { top: 0; left: 100%; width: calc(19cqw * var(--depth, 20) / 210); height: 100%; transform-origin: left center; transform: rotateY(90deg); background: linear-gradient(90deg, #232120, #121110); }
.t-model__bottom { left: 0; top: 100%; height: calc(19cqw * var(--depth, 20) / 210); width: 100%; transform-origin: center top; transform: rotateX(-90deg); background: linear-gradient(180deg, #1c1b1a, #0e0d0c); }
.t-model[data-colour="white"] .t-model__front { border-color: #F4F2EE; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.t-model[data-colour="white"] .t-model__right { background: linear-gradient(90deg, #E6E2DC, #CFCAC2); }
.t-model[data-colour="white"] .t-model__bottom { background: linear-gradient(180deg, #DAD5CE, #C2BCB3); }
.t-model[data-kind="foam"] { --depth: 18; }
.t-model[data-kind="foam"] .t-model__front { border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.t-model[data-kind="foam"] .t-model__right { background: url(../img/foam-side.jpg) center / cover; box-shadow: inset 1px 0 0 rgba(255,255,255,.55); }
.t-model[data-kind="foam"] .t-model__bottom { background: url(../img/foam-side-h.jpg) center / cover; box-shadow: inset 0 1px 0 rgba(255,255,255,.55); }
.t-model__cap { position: absolute; right: 0; top: calc(100% + 2.2cqw); font: 600 12px/1 var(--sans); color: var(--walnut); background: rgba(251,250,247,.9); padding: 3px 6px; border-radius: 2px; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .t-model__box { transition: none; } }

/* ── plain pages (contact, password reset …): a quiet title band and theme fields ── */
.t-pagehead { background: var(--plaster); padding: 18px 0 clamp(30px, 4vw, 52px); }
.t-pagehead .t-crumbs { padding: 0 0 clamp(18px, 3vw, 34px); }
.t-pagehead .t-d1 { font-size: clamp(40px, 2.8vw + 26px, 72px); }
.t-pagehead .t-lead { margin-top: 14px; color: var(--oak); }
.t-cnt__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.t-cnt__info .t-facts { margin-top: 0; }
.t-cnt__card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: clamp(20px, 3vw, 36px); }
.t-cnt__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.t-field { display: grid; gap: 6px; margin-bottom: 18px; }
.t-field label { font-weight: 600; font-size: 14.5px; display: flex; justify-content: space-between; gap: 10px; }
.t-field :is(input, textarea, select) { width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--ctl); border-radius: var(--r); background: #fff; color: var(--walnut); font: inherit; }
.t-field textarea { min-height: 170px; resize: vertical; }
.t-field :is(input, textarea, select):focus { outline: none; border-color: var(--walnut); box-shadow: 0 0 0 3px rgba(42,33,27,.08); }
.t-field.has-error :is(input, textarea, select) { border-color: #A04A3A; }
.t-cnt__err { font-size: 13.5px; color: #8E3B2E; }
.t-cnt__count { font-weight: 400; color: var(--oak); font-size: 13px; }
.t-cnt__formerr { margin: 0 0 18px; padding: 12px 14px; background: #F6E7E2; border: 1px solid #E6C3B9; border-radius: var(--r); color: #6E2A1F; }
.t-cnt__card .t-btn--go { min-width: 220px; }
.t-cnt__done { display: grid; gap: 12px; justify-items: start; }
.t-cnt__done p { margin: 0; color: var(--oak); }
@media (max-width: 860px) { .t-cnt__grid { grid-template-columns: 1fr; } .t-cnt__row { grid-template-columns: 1fr; } .t-cnt__card .t-btn--go { width: 100%; } }

/* policy pages: the original legal text, set for reading */
.t-legal { max-width: 46em; }
.t-legal :is(.container, .row, [class*="col-"]) { max-width: none; width: auto; padding: 0; margin: 0; display: block; }
.t-legal :is(p, li) { color: var(--walnut); font-size: 16px; line-height: 1.65; }
.t-legal :is(h2, h3, h4, h5) { font-family: var(--serif); font-variation-settings: "SOFT" 20, "WONK" 0; font-weight: 420; text-transform: none; letter-spacing: -.005em; margin: 1.8em 0 .5em; line-height: 1.2; }
.t-legal h2 { font-size: 28px; } .t-legal h3 { font-size: 23px; } .t-legal :is(h4, h5) { font-size: 19px; }
.t-legal :is(ol, ul) { padding-left: 1.3em; }
.t-legal a { color: var(--walnut); text-underline-offset: 3px; }
.t-legal [class*="mt-"] { margin-top: 0 !important; }

/* eight menu items with Wall art: the menu button up to 1150 px, tighter spacing up to 1279 px */
@media (max-width: 1150px) { .t-nav, .t-hdr .t-icon-btn--acct { display: none; } .t-burger { display: grid; } }
@media (min-width: 1151px) and (max-width: 1279px) { .t-nav { gap: 16px; font-size: 14px; } }
.t-legal, .t-legal :where(p, li, span, div, td, small, strong, b, em, a, font) { font-family: var(--sans) !important; }
.t-legal :is(p, li, td) { font-size: 16px !important; line-height: 1.65 !important; }
.t-legal [class*="offset-"], .t-legal [style*="margin-left"], .t-legal [style*="padding-left"] { margin-left: 0 !important; }
.t-wrap.t-legal { max-width: none; }
.t-legal > * { max-width: 46em; }
.t-legal .tnc { padding: 0 !important; }
.t-legal #terms-conditions, .t-legal [class*="mt-"] { margin-top: 0 !important; }

/* big prints (owner 2 Nov: 100 x 150 and 122 x 162 sat on the couch): the wall grows upwards instead. The photo stays
   anchored at the bottom at the same scale, plain wall above it in the colour of the photo's top edge. */
.t-scale { background: #C9AF97 url(../img/wall-before-wide.jpg) center bottom / 100% auto no-repeat; transition: aspect-ratio .35s ease; }

/* the floating frame on the wall (owner 2 Nov: raw wood, black or white; a slim gap): ~6 mm shadow gap, ~12 mm face */
.t-scale .t-scale__art.is-float { outline: max(1.5px, calc(100cqw * 1.2 / 260)) solid #2A2724; outline-offset: max(1px, calc(100cqw * .6 / 260)); box-shadow: 0 0 0 max(1px, calc(100cqw * .6 / 260)) #1c1916, 0 3px 8px rgba(42,33,27,.25); }
.t-scale .t-scale__art.is-float[data-float="raw"] { outline-color: #C9A27A; }
.t-scale .t-scale__art.is-float[data-float="white"] { outline-color: #F4F2EE; }
.t-ffpick { display: flex; flex-wrap: wrap; gap: 8px; }
.t-ffpick button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1.5px solid var(--ctl); border-radius: var(--r); background: #fff; font: 500 14px var(--sans); color: var(--walnut); cursor: pointer; }
.t-ffpick button[aria-pressed="true"] { border-color: var(--walnut); box-shadow: inset 0 0 0 1px var(--walnut); }
.t-ffpick i { width: 16px; height: 16px; border-radius: 2px; display: block; }
.t-ffpick i[data-c="raw"] { background: linear-gradient(135deg, #D6B48C, #B98C5A); }
.t-ffpick i[data-c="black"] { background: #2A2724; }
.t-ffpick i[data-c="white"] { background: #fff; box-shadow: inset 0 0 0 1px #d9d0c5; }

/* ── motion (2 Nov 2026): set up by theme.js only; .is-in brings each one in ── */
.t-mo { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.2,.7,.2,1) var(--mo-d, 0ms), transform .9s cubic-bezier(.2,.7,.2,1) var(--mo-d, 0ms); will-change: opacity, transform; }
.t-mo--load { transform: translateY(14px); }
.t-mo.is-in { opacity: 1; transform: none; }
/* pictures settle from a slight zoom as their card comes in */
.t-mo figure img, .t-mo.t-hero__pic img { transform: scale(1.06); transition: transform 1.4s cubic-bezier(.2,.7,.2,1) var(--mo-d, 0ms); }
.t-mo.is-in figure img, .t-mo.is-in.t-hero__pic img { transform: scale(1); }
.t-range:hover figure img, .t-room:hover figure img, .t-pick a:hover figure img { transform: scale(1.04); transition-delay: 0ms; }
.t-room figure img, .t-pick figure img { transition: transform .6s ease; }
/* section titles draw a short rule under them as they arrive */
.t-sec__head .t-d2 { position: relative; }
.t-sec__head .t-d2.t-mo::after { content: ""; position: absolute; left: 0; bottom: -10px; height: 2px; width: 0; background: var(--oak); transition: width .9s cubic-bezier(.2,.7,.2,1) calc(var(--mo-d, 0ms) + 250ms); }
.t-sec__head .t-d2.t-mo.is-in::after { width: 56px; }
@media (prefers-reduced-motion: reduce) { .t-mo, .t-mo figure img { opacity: 1 !important; transform: none !important; transition: none !important; } }
@media print { .t-mo { opacity: 1 !important; transform: none !important; } }

/* a sold-out size (2 Nov 2026): on show but quiet -- dashed, muted, struck price, a small tag on its own line */
[data-sizes] button.is-out { display: grid; justify-items: center; gap: 2px; border-style: dashed; color: var(--oak); background: transparent; cursor: not-allowed; opacity: 1; }
[data-sizes] button.is-out s { text-decoration-thickness: 1px; }
[data-sizes] button.is-out small { font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--oak); background: var(--plaster); border-radius: 999px; padding: 1px 8px; }
/* the footer's Subscribe: dark words on the yellow, like every yellow button */
#fnl-submit.t-btn--go, #fnl-submit.t-btn--go:hover { color: var(--walnut) !important; }
