/* Tints page. Same minimal language as the rest of ARKS, with the lights off.
   Sizes are fluid (clamp/vw/svh) so the layout scales smoothly from 320px phones to wide desktops. */
html.theme-dark { --paper: #0a0a0b; --ink: #ececec; background: var(--paper); scrollbar-color: #3a3a3d transparent; }
html.theme-dark ::-webkit-scrollbar-thumb { background: #3a3a3d; }
.tints-page { --dim: #85858a; --faint: #4a4a4e; --hair: rgba(255, 255, 255, .09); --space: clamp(84px, 13vw, 190px); background: var(--paper); color: var(--ink); }
.tints-page ::selection { background: #ececec; color: #0a0a0b; }
.tints-page .display-title { color: var(--ink); }
.tints-page .site-header { z-index: 45; }

/* The film over the whole page; its strength follows the chosen shade. */
.page-film { position: fixed; inset: 0; z-index: 40; background: #000; opacity: var(--film, .46); pointer-events: none; transition: opacity .7s cubic-bezier(.16, 1, .3, 1); }
.window-down .page-film { opacity: 0; }

/* ---------- Hero ---------- */
.tints-hero { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(18px, 3.4vh, 34px); padding: 96px var(--gutter) 110px; text-align: center; overflow: hidden; }
.tints-title {
  margin: 0; padding: 0 .1em .04em 0;
  font-family: Archivo, 'Arial Black', Arial, sans-serif; font-size: clamp(64px, min(24vw, 44svh), 400px); font-weight: 900; font-style: italic;
  letter-spacing: -.085em; line-height: .82; text-transform: uppercase; user-select: none;
  color: #1c1c1f;
  background: radial-gradient(circle clamp(110px, 17vw, 300px) at var(--lx, -30%) var(--ly, 50%), #f4f4f4 0%, #a3a3a6 30%, #1c1c1f 74%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.tints-hint { margin: 0; color: var(--faint); font-size: clamp(11.5px, 1vw, 13px); letter-spacing: .02em; }
.tints-btn { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 24px; border-radius: 999px; background: #ececec; color: #0a0a0b; font-family: Archivo, Arial, sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; transition: transform .22s cubic-bezier(.16, 1, .3, 1), background .2s; }
.tints-btn:hover { background: #fff; transform: translateY(-1px); }
.tints-btn span { font-family: Arial, sans-serif; font-size: 15px; transition: transform .22s cubic-bezier(.16, 1, .3, 1); }
.tints-btn:hover span { transform: translateX(3px); }

/* ---------- Section rhythm ---------- */
.tints-section { padding-block: var(--space) 0; }
.tints-section:nth-last-of-type(2) { padding-bottom: var(--space); } /* the one right before contact */
.tints-h2 { margin-bottom: clamp(28px, 5vw, 72px) !important; font-size: clamp(40px, 8vw, 132px); }

/* ---------- Shades: five panes of glass, always one row ---------- */
.shade-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, 1.8vw, 28px); }
.shade { display: grid; align-content: start; gap: clamp(4px, .6vw, 8px); min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.shade-swatch { position: relative; display: block; aspect-ratio: 3 / 4; margin-bottom: clamp(8px, 1.2vw, 16px); border-radius: clamp(8px, 1.2vw, 16px) clamp(8px, 1.2vw, 16px) 4px 4px; overflow: hidden; background: linear-gradient(165deg, #e9ecef 0%, #b9c0c6 46%, #7d858c 100%); outline: 1px solid transparent; outline-offset: clamp(3px, .5vw, 6px); transition: outline-color .3s, transform .4s cubic-bezier(.16, 1, .3, 1); }
.shade-swatch::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .22) 38%, transparent 46%, transparent 62%, rgba(255, 255, 255, .12) 68%, transparent 74%); }
.shade-swatch::after { content: ""; position: absolute; inset: 0; background: #050506; opacity: var(--a); }
.shade[data-vlt-option="70"] { --a: .3; }
.shade[data-vlt-option="50"] { --a: .5; }
.shade[data-vlt-option="35"] { --a: .65; }
.shade[data-vlt-option="20"] { --a: .8; }
.shade[data-vlt-option="5"]  { --a: .95; }
.shade[aria-checked="true"] .shade-swatch { outline-color: var(--ink); }
@media (hover: hover) { .shade:hover .shade-swatch { transform: translateY(-4px); } }
.shade-num { font-family: Archivo, 'Arial Black', Arial, sans-serif; font-size: clamp(17px, 3.2vw, 46px); font-weight: 900; font-style: italic; letter-spacing: -.06em; line-height: 1; color: var(--dim); transition: color .3s; }
.shade[aria-checked="true"] .shade-num, .shade:hover .shade-num { color: var(--ink); }
.shade-name { overflow: hidden; color: var(--dim); font-size: clamp(10px, 1.05vw, 14px); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Photo slots (replace the figure contents with <img>) ---------- */
.photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 1.6vw, 22px); }
.photo-slot { position: relative; display: grid; place-items: center; margin: 0; border: 1px dashed rgba(255, 255, 255, .13); border-radius: 4px; background: #0f0f11; overflow: hidden; }
.photo-slot--wide { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
.photo-slot--tall { aspect-ratio: 4 / 5; }
.photo-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-slot-label { color: var(--faint); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; }
@media (max-width: 600px) { .photo-slot--wide { aspect-ratio: 16 / 10; } }

/* ---------- Specs ---------- */
.spec-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px) clamp(16px, 3vw, 48px); margin: 0; }
.spec { padding-top: clamp(14px, 1.6vw, 22px); border-top: 1px solid var(--hair); }
.spec dt { font-family: Archivo, 'Arial Black', Arial, sans-serif; font-size: clamp(44px, 7vw, 112px); font-weight: 900; font-style: italic; letter-spacing: -.07em; line-height: .9; padding-right: .08em; }
.spec dd { margin: clamp(8px, 1vw, 14px) 0 0; color: var(--dim); font-size: clamp(10px, .9vw, 12px); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
@media (max-width: 700px) { .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Coverage ---------- */
.coverage-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hair); }
.coverage-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: clamp(14px, 1.8vw, 26px) 0; border-bottom: 1px solid var(--hair); font-family: Archivo, 'Arial Black', Arial, sans-serif; font-size: clamp(22px, 3.6vw, 56px); font-weight: 900; font-style: italic; letter-spacing: -.055em; line-height: 1; text-transform: uppercase; word-spacing: .14em; }
.coverage-list li > span:first-child { padding-right: .08em; transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
@media (hover: hover) { .coverage-list li:hover > span:first-child { transform: translateX(8px); } }
.cov-price { color: var(--dim); font-size: clamp(12px, 1vw, 14px); font-style: normal; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }

/* ---------- Contact: the window rolls down and the page goes white ---------- */
.tints-contact { --paper: #fff; --ink: #191919; background: #fff; color: #191919; }
.tints-page .tints-contact .display-title { color: #191919; }
.window-pane { position: absolute; inset: 0; z-index: 8; pointer-events: none; background: linear-gradient(115deg, transparent 22%, rgba(255, 255, 255, .07) 30%, transparent 38%, transparent 64%, rgba(255, 255, 255, .05) 70%, transparent 76%), linear-gradient(180deg, #0a0a0b 0%, #17181b 100%); transition: transform 1.4s cubic-bezier(.65, 0, .35, 1) .1s; }
.window-pane::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25), transparent); }
.window-down .window-pane { transform: translateY(101%); }
.tints-footer { background: #fff; color: #71717a; }

@media (prefers-reduced-motion: reduce) { .window-pane { display: none; } }

/* Short screens (phones held sideways): less vertical padding in the hero. */
@media (max-height: 520px) { .tints-hero { padding-top: 72px; padding-bottom: 64px; } }