/* Thomas Jefferson — sculptural portrait · Petrides Public Sculpture house style */
:root{
  --charcoal:#1B1812;
  --charcoal-2:#121212;
  --parchment:#F1ECDE;
  --parchment-2:#E7DBC4;
  --navy:#25345C;
  --gold:#9A6F2D;        /* labels on light */
  --gold-light:#D8BC7E;  /* labels on dark */
  --gold-chip:#B99358;
  --ink:#1C1913;
  --body:#3A342A;
  --muted:#6B6352;
  --cream:#F2ECDF;
  --cream-dim:#CFC4A7;
  --rule:rgba(154,111,45,.35);
  --rule-dark:rgba(216,188,126,.28);
  --serif-display:'Cormorant Garamond',Georgia,serif;
  --serif-body:'Spectral',Georgia,serif;
  --sans:'Inter',Helvetica,Arial,sans-serif;
  --max:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--parchment);color:var(--body);font-family:var(--serif-body);font-size:17px;line-height:1.72;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px}

/* ---- type ---- */
.label{font-family:var(--sans);font-size:.68rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);font-weight:500}
.dark .label,.navy .label{color:var(--gold-light)}
h1,h2,h3{font-family:var(--serif-display);font-weight:300;font-style:italic;line-height:1.05;color:var(--ink);letter-spacing:-.005em}
.dark h1,.dark h2,.dark h3,.navy h1,.navy h2,.navy h3{color:var(--cream)}
h1{font-size:clamp(2.6rem,5.2vw,4.4rem)}
h2{font-size:clamp(2rem,3.6vw,3rem)}
h3{font-size:clamp(1.5rem,2.2vw,1.9rem)}
h2.roman,h1.roman{font-style:normal}
.lede{font-family:var(--serif-display);font-style:normal;font-size:1.35rem;line-height:1.45;color:var(--ink)}
.dark .lede,.navy .lede{color:var(--cream-dim)}
.dark p,.navy p{color:var(--cream-dim)}
.dark strong,.navy strong{color:var(--cream)}
p+p{margin-top:1em}
.note{font-style:italic;color:var(--gold)}
.small{font-size:.9rem;color:var(--muted)}
.dark .small,.navy .small{color:#857B63}
hr.mark{border:0;width:72px;height:1px;background:var(--gold);margin:1.4rem 0 1.8rem}
.dark hr.mark,.navy hr.mark{background:var(--gold-light)}

/* ---- header / nav ---- */
.site-head{background:var(--charcoal);color:var(--cream);position:sticky;top:0;z-index:50;border-bottom:1px solid var(--rule-dark)}
.site-head .in{max-width:var(--max);margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand .chip{width:40px;height:40px;background:var(--gold-chip);color:var(--charcoal);font-family:var(--sans);font-size:6.2px;letter-spacing:.2em;font-weight:700;display:flex;flex-direction:column;justify-content:center;align-items:center;line-height:1.55}
.brand .name{white-space:nowrap;font-family:var(--serif-display);font-size:1.25rem;color:var(--cream);font-style:normal;letter-spacing:.01em}
.brand .name em{font-style:italic;color:var(--gold-light)}
nav ul{list-style:none;display:flex;gap:22px}
nav a{white-space:nowrap;font-family:var(--sans);font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;text-decoration:none;color:var(--cream-dim);padding:6px 0;border-bottom:1px solid transparent}
nav a:hover{color:var(--cream)}
nav a[aria-current="page"]{color:var(--gold-light);border-bottom-color:var(--gold-light)}
.nav-toggle{display:none;background:none;border:1px solid var(--rule-dark);color:var(--cream);font-family:var(--sans);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;padding:10px 14px;cursor:pointer}
@media (max-width:1080px){
  .site-head .in{height:64px;padding:0 20px}
  .nav-toggle{display:block}
  nav{position:absolute;left:0;right:0;top:64px;background:var(--charcoal);border-bottom:1px solid var(--rule-dark);display:none}
  nav.open{display:block}
  nav ul{flex-direction:column;gap:0;padding:8px 20px 18px}
  nav a{display:block;padding:12px 0;border-bottom:1px solid var(--rule-dark)}
}

/* ---- sections & panels ---- */
.dark{background:var(--charcoal);color:var(--cream)}
.navy{background:var(--navy);color:var(--cream)}
.light{background:var(--parchment)}
.light-2{background:var(--parchment-2)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
@media (max-width:900px){.wrap{padding:0 20px}}
.section{padding:88px 0}
@media (max-width:900px){.section{padding:56px 0}}
.panel{display:grid;grid-template-columns:1fr 1fr;min-height:560px}
.panel .text{padding:88px 72px;display:flex;flex-direction:column;justify-content:center}
.panel .figure{position:relative;overflow:hidden;min-height:420px}
.panel .figure img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.panel .figure.contain{background:var(--charcoal-2)}
.panel .figure.contain img{object-fit:contain}
.panel .figure figcaption{position:absolute;left:24px;bottom:18px;right:24px;font-family:var(--sans);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(242,236,223,.72);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.panel.rev .figure{order:2}
@media (max-width:900px){
  .panel{grid-template-columns:1fr}
  .panel .text{padding:48px 20px}
  .panel.rev .figure{order:0}
}
.text > .label{margin-bottom:14px}
.text h1,.text h2{margin-bottom:6px}
.text .lede{margin-top:1.2rem}
.text p{max-width:56ch}

/* ---- meta rows (HEIGHT / WEIGHT / DELIVERY) ---- */
.meta{display:flex;gap:44px;flex-wrap:wrap;margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid var(--rule)}
.dark .meta,.navy .meta{border-top-color:var(--rule-dark)}
.meta div .label{color:var(--muted);letter-spacing:.28em;font-size:.62rem}
.dark .meta div .label,.navy .meta div .label{color:#857B63}
.meta div span{display:block;font-family:var(--serif-display);font-style:italic;font-size:1.25rem;color:var(--ink);margin-top:4px}
.dark .meta div span,.navy .meta div span{color:var(--cream)}

/* ---- spec table ---- */
table.spec{width:100%;border-collapse:collapse;margin-top:1.2rem;font-size:.98rem}
table.spec th,table.spec td{padding:11px 0;border-bottom:1px solid var(--rule);vertical-align:top;text-align:left}
table.spec th{font-weight:400;color:var(--body);width:42%}
table.spec td{color:var(--ink);text-align:right}
.navy table.spec th{color:var(--cream-dim)}.navy table.spec td{color:var(--cream)}
.navy table.spec th,.navy table.spec td{border-bottom-color:var(--rule-dark)}

/* ---- grids ---- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:56px}
@media (max-width:900px){.grid-3,.grid-2{grid-template-columns:1fr;gap:36px}}
.card img{aspect-ratio:4/5;object-fit:cover;width:100%}
.card.square img{aspect-ratio:1/1}
.card h3{margin-top:18px;font-style:italic}
.card .label{margin-top:8px;display:block}
.card p{margin-top:12px;font-size:.98rem}

/* ---- offer choice on home ---- */
.offer{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--rule)}
.offer a{display:block;background:var(--parchment);padding:52px 48px;text-decoration:none;color:inherit}
.offer a:hover{background:var(--parchment-2)}
.offer .big{font-family:var(--serif-display);font-style:italic;font-size:clamp(2.4rem,4vw,3.4rem);color:var(--ink);line-height:1;margin:14px 0 10px}
.offer .go{font-family:var(--sans);font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-top:22px;display:block}
@media (max-width:900px){.offer{grid-template-columns:1fr}.offer a{padding:36px 24px}}

/* ---- steps ---- */
.steps{display:grid;grid-template-columns:1fr 1fr;gap:48px 64px;margin-top:2.6rem}
@media (max-width:900px){.steps{grid-template-columns:1fr}}
.steps h3{font-style:normal;font-size:1.45rem;margin-bottom:.4rem;color:var(--ink)}
.steps ul{list-style:none;margin-top:.6rem}
.steps li{padding:9px 0;border-bottom:1px solid var(--rule)}
.steps li::before{content:"—";color:var(--gold);margin-right:12px}

/* ---- drawings ---- */
.drawing{background:var(--parchment-2);padding:36px;border:1px solid var(--rule)}
.drawing svg{width:100%;height:auto;display:block}
.drawing .small{margin-top:14px}

/* ---- gallery triptych ---- */
.triptych{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.triptych img{aspect-ratio:4/5;object-fit:cover;width:100%;background:var(--charcoal-2)}
@media (max-width:700px){.triptych{grid-template-columns:1fr}}

/* ---- CTA ---- */
.cta{display:inline-block;margin-top:2rem;font-family:var(--sans);font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;text-decoration:none;padding:16px 26px;border:1px solid var(--gold);color:var(--gold)}
.cta:hover{background:var(--gold);color:var(--cream)}
.dark .cta,.navy .cta{border-color:var(--gold-light);color:var(--gold-light)}
.dark .cta:hover,.navy .cta:hover{background:var(--gold-light);color:var(--charcoal)}
.cta-band{text-align:center}
.cta-band h2{font-style:italic}
.cta-band .email{font-family:var(--serif-display);font-size:clamp(1.6rem,3vw,2.4rem);color:var(--gold-light);text-decoration:none;display:inline-block;margin-top:1rem}
.cta-band .email:hover{color:var(--cream)}

/* ---- footer ---- */
footer{background:var(--charcoal-2);color:var(--cream-dim);padding:72px 0 48px;border-top:1px solid var(--rule-dark)}
footer .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
@media (max-width:900px){footer .cols{grid-template-columns:1fr;gap:36px}}
footer .label{color:var(--gold-light);margin-bottom:16px;display:block}
footer .item{margin-bottom:16px;line-height:1.5}
footer .item b{display:block;font-weight:400;color:var(--cream);font-size:1.02rem}
footer .item a{color:#B9A277;text-decoration:none;font-size:.95rem}
footer .item a:hover{color:var(--gold-light)}
footer .item span{font-size:.92rem;color:#857B63;display:block}
footer .base{margin-top:56px;padding-top:24px;border-top:1px solid var(--rule-dark);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
footer .base .chip{width:56px;height:56px;background:var(--gold-chip);color:var(--charcoal);font-family:var(--sans);font-size:7.5px;letter-spacing:.2em;font-weight:700;display:flex;flex-direction:column;justify-content:center;align-items:center;line-height:1.6}
footer .base .small{color:#857B63}

/* ---- page intro band ---- */
.intro{padding:96px 0 64px}
.intro h1{max-width:14ch}
.intro .lede{max-width:48ch;margin-top:1.4rem}
@media (max-width:900px){.intro{padding:56px 0 40px}}

/* ---- source entries ---- */
.source{display:grid;grid-template-columns:5fr 7fr;gap:64px;padding:64px 0;border-top:1px solid var(--rule)}
.source:first-of-type{border-top:0}
.source img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--charcoal-2)}
.source .no-image{aspect-ratio:4/5;background:var(--parchment-2);border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;text-align:center;padding:32px}
.source .no-image span{font-family:var(--sans);font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);line-height:2}
.source h2{font-size:clamp(1.7rem,2.6vw,2.4rem)}
.source .year{font-family:var(--sans);font-size:.66rem;letter-spacing:.3em;color:var(--gold);margin-bottom:12px;display:block}
.source blockquote{font-family:var(--serif-display);font-style:italic;font-size:1.3rem;color:var(--ink);margin:1.4rem 0 0;padding-left:20px;border-left:1px solid var(--gold)}
.source blockquote cite{display:block;font-style:normal;font-family:var(--sans);font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-top:10px}
@media (max-width:900px){.source{grid-template-columns:1fr;gap:28px;padding:44px 0}}

/* PPS publication identity: parchment, charcoal, serif typography and gold. */
:root{--parchment:#E7DDC9;--parchment-2:#DDD0B2;--gold:#79541E;--gold-chip:#AE8E32}
h1,h2,h3,.card h3,.steps h3,.cta-band h2{font-style:normal}
.label{font-size:.875rem;letter-spacing:.2em}
nav a{font-size:.875rem;letter-spacing:.06em}
nav ul{gap:18px}
.site-head .in{max-width:1440px;height:88px;gap:24px}
.brand{gap:8px;flex-shrink:0}
.pps-logo{width:72px;height:72px;object-fit:contain;flex-shrink:0}
.brand .name{font-size:1.4rem}
.brand .name em{display:none}
.nav-toggle{font-size:.875rem;letter-spacing:.08em;min-height:44px}
.cta,.offer .go{font-size:.875rem;letter-spacing:.12em}
.meta div .label,.source .year,.source .no-image span,.source blockquote cite{font-size:.875rem;letter-spacing:.14em}
.panel .figure figcaption{font-size:.75rem;letter-spacing:.12em;background:rgba(18,18,18,.82);padding:10px 14px;color:var(--cream);text-shadow:none}
.dark .small,.navy .small,.dark .meta div .label,.navy .meta div .label,footer .item span,footer .base .small{color:#BCAF94}
.panel .figure img{object-position:center 38%}
.panel .text{padding:72px clamp(28px,5vw,72px)}
hr.mark{width:100%;max-width:560px;opacity:.6}
.offer .big{display:block}
.card img,.triptych img,.source img{height:auto}
.grid-2>*,.grid-3>*,.steps>*{min-width:0}
.spec td,.spec th{overflow-wrap:anywhere}
a:focus-visible,button:focus-visible{outline:3px solid currentColor;outline-offset:4px}
.skip-link{position:fixed;top:8px;left:8px;z-index:100;background:var(--parchment);color:var(--ink);padding:12px 18px;transform:translateY(-160%)}
.skip-link:focus{transform:translateY(0)}
footer .base .pps-logo{width:88px;height:88px}
.cta-band .email{overflow-wrap:anywhere;max-width:100%}
@media(max-width:1200px){
 .site-head .in{height:80px;padding:0 20px}
 .nav-toggle{display:block}
 nav{position:absolute;left:0;right:0;top:80px;background:var(--charcoal);border-bottom:1px solid var(--rule-dark);display:none;max-height:calc(100dvh - 80px);overflow:auto}
 nav.open{display:block}
 nav ul{flex-direction:column;gap:0;padding:8px 20px 18px}
 nav a{display:block;padding:12px 0;border-bottom:1px solid var(--rule-dark)}
}
@media(max-width:900px){.panel .text{padding:48px 20px}.panel .figure{min-height:0;aspect-ratio:4/5}.panel .figure img{object-fit:cover}}
@media(max-width:420px){.brand .name{font-size:1.1rem}.pps-logo{width:58px;height:58px}.site-head .in{gap:8px;padding:0 12px}.nav-toggle{padding:10px}.meta{gap:24px}.panel .figure figcaption{left:12px;right:12px;bottom:12px}}

main > .panel:first-child .figure{background:#BDBEB8}
main > .panel:first-child .figure img{object-fit:contain;object-position:center}
.text > .cta{align-self:flex-start}

.essay{max-width:820px}.essay h2:not(:first-child){margin-top:2.8rem}
@media(min-width:1201px) and (max-width:1390px){nav ul{gap:12px}nav a{font-size:.75rem}}
