/* ==========================================================================
   dtcrompton.com — GLOBAL stylesheet.
   One design system. Every rule is a shared component reused across pages.
   No page-specific selectors. Grounds: body[data-ground="paper"|"gallery"].
   ========================================================================== */
:root{
  --paper:#F4F1EC; --ink:#14171C; --gallery:#0F1219; --panel:#161B23;
  --coral:#E8A899; --coral-ink:#B25846; --sage:#7FAD87; --amber:#C47A35;
  --muted-l:#615D55; --muted-d:#9AA1AC; --muted-d3:#838B97;
  --line-l:rgba(20,23,28,.13); --line-d:rgba(244,241,236,.14);
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
body[data-ground="gallery"]{background:var(--gallery);color:#E9EBEE;--fg:#F5F6F7;--fg2:#B4BAC2;--mut:var(--muted-d);--mut2:var(--muted-d3);--line:var(--line-d);--hdr:rgba(13,16,22,.72);--k:var(--coral)}
body[data-ground="paper"]{background:var(--paper);color:var(--ink);--fg:var(--ink);--fg2:#3A3E45;--mut:var(--muted-l);--mut2:#8A9098;--line:var(--line-l);--hdr:rgba(244,241,236,.85);--k:var(--coral-ink)}

/* ---------- TYPOGRAPHY ---------- */
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin:0 0 18px}
.eyebrow .k{color:var(--k)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;margin:0;color:var(--fg)}
.title{font-size:clamp(38px,5vw,66px);line-height:1.03}
.title-lg{font-size:clamp(44px,6.4vw,80px);line-height:1}
.accent{width:99px;height:3px;background:linear-gradient(90deg,var(--amber),var(--sage));margin:20px 0 24px;border-radius:2px}
.standfirst,.lead{font-size:16px;line-height:1.66;color:var(--fg2);max-width:52ch}
.src{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--mut2);margin-top:26px}
.method-meta{font-size:13.5px;line-height:1.9;color:var(--fg2);margin:22px 0 0}
.method-meta .k{color:var(--k);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.learn,.inline-link{display:inline-block;font-size:13.5px;color:var(--k);border-bottom:1px solid color-mix(in srgb,var(--k) 45%,transparent)}
.learn{margin-top:22px}

/* ---------- LAYOUT HELPERS ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px}
.doc{max-width:760px;margin:0 auto;padding:0 40px}
.page{padding:64px 0 96px}
@media(max-width:640px){.wrap,.doc{padding:0 20px}.page{padding:56px 0 72px}}

/* ---------- HEADER ---------- */
.site-hdr{position:sticky;top:0;z-index:40;display:flex;justify-content:space-between;align-items:center;padding:16px 40px;background:var(--hdr);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-hdr .mark{font-family:var(--serif);font-size:21px;color:var(--fg)}
.site-hdr nav{display:flex;gap:28px}
.site-hdr nav a{font-size:14px;color:var(--fg2)}
.site-hdr nav a:hover{color:var(--k)}
@media(max-width:640px){.site-hdr{padding:13px 20px;flex-wrap:wrap;gap:5px 16px}.site-hdr nav{gap:16px;width:100%}.site-hdr nav a{font-size:13px}.site-hdr .mark{font-size:19px}}

/* ---------- FOOTER ---------- */
.site-foot{background:#0A0C10;color:#9AA1AC;padding:64px 40px 40px;border-top:1px solid rgba(244,241,236,.14);font-family:var(--sans)}
.sf-top{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:44px}
.sf-mark{font-family:var(--serif);font-size:20px;color:#E7E9EC}
.sf-blurb{max-width:34ch;font-size:13.5px;line-height:1.6;margin:.6em 0 0;color:#9AA1AC}
.site-foot h5{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#838B97;margin:0 0 14px;font-weight:500}
.site-foot a{color:#C0C5CC;font-size:14px}.site-foot a:hover{color:var(--coral)}
.sf-col a{display:block;margin:8px 0}
.sf-socials a{display:inline-block;margin:0 0 8px}
.sf-socials a:not(:last-child)::after,.sf-links a:not(:last-child)::after{content:'·';margin:0 9px;color:#4A515B}
.sf-legal{max-width:var(--maxw);margin:44px auto 0;border-top:1px solid rgba(244,241,236,.14);padding-top:20px;font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:#838B97;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.sf-links{display:flex;flex-wrap:wrap}.sf-links a{color:#838B97;font-size:11px}.sf-links a:hover{color:var(--coral)}
@media(max-width:760px){.sf-top{grid-template-columns:1fr;gap:34px}.sf-legal{flex-direction:column;align-items:flex-start;gap:14px}}

/* ---------- HERO + TRACE (home) ---------- */
.hero{background:var(--gallery);color:#EEF0F3}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;grid-template-areas:"head trace" "body trace";align-items:center;gap:6px 40px;max-width:var(--maxw);margin:0 auto;padding:56px 40px 72px}
.hero-head{grid-area:head}.hero-body{grid-area:body}
.hero h1{font-size:clamp(38px,5vw,66px);line-height:1.03;color:#F5F6F7;max-width:14ch;margin:8px 0 0}
.hero .lead{color:#B4BAC2;margin:22px 0 0;max-width:46ch}
.trace-wrap{grid-area:trace;position:relative;aspect-ratio:1/1;width:100%;max-width:480px;justify-self:center}
.trace{width:100%;height:100%;overflow:visible}
.trace-line{fill:none;stroke:var(--coral);stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:0 3}
@media(max-width:820px){.hero-grid{grid-template-columns:1fr;grid-template-areas:"head" "trace" "body";gap:16px;padding:40px 20px 36px}.trace-wrap{max-width:320px}}

/* ---------- CARD GRID (home selected work) ---------- */
.card-section{background:var(--paper);padding:96px 0 106px}
.card-head{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line-l);padding-top:22px;margin-bottom:26px}
.card-head .eyebrow{margin:0;color:var(--muted-l)}
.card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:48px}
.card{border-radius:2px;overflow:hidden;background:var(--gallery);color:#E7E9EC;display:flex;flex-direction:column;position:relative;border:1px solid var(--line-d)}
.card:hover{border-color:var(--coral)}
.card .frame{aspect-ratio:1/1;overflow:hidden;background:var(--gallery);position:relative}
.card .frame img,.card .frame canvas,.card .frame iframe{width:100%;height:100%;object-fit:cover;border:0;display:block}
.card .frame iframe{pointer-events:none}
.card .meta{display:block;justify-content:space-between;align-items:baseline;padding:15px 18px;gap:12px}
.card .meta h4{font-size:20px;color:#F1F3F5}
.card .meta span{font-family:var(--mono);font-size:11px;color:var(--muted-d);white-space:nowrap}
.card .meta .eyebrow{color:var(--k); margin:0 0 6px;}
.badge{position:absolute;top:14px;left:14px;z-index:40;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;background:var(--amber);color:#1a1206;padding:6px 10px}
@media(max-width:640px){.card-section{padding:64px 0 72px}.card-grid{grid-template-columns:1fr;gap:18px}}

/* ---------- COLLECTION INTRO (O + unfolding) ---------- */
.intro{max-width:var(--maxw);margin:0 auto;padding:64px 40px 0;display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"head feat" "body feat";gap:8px 56px;align-items:center}
.intro-head{grid-area:head}
.intro-feat{grid-area:feat;position: relative}
.intro-body{grid-area:body}
.intro-head h1{font-size:clamp(46px,7vw,86px);line-height:.98}
@media(max-width:820px){.intro{grid-template-columns:1fr;grid-template-areas:"head" "feat" "body";gap:22px;padding:48px 20px 0}
  .intro-head{grid-area:head}.intro-body{grid-area:body}}

/* ---------- FEATURED PIECE ---------- */
.featured{position:relative;aspect-ratio:1/1;border:1px solid var(--line);border-radius:2px;overflow:hidden;background:#0b0e13}
.featured img,.featured canvas,.featured iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;display:block}
.featured .regen{position:absolute;bottom:12px;right:12px;z-index:3;font-family:var(--sans);font-size:12px;background:rgba(12,15,21,.82);border:1px solid var(--line-d);color:#E7E9EC;border-radius:2px;padding:8px 13px;cursor:pointer;backdrop-filter:blur(6px)}
.featured .regen:hover{border-color:var(--coral);color:var(--coral)}
.heroinfo{display:flex;flex-direction:column;gap:6px;align-items:flex-start;margin-top:16px;border-top:1px solid var(--line-d);padding-top:14px}
.h-num{font-family:var(--serif);font-size:21px;color:#F2F3F5}
.h-attr{font-family:var(--mono);font-size:11.5px;color:var(--sage);letter-spacing:.03em}
.feat-frame{width:100%;aspect-ratio:1/1;overflow:hidden;cursor:pointer}
.feat-frame iframe{width:100%;height:100%;border:0;display:block;pointer-events:none}
.livecap{font-family:var(--mono);font-size:10.5px;color:var(--muted-d3);letter-spacing:.04em;margin-top:11px}.livecap .k{color:var(--sage)}

/* ---------- PIECE GRID + TILE (selected + galleries) ---------- */
.grid-head{max-width:1320px;margin:0px auto 0;padding:64px 40px 0;display:flex;justify-content:space-between;align-items:baseline;border-top:0 solid var(--line)}
.grid-head .eyebrow{margin:0}
.piece-grid{max-width:1320px;margin:26px auto 0;padding:0 40px 40px;display:grid;grid-template-columns:repeat(3,1fr);gap:40px 30px}
.piece-grid.wide{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.tile{margin:0;display:block;cursor:pointer}
.tile.hide{display:none}
.tile .frame{background:var(--gallery);border:1px solid var(--line);border-radius:2px;overflow:hidden;aspect-ratio:1/1;position:relative;transition:border-color .2s}
.tile:hover .frame{border-color:var(--coral)}
.tile .frame img,.tile .frame canvas{width:100%;height:100%;object-fit:cover;border:0;display:block}
.tile figcaption{font-family:var(--mono);font-size:11.5px;color:var(--mut);margin-top:12px}
.cap-id{color:var(--coral)}.cap-dot{margin:0 7px;color:#4E555F}.cap-rings{color:var(--fg2)}
@media(max-width:640px){.grid-head,.piece-grid{padding-left:20px;padding-right:20px}.piece-grid{grid-template-columns:1fr;gap:30px}}

/* ---------- FILTERS (galleries) ---------- */
.filters{max-width:1320px;margin:22px auto 0;padding:0 40px;display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.filters label{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut2);display:flex;gap:8px;align-items:center}
.filters select{font-family:var(--sans);font-size:13px;background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:2px;padding:7px 10px}
.filters select option:disabled{color:#4a515b}
.filters .cnt{font-family:var(--mono);font-size:11px;color:var(--mut2);margin-left:auto}
@media(max-width:640px){.filters{padding-left:20px;padding-right:20px}}

/* ---------- PIECE MODAL (shared pop-up) ---------- */
.modal{position:fixed;inset:0;z-index:60;background:rgba(6,8,11,.9);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:26px}
.modal.on{display:flex}
.modal-card{width:min(1080px,100%);max-height:92vh;overflow:auto;background:#0c0f15;border:1px solid var(--line-d);border-radius:4px;display:grid;grid-template-columns:1.12fr .88fr;color:#E9EBEE}
.modal-img{position:relative;aspect-ratio:1/1;width:100%;background:#000;border-right:1px solid var(--line-d)}
.modal-img img,.modal-img canvas,.modal-img iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border:0;display:block}
.modal-img iframe{width:100%;height:100%;border:0;display:block}
.modal-info{padding:24px 38px 38px;display:flex;flex-direction:column}
.modal-info .eyebrow{color:var(--muted-d)}
.modal-info h2{font-size:clamp(30px,3.6vw,46px);color:#F5F6F7}
.modal-info .attr{font-family:var(--mono);font-size:12px;color:var(--sage);letter-spacing:.03em;margin:0}
.modal-info .note{font-size:15.5px;line-height:1.64;color:#B4BAC2;margin:22px 0 0;max-width:46ch}
.modal-info .prints{margin-top:26px;border-top:1px solid var(--line-d);padding-top:16px}
.modal-info .prints h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-d);margin:0 0 7px}
.modal-info .prints p{font-size:14px;color:var(--muted-d);line-height:1.6;margin:0;max-width:44ch}
.modal-info .prints a{color:var(--coral);border-bottom:1px solid rgba(232,168,153,.45)}
.modal-info .btns{display:flex;gap:12px;margin-top:auto;padding-top:26px}
.btn{font-family:var(--sans);font-size:13px;border:1px solid var(--line-d);background:rgba(15,18,25,.5);color:#E7E9EC;border-radius:2px;padding:10px 17px;cursor:pointer}
.btn:hover{border-color:var(--coral);color:var(--coral)}
.btn.pri{background:var(--coral);color:#1a1210;border-color:var(--coral)}
#mnum{margin:0}
@media(max-width:760px){.modal-card{grid-template-columns:1fr}.modal-img{border-right:0;border-bottom:1px solid var(--line-d)}}

/* ---------- PROSE / DOC (legal, method, info) ---------- */
.doc h1{font-size:clamp(32px,4.4vw,48px)}
.doc .upd{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--mut);margin:14px 0 30px}
.prose{max-width:64ch}
.prose h3{font-size:20px;color:var(--fg);margin:38px 0 10px}
.prose p{font-size:16px;line-height:1.72;color:var(--fg2);margin:0 0 14px}
.prose a{color:var(--k);border-bottom:1px solid var(--line)}
.prose strong{color:var(--fg);font-weight:500}

/* ---------- ABOUT (portrait + statement) ---------- */
.split{max-width:var(--maxw);margin:0 auto;padding:0 40px;display:grid;grid-template-columns:1.5fr 1fr;gap:64px;align-items:start}
.split .aside{order:2}
.portrait{aspect-ratio:4/5;overflow:hidden;border:1px solid var(--line);border-radius:3px}
.portrait img{width:100%;height:100%;object-fit:cover}
.aside-links{margin-top:22px;display:flex;flex-direction:column;gap:10px}
.aside-links a{font-size:14px;color:var(--k)}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:32px}.split .aside{order:-1}.portrait{max-width:280px}}

/* ---------- FORM (contact) ---------- */
.form-grid{max-width:var(--maxw);margin:0 auto;padding:0 40px;display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:start}
.field{margin:0 0 18px;display:flex;flex-direction:column;gap:7px;max-width:100%}
.field label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.field input,.field select,.field textarea{width:100%;max-width:100%;font-family:var(--sans);font-size:15px;color:var(--fg);background:transparent;border:1px solid var(--line);border-radius:3px;padding:11px 13px}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--coral-ink)}
.form-status{font-size:14px;margin-top:12px;min-height:1.2em}
.form-status.ok{color:var(--sage)}.form-status.err{color:#c9645a}
.info-block{margin:0 0 26px}
.info-block h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin:0 0 8px}
.info-block p{margin:0;font-size:15px;color:var(--fg2)}.info-block a{color:var(--k)}
.socials-line a:not(:last-child)::after{content:'·';margin:0 8px;color:var(--mut2)}
@media(max-width:820px){.form-grid{grid-template-columns:1fr;gap:36px}}

/* ---------- LAYER DEMO (method pages) ---------- */
.layers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:26px 0 8px}
.layer{border:1px solid var(--line);border-radius:2px;overflow:hidden;background:#0b0e13}
.layer canvas{width:100%;aspect-ratio:1/1;display:block}
.layer-cap{display:flex;justify-content:space-between;align-items:center;padding:11px 13px;gap:10px}
.layer-cap h5{font-family:var(--serif);font-weight:400;font-size:15px;margin:0;color:var(--fg)}
.layer-cap button{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;background:transparent;border:1px solid var(--line);color:var(--mut);border-radius:2px;padding:6px 9px;cursor:pointer}
.layer-cap button:hover{border-color:var(--coral);color:var(--coral)}
@media(max-width:640px){.layers{grid-template-columns:1fr;gap:16px}}

/* ---------- CTA / BUTTONS ---------- */
.cta{max-width:var(--maxw);margin:8px auto 0;padding:0 0 96px}
.cta a,.ghost{display:inline-block;font-family:var(--sans);font-size:14px;border:1px solid var(--line);border-radius:3px;padding:12px 22px;color:var(--fg)}
.cta a:hover,.ghost:hover{border-color:var(--coral);color:var(--coral)}
@media(max-width:640px){.cta{padding-left:20px;padding-right:20px}}

/* ---------- 404 ---------- */
.big404{min-height:62vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:64px 0 96px}
.big404 .code{font-family:var(--mono);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--coral-ink);margin:0}
.big404 h1{font-size:clamp(48px,9vw,96px);color:var(--fg);margin:0}
.big404 p{color:var(--fg2);max-width:42ch;margin:0 0 26px}

/* ---------- MEDIA HERO + TWO-COL (reused: inscendence, 24 birds) ---------- */
.media-hero{position:relative;width:100%;max-width:var(--maxw);margin:0 auto;padding:56px 40px 0}
.media-hero canvas{width:100%;height:clamp(240px,42vh,420px);display:block;border:1px solid var(--line);border-radius:3px;background:#07090d}
.two-col{max-width:var(--maxw);margin:34px auto 0;padding:0 40px;display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:start}
.embed iframe{width:100%;border:0;border-radius:3px}
.teaser{max-width:var(--maxw);margin:0 auto;padding:64px 40px 0;display:grid;grid-template-columns:1.1fr .9fr;grid-template-areas:"head tile" "body tile";gap:8px 52px;align-items:center}
.teaser-head{grid-area:head}.teaser-body{grid-area:body}.teaser-tile{grid-area:tile;position:relative;aspect-ratio:1/1;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:#0b0e13}
.teaser-tile img,.teaser-tile canvas{width:100%;height:100%;object-fit:cover;display:block}
.teaser-head h1{font-size:clamp(46px,7vw,86px);line-height:.98}
@media(max-width:820px){.teaser{grid-template-columns:1fr;grid-template-areas:"head" "tile" "body";gap:20px;padding:48px 20px 0}.two-col,.media-hero{padding-left:20px;padding-right:20px}.two-col{grid-template-columns:1fr;gap:28px}}