/* ============================================================
   TheRaccoonteurs — shared INTERIOR-page styles
   Used by nre.html, artist pages, and the Marriott collection.
   Same design tokens as the homepage (ink / gold / Georgia).
   ============================================================ */
:root{
  --ink:#0e0e10;
  --paper:#f7f5f0;
  --cream:#efece4;
  --gold:#c9a45c;
  --gold-dim:#a8854a;
  --line:#dcd8cf;
  --dark-line:#2a2a2e;
  --on-dark:#c2bfb7;
  --on-dark-soft:#9a978f;
  --on-dark-mute:#8f8c84;
  --maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:Georgia,'Times New Roman',serif;
  background:var(--ink);color:var(--paper);
  line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit}
.sans{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* film grain overlay */
.grain{
  position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* accessibility */
.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}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gold);color:var(--ink);font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:12px 18px;text-decoration:none}
.skip:focus{left:12px;top:12px}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:1px}

/* ============ interior top bar ============ */
.ibar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(14,14,16,.85);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(201,164,92,.25);
  transition:background .3s ease,box-shadow .3s ease;
}
.ibar.scrolled{background:rgba(14,14,16,.96);box-shadow:0 6px 24px rgba(0,0,0,.35)}
.ibar-inner{max-width:var(--maxw);margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.ilogo{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.ilogo-mark{width:32px;height:32px;border-radius:50%;object-fit:cover;border:1px solid rgba(201,164,92,.55);background:#0e0e10;flex:none}
.ilogo-words{display:flex;flex-direction:column;line-height:1.1}
.ilogo .name{font-family:Georgia,serif;font-size:18px;color:var(--paper);letter-spacing:.02em}
.ilogo .by{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:8.5px;letter-spacing:.06em;color:var(--gold)}
.ilogo .by .fam{letter-spacing:.34em;text-transform:uppercase}
.ibar-right{display:flex;align-items:center;gap:22px}
.iback{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#cfccc4;text-decoration:none;transition:color .2s}
.iback:hover{color:var(--gold)}
@media(max-width:620px){.iback{display:none}}
.lang-toggle{display:flex;align-items:center;gap:7px;flex:none}
.lang-btn{background:none;border:0;cursor:pointer;padding:4px 3px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:11px;letter-spacing:.14em;color:var(--on-dark-soft);transition:color .2s}
.lang-btn:hover{color:var(--gold)}
.lang-btn.on{color:var(--gold)}
.lang-sep{color:#54514a;font-size:11px}

/* shared buttons */
.btn{display:inline-block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:12px;letter-spacing:.18em;text-transform:uppercase;padding:14px 28px;border:1px solid var(--gold);color:var(--gold);text-decoration:none;transition:all .25s ease;background:transparent;cursor:pointer}
.btn:hover{background:var(--gold);color:var(--ink)}
.btn.solid{background:var(--gold);color:var(--ink)}
.btn.solid:hover{background:transparent;color:var(--gold)}

.kicker{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}

/* ============ DOC (declaration / NRE) ============ */
.doc-main{padding-top:64px}
.doc{max-width:720px;margin:0 auto;padding:88px 24px 110px;text-align:left}
.doc .eyebrow{text-align:center;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.doc-title{font-family:Georgia,serif;font-weight:400;font-size:clamp(40px,7vw,68px);line-height:1.02;letter-spacing:-.01em;text-align:center;margin-bottom:12px}
.doc-title em{font-style:italic;color:var(--gold)}
.doc-sub{text-align:center;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:11px;letter-spacing:.35em;text-transform:uppercase;color:var(--on-dark-soft);margin-bottom:52px}
.doc-seal{width:180px;height:auto;border-radius:10px;margin:0 auto 48px;display:block}
.doc p{color:var(--on-dark);font-size:17px;line-height:1.9;margin-bottom:24px}
.doc h2{font-family:Georgia,serif;font-weight:400;font-size:26px;color:var(--paper);margin:52px 0 14px;letter-spacing:.01em}
.doc h2::before{content:"";display:block;width:34px;height:1px;background:var(--gold);margin-bottom:18px}
.doc .doc-pull{font-style:italic;font-size:clamp(20px,2.4vw,25px);line-height:1.55;color:var(--paper);text-align:center;border-top:1px solid var(--dark-line);border-bottom:1px solid var(--dark-line);padding:34px 8px;margin:46px 0}
.doc-cta{text-align:center;margin-top:48px}
.backlink{display:inline-block;margin-top:8px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--on-dark-soft);text-decoration:none;transition:color .2s}
.backlink:hover{color:var(--gold)}
.doc-center{text-align:center}

/* ============ ARTIST page ============ */
.art-hero{display:grid;grid-template-columns:0.9fr 1.1fr;gap:56px;align-items:center;padding:120px 0 64px}
@media(max-width:820px){.art-hero{grid-template-columns:1fr;gap:32px;padding:104px 0 48px}}
.art-portrait{position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--dark-line)}
.art-portrait img{width:100%;height:100%;object-fit:cover}
.art-hero h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(40px,6.5vw,64px);line-height:1.04;letter-spacing:-.01em;margin:14px 0 10px}
.art-role{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--on-dark-soft)}
.art-tagline{font-style:italic;font-size:22px;color:var(--gold);margin:22px 0 0}
.art-body{max-width:760px;margin:0 auto;padding:8px 0 40px}
.art-body p{color:var(--on-dark);font-size:17px;line-height:1.9;margin-bottom:22px}
.art-links{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}

/* generic section + gallery */
.isection{padding:clamp(50px,7vw,84px) 0;border-top:1px solid var(--dark-line)}
.isection h2{font-family:Georgia,serif;font-weight:400;font-size:clamp(26px,3.4vw,38px);margin-bottom:10px}
.isection .lead{color:var(--on-dark);font-size:17px;max-width:640px;margin-bottom:8px}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
@media(max-width:820px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.gallery{grid-template-columns:1fr}}
.gallery figure{position:relative;overflow:hidden;border:1px solid var(--dark-line);background:#121215;aspect-ratio:4/5}
.gallery.wide figure{aspect-ratio:3/2}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.gallery figure:hover img{transform:scale(1.04)}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:11px;letter-spacing:.06em;color:var(--paper);background:linear-gradient(to top,rgba(0,0,0,.82),transparent);opacity:0;transition:opacity .3s}
.gallery figure:hover figcaption{opacity:1}

/* video link cards */
.vid-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:32px}
@media(max-width:820px){.vid-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.vid-grid{grid-template-columns:1fr}}
.vid-card{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;border:1px solid var(--dark-line);background:linear-gradient(135deg,#1d1d22,#26221b);text-decoration:none;color:var(--paper);overflow:hidden;transition:border-color .3s,transform .3s}
.vid-card:hover{border-color:rgba(201,164,92,.5);transform:translateY(-3px)}
.vid-card .play{width:52px;height:52px;border-radius:50%;border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:16px;padding-left:3px}
.vid-card .vlabel{position:absolute;left:0;right:0;bottom:0;padding:12px 14px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-soft);background:linear-gradient(to top,rgba(0,0,0,.72),transparent)}

/* inline video embeds */
.vid-embeds{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:24px}
@media(max-width:640px){.vid-embeds{grid-template-columns:1fr}}
.vid-embed{position:relative;aspect-ratio:16/9;border:1px solid var(--dark-line);overflow:hidden;background:#000}
.vid-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* section media images */
.sec-media{margin:18px 0;border:1px solid var(--dark-line);overflow:hidden}
.sec-media img{width:100%;height:auto;display:block}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:34px auto;max-width:560px}
.duo figure{margin:0;border:1px solid var(--dark-line);overflow:hidden;aspect-ratio:392/500}
.duo img{width:100%;height:100%;display:block;object-fit:cover}
@media(max-width:520px){.duo{gap:10px;max-width:100%}}
.doc figure.has-cap{border:0;overflow:visible}
.doc figure.has-cap>img{display:block;width:100%;height:auto;border:1px solid var(--dark-line)}
.fig-cap{margin-top:11px;text-align:center;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-soft)}
figure.duo-wrap{margin:34px auto;max-width:560px}
figure.duo-wrap .duo{margin:0}
@media(max-width:600px){.fig-cap{font-size:10px;letter-spacing:.12em;margin-top:9px}}
.sec-poster{max-width:300px;margin:18px 0;border:1px solid var(--dark-line);overflow:hidden}
.sec-poster img{width:100%;height:auto;display:block}

/* collection hero */
.coll-hero{position:relative;min-height:72vh;display:flex;align-items:flex-end;overflow:hidden}
.coll-hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.coll-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--ink) 4%,rgba(14,14,16,.25) 60%,rgba(14,14,16,.6))}
.coll-hero .wrap{position:relative;z-index:2;padding-bottom:56px;padding-top:120px}
.coll-hero h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(42px,7vw,82px);line-height:1.02;margin:14px 0 8px}
.coll-hero .sub{font-size:clamp(17px,2vw,21px);color:var(--on-dark);max-width:620px}

