/* TRINX / single-screen editorial study. Local font rights unverified for publication. */
@font-face { font-family:"TRINX EB Garamond"; src:url("fonts/EBGaramond.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
h1,h2 { font-family:"TRINX EB Garamond",Georgia,serif !important; font-weight:400 !important; }
.landing { min-height:100svh; height:100svh; display:grid; grid-template-rows:auto minmax(0,1fr) auto; background:#F7F5EF; color:#171714; }
.landing-header { display:flex; justify-content:space-between; align-items:center; padding:20px 5vw; gap:24px; }
.landing-brand { font-family:"TRINX EB Garamond",Georgia,serif; font-size:40px; line-height:.85; text-decoration:none; }
.landing-brand span { display:block; font:12px/1.5 "Helvetica Neue",Arial,sans-serif; letter-spacing:.16em; margin-top:6px; }
.landing-main { display:grid; grid-template-rows:minmax(70px,1fr) auto; gap:24px; padding:0 5vw; min-height:0; }
.landing-photo { min-height:0; background:#DDDCD3; display:flex; align-items:center; justify-content:center; }
.landing-photo span { font:12px/1.5 "Helvetica Neue",Arial,sans-serif; color:#4E5149; }
.landing-copy { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-bottom:8px; }
.landing-copy h1 { font-size:clamp(38px,5.5vw,82px); line-height:.95; letter-spacing:-.025em; }
.landing .button { background:#171714; border-color:#171714; color:#F7F5EF; flex-shrink:0; }
.landing-footer { display:flex; justify-content:space-between; padding:14px 5vw; gap:16px; font:11px/1.5 "Helvetica Neue",Arial,sans-serif; color:#53615A; }
@media(max-width:700px) { .landing-header { display:block; padding:16px 20px 8px; } .landing-header nav { margin-top:12px; } .landing-main { padding:0 20px; gap:20px; } .landing-copy { display:block; } .landing-copy h1 { font-size:clamp(38px,10vw,52px); } .landing-copy .button { margin-top:18px; } .landing-footer { padding:12px 20px; font-size:10px; } .landing-footer span:last-child { max-width:130px; text-align:right; } }
@media(max-height:500px) and (min-width:600px) { .landing-header { padding-block:8px; } .landing-brand { font-size:30px; } .landing-main { grid-template-columns:1fr 1fr; grid-template-rows:1fr; gap:32px; } .landing-copy { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; } .landing-copy h1 { font-size:38px; } }
/* Allow natural scrolling for unusually short screens / text enlargement; never clip content. */
@media(max-height:560px) and (max-width:599px) { .landing { height:auto; } .landing-photo { min-height:80px; } }
:root { --paper:#F5F4EF; --ink:#18211F; --sea:#305C53; --muted:#53615A; --line:#C6CCC7; --photo:#E0E3DC; --photo-deep:#D3DAD2; --error:#8A3228; }
* { box-sizing:border-box; }
html { background:var(--paper); color:var(--ink); }
body { margin:0; font-family:"Helvetica Neue",Arial,sans-serif; font-size:18px; line-height:1.6; -webkit-font-smoothing:antialiased; }
[hidden] { display:none !important; }
a { color:inherit; text-underline-offset:5px; transition:color 150ms,background-color 150ms,border-color 150ms; }
a:hover { color:var(--sea); }
button, input, select, textarea { font:inherit; }
button, a, summary, input, textarea, select { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid var(--sea); outline-offset:5px; }
.wrap { width:calc(100% - 128px); max-width:1200px; margin-inline:auto; }
.section { margin-block:96px; }
h1,h2,p,figure { margin:0; }
h1,h2 { font-weight:500; letter-spacing:-.045em; line-height:1.06; text-wrap:balance; }
h1 { font-size:72px; }
h2 { font-size:44px; }
p { text-wrap:pretty; }
p + p { margin-top:20px; }
.eyebrow { font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:.12em; line-height:1.4; margin-bottom:24px; }
.muted { color:var(--muted); }
.study-label { background:var(--ink); color:var(--paper); padding:9px 20px; text-align:center; font-size:12px; letter-spacing:.04em; }
.site-header { display:flex; justify-content:space-between; align-items:center; min-height:116px; gap:32px; }
.brand { display:flex; flex-direction:column; text-decoration:none; line-height:1; padding-block:12px; }
.wordmark { font-size:36px; letter-spacing:.015em; font-weight:600; }
.brand-note { font-size:10px; letter-spacing:.035em; color:var(--muted); margin-top:9px; }
nav { display:flex; gap:36px; align-items:center; }
nav a { display:flex; align-items:center; min-height:48px; font-size:15px; text-decoration:none; position:relative; }
nav a[aria-current="page"] { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:9px; }
.skip-link { position:absolute; left:20px; top:8px; padding:12px 18px; background:var(--paper); z-index:10; transform:translateY(-180%); }
.skip-link:focus { transform:translateY(0); }
.media-placeholder { background:var(--photo); position:relative; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px; overflow:hidden; color:var(--muted); }
.media-label { position:absolute; top:22px; left:24px; font-size:10px; line-height:1.4; text-transform:uppercase; letter-spacing:.14em; }
.media-direction { text-align:center; padding:28px; font-size:23px; font-weight:400; letter-spacing:-.02em; }
.media-direction small { display:block; font-size:12px; font-weight:400; letter-spacing:0; margin-top:8px; }
.media-format { position:absolute; left:24px; bottom:20px; font-size:11px; letter-spacing:.04em; }
.hero-media { width:100%; height:clamp(300px,37vw,550px); background:var(--photo-deep); }
.hero-media .media-direction { font-size:32px; }
.hero-copy { display:flex; align-items:flex-end; justify-content:space-between; gap:36px; padding-top:42px; }
.hero-copy .eyebrow { margin-bottom:20px; }
.hero-copy .button { margin-bottom:4px; flex-shrink:0; }
.button { display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--sea); background:var(--sea); color:var(--paper); border-radius:2px; min-height:48px; padding:13px 25px; font-size:16px; font-weight:500; line-height:1.4; text-decoration:none; cursor:pointer; transition:color 150ms,background-color 150ms,border-color 150ms; }
.button:hover { background:var(--ink); border-color:var(--ink); color:var(--paper); }
.button:disabled { cursor:not-allowed; opacity:.55; }
.section-intro { display:grid; grid-template-columns:1fr 1fr; gap:60px; padding-top:30px; border-top:1px solid var(--line); margin-bottom:40px; }
.section-intro h2 { max-width:400px; }
.section-intro p { font-size:16px; max-width:440px; }
.craft-grid { display:grid; grid-template-columns:1.65fr 1fr; grid-template-rows:auto auto; gap:36px 40px; align-items:start; }
.board-shot { grid-row:1 / 3; }
.board-shot .media-placeholder { aspect-ratio:3/2; }
.shaping-shot .media-placeholder, .detail-shot .media-placeholder { aspect-ratio:3/2; }
.shaping-shot { margin-top:76px; }
.detail-shot .media-placeholder { background:var(--photo-deep); }
figcaption { font-size:12px; color:var(--muted); margin-top:12px; }
.meet-section { display:grid; grid-template-columns:1fr 1.65fr; gap:64px; border-top:1px solid var(--line); padding-top:40px; }
.meet-section p:not(.eyebrow) { max-width:600px; margin-top:24px; color:var(--muted); }
.text-link { display:inline-flex; min-height:48px; align-items:center; gap:26px; margin-top:24px; font-size:16px; font-weight:500; }
.text-link span { font-size:20px; }
.closing { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; padding-top:48px; border-top:1px solid var(--line); }
.closing h2 { font-size:60px; }
.site-footer { display:flex; justify-content:space-between; align-items:center; gap:24px; border-top:1px solid var(--line); padding-block:32px; font-size:12px; }
.footer-note, .site-footer > span:last-child { color:var(--muted); }
.portrait-section { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:80px; margin-top:48px; }
.portrait .media-placeholder { aspect-ratio:4/5; }
.portrait-copy h1 { margin-bottom:36px; }
.portrait-copy p:not(.eyebrow) { color:var(--muted); }
.order-layout { display:grid; grid-template-columns:minmax(0, .8fr) minmax(0,1.4fr); gap:90px; margin-top:48px; }
.order-intro h1 { font-size:52px; margin-bottom:28px; }
.order-intro .intro-note { font-size:16px; color:var(--muted); }
.prototype-note { border-top:1px solid var(--line); padding-top:24px; margin-top:40px; color:var(--muted); font-size:13px; line-height:1.6; }
.prototype-note .eyebrow { margin-bottom:12px; }
.form-note { font-size:13px; color:var(--muted); border-top:1px solid var(--line); padding-top:22px; margin-bottom:28px; }
fieldset { margin:0 0 36px; padding:0 0 36px; border:0; border-bottom:1px solid var(--line); min-width:0; }
legend { font-size:25px; font-weight:500; letter-spacing:-.03em; padding:0; margin-bottom:22px; }
.fieldset-note { font-size:14px; color:var(--muted); margin:-8px 0 24px; }
.field-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px 20px; }
.field { min-width:0; }
.full { grid-column:1 / -1; }
label { display:block; font-size:14px; font-weight:500; margin-bottom:8px; }
label span { color:var(--muted); font-weight:400; }
input, select, textarea { display:block; border:1px solid var(--line); background:transparent; color:var(--ink); border-radius:2px; width:100%; min-width:0; min-height:48px; padding:12px; font-size:16px; line-height:1.5; }
select { height:50px; padding-right:28px; }
textarea { resize:vertical; }
input::placeholder, textarea::placeholder { color:var(--muted); opacity:1; }
input:focus, textarea:focus, select:focus { outline:2px solid var(--sea); outline-offset:2px; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color:var(--error); }
input[type="file"] { font-size:13px; padding:10px; }
input::file-selector-button { font:inherit; color:var(--ink); border:1px solid var(--line); border-radius:2px; padding:8px 12px; margin-right:12px; background:var(--paper); cursor:pointer; }
.measure-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:8px; font-size:14px; }
.measure-heading select { width:116px; }
.unit-row { display:flex; gap:10px; }
.unit-row select { width:84px; flex-shrink:0; }
.field-help, .privacy-note { font-size:12px; color:var(--muted); line-height:1.6; margin-top:10px; }
.field-error { font-size:13px; color:var(--error); margin-top:8px; }
.preferences { border-top:1px solid var(--line); margin-top:28px; }
summary { min-height:48px; padding-block:18px; font-size:15px; cursor:pointer; font-weight:500; }
summary::marker { color:var(--sea); }
.disclosure-body { padding:18px 0 4px; }
.privacy-note { margin-block:28px; }
.prototype-status { border-block:1px solid var(--line); padding:20px 0; margin-top:24px; font-size:16px; color:var(--sea); }
.state-specifications { margin-top:48px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; }
.state-specifications summary { font-size:13px; }
.state-specifications dt { color:var(--ink); font-weight:500; margin-top:20px; }
.state-specifications dd { margin:6px 0 0; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:1000px) { h1 { font-size:60px; } .order-layout { gap:48px; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); } .order-intro h1 { font-size:44px; } .portrait-section { gap:48px; } .hero-copy { align-items:flex-start; flex-direction:column; } }
@media (max-width:700px) {
 .wrap { width:calc(100% - 40px); }
 .section { margin-block:56px; }
 h1 { font-size:42px; } h2 { font-size:34px; }
 .study-label { font-size:10px; padding:9px 12px; }
 .site-header { display:block; min-height:0; padding-top:16px; }
 .brand { width:fit-content; padding-block:4px 15px; }
 .wordmark { font-size:32px; } .brand-note { font-size:9px; }
 nav { justify-content:space-between; gap:16px; border-top:1px solid var(--line); padding-block:5px; }
 nav a { font-size:14px; min-height:48px; }
 .hero-media { height:310px; }
 .hero-media .media-direction { font-size:26px; }
 .media-label { top:16px; left:16px; font-size:9px; }
 .media-format { left:16px; bottom:16px; font-size:10px; }
 .media-direction { font-size:20px; padding:28px 16px; }
 .media-direction small { font-size:11px; }
 .hero-copy { padding-top:28px; gap:26px; }
 .hero-copy .eyebrow { font-size:11px; margin-bottom:16px; }
 .desktop-break { display:none; }
 .section-intro { display:block; padding-top:24px; margin-bottom:28px; }
 .section-intro p { margin-top:20px; }
 .craft-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px 16px; }
 .board-shot { grid-row:auto; grid-column:1 / -1; }
 .shaping-shot { margin-top:0; }
 .shaping-shot .media-placeholder, .detail-shot .media-placeholder { aspect-ratio:4/5; }
 .shaping-shot .media-direction, .detail-shot .media-direction { font-size:16px; }
 .shaping-shot .media-label, .detail-shot .media-label { font-size:8px; left:12px; right:12px; }
 figcaption { font-size:11px; }
 .meet-section { display:block; padding-top:28px; }
 .meet-section .eyebrow { margin-bottom:28px; }
 .closing { display:block; padding-top:32px; }
 .closing h2 { font-size:42px; } .closing .button { margin-top:28px; }
 .site-footer { display:block; padding-block:24px; }
 .site-footer > span { display:block; } .site-footer > span + span { margin-top:8px; }
 .portrait-section { display:block; margin-top:28px; }
 .portrait-copy { margin-top:40px; }
 .portrait-copy h1 { margin-bottom:24px; }
 .order-layout { display:block; margin-top:32px; }
 .order-intro h1 { font-size:42px; margin-bottom:20px; }
 .order-intro .eyebrow { margin-bottom:16px; }
 .order-intro .prototype-note { margin-top:24px; padding-top:18px; }
 .order-form-column { margin-top:32px; }
 .field-grid { grid-template-columns:1fr; gap:20px 14px; }
 #height-imperial-group { grid-template-columns:1fr 1fr; }
 .order-intro .prototype-note { display:none; }
 label { font-size:13px; }
 .preferences .field-grid { grid-template-columns:1fr; }
 .form-note { padding-top:18px; }
}
@media (max-width:380px) { .field-grid { grid-template-columns:1fr; } .craft-grid { gap:20px 12px; } .media-direction { font-size:18px; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { transition:none !important; } }