/* SHUTTER — a print in a card mount. The reference is a photographer's one-page
   portfolio built inside a passe-partout: a FIXED bone frame borders all four
   viewport edges, so even the full-bleed hero and the dark closing band stop
   short of the screen, the way a print stops short of the card it is mounted on.
   That frame is the theme's one structural move — body::before, fixed, clicks
   passing straight through it — and everything else keeps out of its way.
   Ground is bone, ink is near-black, and the single accent is safelight amber,
   spent only on the buy slabs, the price line and the rule that appears under a
   panel title when you point at it. The catalogue is deliberately SPLIT rather
   than repeated: the wall keeps the first four rows of stock, the priced counter
   row keeps the last four, so no product is ever shown twice on the page. */
body.t-shutter {
  background: #f7f5ef; color: #14130f;
  --bg-flat: #f7f5ef; --surface: #ffffff; --surface-2: #efece3;
  --line: #e3dfd4; --line-strong: #cdc8b9;
  --heading: #14130f; --text: #3b382f; --muted: #7c786b;
  --header-bg: #f7f5ef; --sht-amber: #c9781a;
}
/* THE MOUNT — a fixed bone border over all four edges, above the page and
   clickable straight through. Nothing else in the set frames the viewport. */
body.t-shutter::before { content: ''; position: fixed; inset: 0; z-index: 55;
  border: clamp(10px, 1.6vw, 26px) solid #f7f5ef; pointer-events: none; }
body.t-shutter .sf-header, body.t-shutter .sf-head, body.t-shutter .sf-footer, body.t-shutter .sf-foot {
  background: #f7f5ef; border-color: #e3dfd4; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.t-shutter .sf-name { text-transform: uppercase; letter-spacing: 0.22em; font-weight: 700; font-size: 15px; }
body.t-shutter .btn.brand { background: var(--sht-amber); border-color: var(--sht-amber); color: #14130f;
  box-shadow: none; border-radius: 0; text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; font-weight: 700; padding: 14px 30px; }
body.t-shutter .btn.brand:hover { background: #a96113; border-color: #a96113; }
/* condensed caps, and the amber only turns up under a title on hover */
body.t-shutter .sc-h2 { text-transform: uppercase; font-weight: 700; letter-spacing: 0.14em; font-size: clamp(14px, 1.6vw, 18px);
  color: var(--heading); padding-bottom: 12px; margin-bottom: 34px; border-bottom: 1px solid var(--line); }
body.t-shutter .sc-h2:hover { border-bottom-color: var(--sht-amber); }
/* one still, the whole screen, the two lines hard left inside the mount */
body.t-shutter .sc-hero { min-height: 100vh; padding: 0 clamp(28px, 7vw, 118px); }
body.t-shutter .sc-hero h1 { text-transform: uppercase; font-weight: 700; letter-spacing: 0; font-size: clamp(30px, 5.2vw, 66px); line-height: 1.03; }
body.t-shutter .sc-hero-inner { max-width: 540px; }
/* the column is dropped well below the top of its photograph — the deliberate
   misalignment the reference builds with a 509px top pad */
body.t-shutter .sc-about-split { align-items: start; gap: clamp(28px, 5vw, 78px); padding: clamp(72px, 10vw, 140px) 20px; }
body.t-shutter .sc-about-copy { padding-top: clamp(40px, 9vw, 150px); }
body.t-shutter .sc-about-media img { aspect-ratio: 7 / 9; border-radius: 0; }
/* THE WALL — four large tiles, two across, no gutter anywhere, with the title
   over the picture on hover instead of under it. Items five to eight are the
   counter row's stock and appear there, never here. */
body.t-shutter .sc-mas-grid { column-count: 2; column-gap: 0; }
body.t-shutter .sc-mas-item { position: relative; margin: 0; }
body.t-shutter .sc-mas-item .sc-mas-media img { aspect-ratio: 4 / 5; }
body.t-shutter .sc-mas-item:nth-child(n + 5), body.t-shutter .sc-buy-card:nth-child(-n + 4) { display: none; }
body.t-shutter .sc-mas-item::after { content: ''; position: absolute; inset: 0; background: rgba(16, 15, 11, 0.55); opacity: 0; transition: opacity 0.3s ease; }
body.t-shutter .sc-mas-cat, body.t-shutter .sc-mas-t, body.t-shutter .sc-mas-p {
  position: absolute; left: 12px; right: 12px; margin: 0; z-index: 2; opacity: 0; text-align: center; transition: opacity 0.3s ease; }
body.t-shutter .sc-mas-cat { top: calc(50% - 48px); font-size: 10.5px; letter-spacing: 0.24em; color: var(--sht-amber); }
body.t-shutter .sc-mas-t { top: calc(50% - 22px); text-transform: uppercase; letter-spacing: 0.06em; font-size: clamp(15px, 1.9vw, 21px); color: #f7f5ef; }
body.t-shutter .sc-mas-p { top: calc(50% + 14px); font-size: 14px; color: #f7f5ef; }
body.t-shutter .sc-mas-item:hover::after, body.t-shutter .sc-mas-item:hover .sc-mas-cat,
body.t-shutter .sc-mas-item:hover .sc-mas-t, body.t-shutter .sc-mas-item:hover .sc-mas-p { opacity: 1; }
/* four gapped portrait tiles on one line — the wall's opposite */
body.t-shutter .sc-strip { padding: clamp(64px, 9vw, 112px) 20px; }
body.t-shutter .sc-strip-row { grid-template-columns: repeat(4, 1fr); gap: 18px; }
body.t-shutter .sc-strip-img { aspect-ratio: 3 / 4; border-radius: 0; background: #ffffff; border-color: var(--line); }
body.t-shutter .sc-strip-label { text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; font-weight: 700; }
/* the counter: four across in one filled row, the price the only amber on it */
body.t-shutter .sc-buy-grid { grid-template-columns: repeat(4, 1fr); gap: 30px 24px; }
body.t-shutter .sc-buy-cat { color: var(--muted); }
body.t-shutter .sc-buy-p { color: var(--sht-amber); font-weight: 600; }
/* the only dark mass on the page, and the last screen you see */
body.t-shutter .sc-contact-band { background: #1b1a16; color: #efece3; padding: clamp(70px, 10vw, 118px) 0 clamp(80px, 11vw, 130px); }
body.t-shutter .sc-contact-band .sc-h2 { color: #f7f5ef; border-bottom-color: rgba(247, 245, 239, 0.22); }
body.t-shutter .sc-contact-band .sc-contact-sub { color: #b0ab9c; }
body.t-shutter .sc-contact-band-inner { max-width: 960px; }
body.t-shutter .sc-contact-band .sc-contact-form { flex-direction: row; align-items: flex-end; gap: 16px; }
body.t-shutter .sc-contact-band .sc-field { flex: 1; }
body.t-shutter .sc-contact-band .sc-field input, body.t-shutter .sc-contact-band .sc-field textarea {
  background: rgba(247, 245, 239, 0.06); border-color: rgba(247, 245, 239, 0.22); border-radius: 0; color: #f7f5ef; height: 46px; min-height: 46px; }
body.t-shutter .sc-contact-band .sc-contact-form .btn { align-self: flex-end; margin-top: 0; }
@media (max-width: 900px) {
  body.t-shutter .sc-strip-row, body.t-shutter .sc-buy-grid { grid-template-columns: repeat(2, 1fr); }
  body.t-shutter .sc-contact-band .sc-contact-form { flex-direction: column; align-items: stretch; }
  body.t-shutter .sc-contact-band .sc-contact-form .btn { align-self: flex-start; }
}
/* a phone has no pointer, so the wall's captions simply stay up */
@media (hover: none) {
  body.t-shutter .sc-mas-item::after, body.t-shutter .sc-mas-cat, body.t-shutter .sc-mas-t, body.t-shutter .sc-mas-p { opacity: 1; }
}

/* NIGHT — the safelight session. Bone drops to developer-tray dark, the mount
   goes with it so the frame still reads as a mount and not a white rim, and the
   amber lifts a stop because it is carrying every control on its own. */
html[data-theme="dark"] body.t-shutter {
  background: #131210; color: #c7c3b7;
  --bg-flat: #131210; --surface: #1a1916; --surface-2: #201f1a;
  --line: #2c2a25; --line-strong: #423f38;
  --heading: #f2efe6; --text: #c7c3b7; --muted: #8a8578;
  --header-bg: #131210; --sht-amber: #e0942f;
}
html[data-theme="dark"] body.t-shutter::before { border-color: #131210; }
html[data-theme="dark"] body.t-shutter .sf-header, html[data-theme="dark"] body.t-shutter .sf-head,
html[data-theme="dark"] body.t-shutter .sf-footer, html[data-theme="dark"] body.t-shutter .sf-foot,
html[data-theme="dark"] body.t-shutter .sf-cats { background: #131210; border-color: #2c2a25; }
html[data-theme="dark"] body.t-shutter .sc-strip-img { background: #1a1916; border-color: #2c2a25; }
html[data-theme="dark"] body.t-shutter .sc-contact-band { background: #0a0a08; }
html[data-theme="dark"] body.t-shutter .btn.brand { color: #14130f; }