/* footer */
.ifoot{border-top:1px solid rgba(201,164,92,.25);padding:54px 0 40px;color:#8d8a82}
.ifoot .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.ifoot a{color:var(--on-dark-soft);text-decoration:none;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:12px;letter-spacing:.14em;transition:color .2s}
.ifoot a:hover{color:var(--gold)}
.ifoot .copy{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:12px;letter-spacing:.04em}

/* reveal */
body.reveal-ready .reveal{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s ease}
body.reveal-ready .reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  body.reveal-ready .reveal{opacity:1;transform:none}
}


/* co-production door card (matches homepage doors) */
.cop-door{display:block;position:relative;background:var(--ink);border:1px solid var(--dark-line);color:var(--paper);text-decoration:none;padding:40px 32px 46px;margin-top:44px;transition:background .3s,border-color .3s}
.cop-door:hover{background:#16161a;border-color:rgba(201,164,92,.45)}
.cop-door .num{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:18px}
.cop-door h3{font-family:Georgia,serif;font-size:23px;font-weight:400;margin:0 0 12px}
.cop-door p{font-size:15px;color:var(--on-dark-soft);line-height:1.7;margin:0;max-width:700px;text-wrap:pretty}
.cop-door .go{position:absolute;bottom:22px;right:26px;color:var(--gold);font-family:Georgia,serif;font-size:18px;opacity:0;transform:translateX(-4px);transition:opacity .3s,transform .3s}
.cop-door:hover .go,.cop-door:focus-visible .go{opacity:1;transform:none}


/* collection works grid (linked cards) */
.works-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px}
@media(max-width:820px){.works-grid{grid-template-columns:1fr;gap:30px}}
.work-card{display:block;text-decoration:none;color:inherit}
.work-card figure{margin:0;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--dark-line);background:#121215}
.work-card figure img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
.work-card:hover figure img{transform:scale(1.05)}
.work-card h3{font-family:Georgia,serif;font-weight:400;font-size:22px;margin:16px 0 4px}
.work-card .wtag{color:var(--on-dark-soft);font-size:14px;font-style:italic;line-height:1.5;margin:0}
.work-card .wview{display:inline-block;margin-top:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);transition:letter-spacing .3s}
.work-card:hover .wview{letter-spacing:.26em}


