/* SASHING — the structural move is a PICTURE-FRAME PAGE: a wide calico mat on
   left, right and bottom, with the top mat switched off so a TWO-across wall of
   enormous square quilt tiles runs flush under the header with no hero, no
   heading and no paragraph above the fold. Gutter between tiles = the mat inset
   (68px), so the whole document reads as one framed sheet. Titles live inside
   the square under a hairline and only surface when the indigo wash comes over
   the photograph. The banner is the one element allowed to break the mat. */
body.t-sashing { background: #faf8f3; color: #15140f; }
body.t-sashing .sf-header, body.t-sashing .sf-footer { background: #faf8f3; border-color: #e6e2d7; }
body.t-sashing .btn.brand { background: #3e4b74; color: #ffffff; border-radius: 0; }
body.t-sashing .btn.brand:hover { background: #313c5e; }

/* THE MAT — set on .container so every section keeps its own vertical padding
   and only the left/right bands change. Bottom mat is on the contact band. */
body.t-sashing .container { max-width: 1480px; padding-left: 68px; padding-right: 68px; }

/* NO TOP MAT, NO HERO, NO HEADING — the wall is the first screen. The h2 stays
   in the document for screen readers and is clipped out of the picture. */
body.t-sashing .sc-products { padding-top: 0; padding-bottom: 0; }
body.t-sashing .sc-products .sc-h2 { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* TWO ACROSS, SQUARE, GAPPED — eight tiles, four clean rows of two. */
body.t-sashing .product-grid { grid-template-columns: repeat(2, 1fr); gap: 68px; padding: 0 0 68px; }
body.t-sashing .product-card { position: relative; background: transparent; border: 0; border-radius: 0; overflow: hidden; }
body.t-sashing .product-card:hover { transform: none; box-shadow: none; }
body.t-sashing .product-card .ph { aspect-ratio: 1; border-radius: 0; background: #3e4b74; }
body.t-sashing .product-card .ph img { transition: opacity .4s ease; }
body.t-sashing .product-card:hover .ph img { opacity: .32; }
body.t-sashing .product-card .meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 30px 26px; opacity: 0; transition: opacity .4s ease; }
body.t-sashing .product-card:hover .meta { opacity: 1; }
body.t-sashing .product-card .t, body.t-sashing .product-card .p { color: #ffffff; }
body.t-sashing .product-card .t { border-top: 1px solid rgba(255,255,255,.55); padding-top: 14px; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }

/* THE FIRST BREAK IN RHYTHM — one tall portrait beside a short measure. */
body.t-sashing .sc-about-split { grid-template-columns: 5fr 4fr; gap: 68px; align-items: start; padding-top: 96px; padding-bottom: 84px; }
body.t-sashing .sc-about-media img { aspect-ratio: 3 / 4; border-radius: 0; }

/* THE CODA — four tiles at the same gutter, half the width of the wall above. */
body.t-sashing .sc-strip-row { grid-template-columns: repeat(4, 1fr); gap: 68px; }
body.t-sashing .sc-strip-img { border: 0; border-radius: 0; background: #f1eee6; }
body.t-sashing .sc-strip .sc-h2, body.t-sashing .sc-contact-band .sc-h2, body.t-sashing .sc-contact-band-inner { text-align: left; }

/* THE ONE BREAK IN THE MAT — already full-bleed by default, given real height. */
body.t-sashing .sc-banner { padding: 128px 28px; }

/* the page's only pure-text moment, and then the bottom of the mat */
body.t-sashing .sc-richtext { max-width: 620px; padding: 92px 20px 84px; }
body.t-sashing .sc-contact-band { background: transparent; padding: 56px 0 132px; }
body.t-sashing .sc-contact-form { max-width: 420px; }

@media (max-width: 1000px) {
  body.t-sashing .container { padding-left: 26px; padding-right: 26px; }
  body.t-sashing .product-grid { gap: 26px; padding-bottom: 26px; }
  body.t-sashing .sc-strip-row { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  body.t-sashing .sc-about-split { grid-template-columns: 1fr; gap: 26px; }
  body.t-sashing .sc-banner { padding: 84px 26px; }
}
@media (max-width: 700px) {
  /* one column, still square, still gapped — and with no hover on a phone the
     titles step out of the square and sit under it in ink instead. */
  body.t-sashing .product-grid { grid-template-columns: 1fr; }
  body.t-sashing .product-card .meta { position: static; opacity: 1; padding: 14px 0 0; }
  body.t-sashing .product-card .t { color: #15140f; border-top-color: #ded9cc; }
  body.t-sashing .product-card .p { color: #6a655a; }
  body.t-sashing .sc-contact-band { padding-bottom: 72px; }
}

html[data-theme="dark"] body.t-sashing { background: #131210; color: #eae6dd; }
html[data-theme="dark"] body.t-sashing .sf-header, html[data-theme="dark"] body.t-sashing .sf-footer { background: #131210; border-color: #2b2823; }
html[data-theme="dark"] body.t-sashing .btn.brand { background: #7b8ab8; color: #12110f; }
html[data-theme="dark"] body.t-sashing .btn.brand:hover { background: #9aa6cc; }
html[data-theme="dark"] body.t-sashing .product-card .ph { background: #7b8ab8; }
html[data-theme="dark"] body.t-sashing .product-card .t, html[data-theme="dark"] body.t-sashing .product-card .p { color: #12110f; }
html[data-theme="dark"] body.t-sashing .product-card .t { border-top-color: rgba(18,17,15,.45); }
html[data-theme="dark"] body.t-sashing .sc-strip-img { background: #1d1b18; }
html[data-theme="dark"] body.t-sashing .sc-field input, html[data-theme="dark"] body.t-sashing .sc-field textarea { background: #1b1a17; border-color: #33302a; color: #eae6dd; }
@media (max-width: 700px) {
  html[data-theme="dark"] body.t-sashing .product-card .t { color: #eae6dd; border-top-color: #33302a; }
  html[data-theme="dark"] body.t-sashing .product-card .p { color: #9d988c; }
}