/* artwork detail hero (image left, curatorial overview right) */
.work-hero{display:grid;grid-template-columns:380px 1fr;gap:48px;align-items:start;padding:108px 0 48px}
.work-hero figure{margin:0;border:1px solid var(--dark-line);overflow:hidden;aspect-ratio:3/4}
.work-hero figure img{width:100%;height:100%;object-fit:cover;display:block}
.work-hero h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(32px,4.4vw,46px);line-height:1.05}
@media(max-width:820px){.work-hero{grid-template-columns:1fr;gap:26px;padding:96px 0 40px}.work-hero figure{max-width:380px}}


/* wide (landscape) artwork hero */
.work-hero-wide{grid-template-columns:1fr 2fr}
.work-hero-wide figure{aspect-ratio:3/2;order:2;align-self:end}
@media(max-width:820px){.work-hero-wide{grid-template-columns:1fr}.work-hero-wide figure{aspect-ratio:3/2;max-width:none}}

/* ============================================================
   RESPONSIVE — phone & tablet optimization
   ============================================================ */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
iframe,video{max-width:100%}
p,h1,h2,h3,li,a{overflow-wrap:break-word}
/* manual line breaks tuned for desktop are dropped on small screens
   so paragraphs wrap naturally instead of breaking mid-thought */
@media(max-width:820px){br.brk{display:none}}
/* the inverse: headings like "Third Generation · Name" stay on one line on
   desktop, but split into label / name rows on small screens (the " · "
   separator only exists in the one-line form) */
br.mbrk{display:none}
@media(max-width:820px){br.mbrk{display:inline}span.hsep{display:none}}
/* genesis text panel (padding lives here so it can flex) */
.gen-panel{padding:32px 34px}
@supports(min-height:72svh){.coll-hero{min-height:72svh}}

/* ---------- TABLET ---------- */
@media(max-width:1024px){
  .work-hero{grid-template-columns:320px 1fr;gap:36px}
  .doc{padding:80px 24px 92px}
  .art-hero{gap:44px}
}
@media(max-width:820px){
  /* stacked hero images center instead of hugging the left edge */
  .work-hero figure{margin-left:auto;margin-right:auto}
  .art-portrait{max-width:360px;margin-left:auto;margin-right:auto}
}

/* ---------- PHONE ---------- */
@media(max-width:600px){
  .wrap,.ibar-inner{padding:0 18px}
  .art-hero{padding:96px 0 40px;gap:26px}
  .art-tagline{font-size:19px;margin-top:18px}
  .art-body p,.doc p,.isection .lead{font-size:16px;line-height:1.8}
  .art-links{gap:10px;margin-top:24px}
  /* stacked buttons share one uniform width instead of hugging their text */
  .art-links .btn{flex:1 1 auto;text-align:center}
  .btn{padding:13px 20px;letter-spacing:.14em}

  .doc{padding:70px 18px 84px}
  .doc h2{font-size:23px;margin:40px 0 12px}
  .doc-seal{width:145px;margin-bottom:36px}
  .doc-sub{letter-spacing:.24em;margin-bottom:38px}
  .doc .doc-pull{padding:26px 4px;margin:36px 0}

  .coll-hero{min-height:60vh}
  .coll-hero .wrap{padding-top:100px;padding-bottom:40px}
  .work-hero{padding:88px 0 32px}
  .work-hero figure{max-width:320px}
  .gen-panel{padding:24px 20px}

  .cop-door{padding:30px 22px 36px;margin-top:34px}
  .cop-door h3{font-size:20px}
  .cop-door .go{bottom:16px;right:18px}

  .work-card figure{max-width:360px;margin-left:auto;margin-right:auto}
  .vid-card .play{width:44px;height:44px}
  .sec-media{margin:16px 0}

  .ifoot{padding:40px 0 32px}
  .ifoot .wrap{flex-direction:column;align-items:flex-start;gap:12px}
}

/* ---------- SMALL PHONE ---------- */
@media(max-width:400px){
  .wrap,.ibar-inner{padding:0 15px}
  .ilogo .name{font-size:16px}
  .gen-panel{padding:22px 16px}
}

/* clickable gallery tiles (link overlays the whole figure) */
.gallery .gfull{position:absolute;inset:0;z-index:3;display:block}
.gallery figure:has(.gfull){cursor:pointer}

  /* EN/ES toggle: give it a real touch target on phones (was ~19px tall) */
  @media(max-width:820px){
    .lang-toggle{gap:2px}
    .lang-btn{padding:13px 10px;font-size:12px;min-height:44px;display:flex;align-items:center}
    .lang-sep{font-size:12px}
  }