/* Issue 01: editorial spread. Spec lives in .design.md (hidden). */
:root{
  --red:#C41230; --ink:#171717; --paper:#FFFFFF; --gray:#F2F2F2; --mid:#595959; --line:#BFBFBF;
  --display:'Bodoni Moda','Didot','Bodoni 72',Georgia,serif;
  --text:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --gutter:clamp(1.25rem,5vw,4.5rem);
  --space:clamp(4rem,9vw,7.5rem);
}
#wixheadless-banner-container{display:none !important;}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--text);font-size:1.0625rem;line-height:1.6;color:var(--ink);background:var(--paper);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.skip{position:absolute;left:1rem;top:-4rem;background:var(--paper);color:var(--ink);padding:.75rem 1rem;z-index:100;font-weight:600}
.skip:focus{top:1rem}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:.95;letter-spacing:-.02em;margin:0}
p{margin:0 0 1.1em}
em,.it{font-style:italic}
.label{font-family:var(--text);font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;line-height:1.4}

/* header */
.site-header{background:var(--ink);color:var(--paper);display:flex;flex-wrap:wrap;gap:.75rem 2rem;align-items:center;justify-content:space-between;padding:1rem var(--gutter);border-bottom:1px solid #333}
.brand{font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:-.01em;text-decoration:none}
.nav{display:flex;flex-wrap:wrap;gap:.25rem 1.6rem;list-style:none;margin:0;padding:0}
.nav a{font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;padding:.5rem 0;display:inline-block;border-bottom:2px solid transparent;transition:border-color .25s}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--paper)}

/* shared blocks */
.spread{position:relative;padding:var(--space) var(--gutter);overflow:hidden}
.dark{background:var(--ink);color:var(--paper)}
.light{background:var(--paper);color:var(--ink)}
.grayband{background:var(--gray);color:var(--ink)}
.redband{background:var(--red);color:var(--paper)}
.folio{display:flex;justify-content:space-between;gap:1rem;color:inherit;margin-bottom:2.5rem}
.dark .folio{color:#BFBFBF}
.vert{position:absolute;top:50%;right:.6rem;writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg);color:inherit;opacity:1;white-space:nowrap}
.dark .vert{color:#BFBFBF}
.light .vert,.grayband .vert{color:var(--mid)}
.bridge{display:flex;align-items:center;width:100%;height:14px;margin:0}
.bridge i{flex:none;width:12px;height:12px;border-radius:50%;background:var(--red)}
.bridge b{flex:1;height:2px;background:var(--red);transform-origin:left center}
.btn{display:inline-block;font-family:var(--text);font-size:.8125rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;padding:1.05rem 1.9rem;background:var(--red);color:var(--paper);border:2px solid var(--red);transition:transform .25s,background .25s,color .25s;cursor:pointer}
.btn:hover{transform:translateY(-2px);text-decoration:none}
.btn.ghost{background:transparent;color:inherit;border-color:currentColor}
.btn.white{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn.ink{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cap{font-size:.75rem;letter-spacing:.06em;margin-top:.7rem;color:inherit;max-width:34ch}
.dark .cap{color:#BFBFBF}
.frame{position:relative}
.frame img{width:100%;height:100%;object-fit:cover}
.bar{position:absolute;background:var(--red);z-index:0}

/* cover (home) */
.cover{position:relative;background:var(--ink);color:var(--paper);display:grid;grid-template-columns:repeat(12,1fr);min-height:calc(100svh - 62px);overflow:hidden}
.cover .photo{grid-area:1/6/2/13;position:relative;min-height:70svh}
.cover .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.cover .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(23,23,23,.96) 0%,rgba(23,23,23,.55) 28%,rgba(23,23,23,0) 55%),linear-gradient(to right,rgba(23,23,23,.85) 0%,rgba(23,23,23,0) 35%)}
.cover .redblock{grid-area:1/5/2/7;background:var(--red);margin:12% 0 0;z-index:0;width:55%;justify-self:end;height:46%}
.cover .copy{grid-area:1/1/2/13;position:relative;z-index:3;display:flex;flex-direction:column;justify-content:space-between;padding:2rem var(--gutter) 3rem;pointer-events:none}
.cover .copy a{pointer-events:auto}
.cover .top{display:flex;justify-content:space-between;gap:1rem;color:#F2F2F2}
.cover .lines{max-width:19rem;margin-top:2.2rem;font-size:1rem;line-height:1.45;color:var(--paper)}
.cover .lines span{display:block;margin-bottom:.9rem;padding-top:.9rem;border-top:1px solid #8a8a8a}
.cover h1{font-size:clamp(3.3rem,14.625vw,13.875rem);line-height:.8;letter-spacing:-.04em;margin:0 0 0 -.04em}
.cover h1 .dr{display:block;font-family:var(--text);font-size:.78rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;margin:0 0 1.2rem;line-height:1}
.cover h1 .it{display:block;font-weight:500;font-size:clamp(1.9rem,7.4vw,7rem);letter-spacing:-.025em;line-height:1;margin-top:.15em;white-space:nowrap}
.cover .cta{margin-top:2.2rem}

/* split rows */
.row{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.5rem,3vw,3rem);align-items:start}
.tagline{font-size:clamp(3rem,10vw,10rem);line-height:.9}
.tagline .red{color:var(--red);display:block}
.dark .tagline .red{color:var(--paper)}
.numeral{font-family:var(--display);font-weight:800;font-size:clamp(9rem,26vw,22rem);line-height:.78;letter-spacing:-.05em}
.numeral small{display:block;height:10px;width:40%;background:var(--red);margin-top:1.2rem}
.items{display:grid;grid-template-columns:repeat(12,1fr);gap:2.5rem 3rem;margin-top:1rem}
.item .n{font-family:var(--display);font-weight:800;font-size:clamp(5rem,12vw,10rem);line-height:.85;color:var(--red);display:block;letter-spacing:-.04em}
.grayband .item .n,.light .item .n{color:var(--red)}
.item h3{font-size:clamp(1.6rem,2.8vw,2.4rem);margin:1rem 0 .7rem;line-height:1.05}
.item{border-top:1px solid currentColor;padding-top:1.2rem}
.break{position:relative;padding:0;background:var(--ink)}
.break img{width:100%;aspect-ratio:21/9;min-height:300px;object-fit:cover}
.break .say{position:absolute;left:var(--gutter);bottom:0;background:var(--ink);color:var(--paper);padding:1.4rem 2rem 1.6rem;font-family:var(--display);font-weight:800;font-size:clamp(1.8rem,4.5vw,4rem);line-height:1;letter-spacing:-.02em}
.doors{display:grid;grid-template-columns:7fr 5fr;gap:0}
.door{padding:clamp(2rem,5vw,4.5rem);display:flex;flex-direction:column;justify-content:space-between;min-height:30rem;gap:2rem}
.door h2{font-size:clamp(3rem,7.5vw,7.5rem);line-height:.88}
.door p{max-width:36ch}

/* contact */
.contact{display:grid;grid-template-columns:repeat(12,1fr);gap:2rem clamp(1.5rem,4vw,4rem)}
.contact h2{font-size:clamp(3.4rem,10vw,9.5rem);line-height:.86}
.contact h2 .it{color:var(--red);display:block}
.mail-alt{margin:1.6rem 0 0}
.form{display:grid;gap:1.4rem;border-top:2px solid var(--ink);padding-top:1.6rem}
.field label{display:block;font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.5rem}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:1.0625rem;color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:0;padding:.85rem 1rem}
.field textarea{min-height:9rem;resize:vertical}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.note{font-size:.875rem;color:var(--mid);margin:0}
.status{display:none;padding:1.1rem 1.3rem;border:2px solid var(--ink);font-weight:500}
.status.ok{display:block;background:var(--ink);color:var(--paper)}
.status.err{display:block;background:var(--paper);color:var(--ink);border-color:var(--red);border-width:3px}

/* footer */
.site-footer{background:var(--ink);color:var(--paper);padding:3rem var(--gutter) 5rem}
.site-footer .bridge{margin-bottom:2rem}
.foot{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;justify-content:space-between;align-items:flex-start;font-size:.9rem}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.6rem}
.foot .big{font-family:var(--display);font-weight:800;font-size:1.6rem;line-height:1.05;max-width:22ch}
.foot a{display:inline-block;padding:.3rem 0}

/* page heroes (inner pages) */
.hero{position:relative;background:var(--ink);color:var(--paper);overflow:hidden}
.hero .art{position:relative;aspect-ratio:16/9;max-height:78svh;width:100%}
.hero .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .art::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(23,23,23,0) 25%,rgba(23,23,23,.9) 78%,#171717 100%)}
.hero .titleblock{position:relative;z-index:2;padding:0 var(--gutter) 4rem;margin-top:clamp(-9rem,-14vw,-3rem)}
.hero h1{font-size:clamp(4rem,17vw,16.5rem);line-height:.82;letter-spacing:-.04em;margin:0 0 1.4rem -.03em}
.hero .sub{font-family:var(--display);font-style:italic;font-weight:500;font-size:clamp(1.5rem,3.5vw,3rem);line-height:1.1;max-width:24ch;margin-bottom:1.6rem}
.hero.split{display:grid;grid-template-columns:repeat(12,1fr);min-height:calc(100svh - 62px)}
.hero.split .art{grid-area:1/6/2/13;aspect-ratio:auto;max-height:none;min-height:60svh}
.hero.split .art::after{background:linear-gradient(to right,rgba(23,23,23,.92) 0%,rgba(23,23,23,0) 40%),linear-gradient(to top,rgba(23,23,23,.7),rgba(23,23,23,0) 40%)}
.hero.split .titleblock{grid-area:1/1/2/13;margin:0;padding:3rem var(--gutter) 4rem;display:flex;flex-direction:column;justify-content:flex-end;pointer-events:none}
.hero.split .titleblock a{pointer-events:auto}

/* motion */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
.js .reveal.in{opacity:1;transform:none}
.js .bridge b{transform:scaleX(0);transition:transform .5s ease .1s}
.js .bridge.in b{transform:scaleX(1)}
.js .stagger>*{opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s ease}
.js .stagger.in>*{opacity:1;transform:none}
.js .stagger.in>*:nth-child(2){transition-delay:.1s}
.js .stagger.in>*:nth-child(3){transition-delay:.2s}
.js .stagger.in>*:nth-child(4){transition-delay:.3s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal,.js .stagger>*,.js .bridge b{opacity:1 !important;transform:none !important;transition:none !important}
  .btn,.nav a{transition:none}
}

/* phone first adjustments */
@media (max-width:860px){
  .cover{display:block;min-height:0}
  .cover .photo{height:72svh;min-height:420px}
  .cover .photo::after{background:linear-gradient(to top,rgba(23,23,23,1) 0%,rgba(23,23,23,.6) 30%,rgba(23,23,23,0) 60%)}
  .cover .redblock{display:none}
  .cover .copy{position:relative;margin-top:-30vw;padding:0 var(--gutter) 3rem;display:block}
  .cover .top{position:absolute;top:-68svh;left:var(--gutter);right:var(--gutter)}
  .cover h1 .it{font-size:10vw}
  .cover .lines{max-width:none}
  .row>*{grid-column:1/-1 !important;grid-row:auto !important}
  .items>*{grid-column:1/-1 !important}
  .doors{grid-template-columns:1fr}
  .contact>*{grid-column:1/-1 !important}
  .hero.split{display:block;min-height:0}
  .hero.split .art{aspect-ratio:4/5;min-height:0;max-height:none}
  .hero.split .art::after{background:linear-gradient(to top,rgba(23,23,23,1) 0%,rgba(23,23,23,.5) 35%,rgba(23,23,23,0) 60%)}
  .hero.split .titleblock{margin-top:clamp(-9rem,-30vw,-3rem);display:block;padding-top:0}
  .hero .art{aspect-ratio:4/3}
  .vert{display:none}
  .break .say{position:relative;left:auto;padding:1.4rem var(--gutter)}
  .hero h1{font-size:clamp(3.2rem,19vw,8rem)}
}
@media (min-width:861px){
  .vert{right:1rem}
}

/* overrides added during build */
.cover .top{position:absolute;top:1.6rem;left:var(--gutter);right:var(--gutter);z-index:4}
.cover .copy{padding-top:5rem}
.cover .bottom{max-width:100%}
.dark .btn{border-color:var(--paper)}
.dark .item .n{color:var(--paper)}
.dark .item{border-top-color:#8a8a8a}
.pull{font-family:var(--display);font-weight:600;font-style:italic;font-size:clamp(1.5rem,2.6vw,2.4rem);line-height:1.2;margin:0 0 1.2rem;max-width:26ch}
.big-p{font-size:clamp(1.1rem,1.5vw,1.35rem);line-height:1.55;max-width:46ch}
.col-rule{border-left:2px solid var(--red);padding-left:clamp(1.2rem,3vw,2.5rem)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem)}
.two ul{margin:1rem 0 0;padding-left:1.2rem}
.two li{margin-bottom:.7rem}
.two h3{font-size:clamp(2rem,4vw,3.6rem)}
.circle{border-radius:50%;overflow:hidden;aspect-ratio:1/1}
.arch{border-radius:999px 999px 0 0;overflow:hidden}
@media (max-width:860px){
  .cover .top{top:1rem}
  .cover .copy{padding-top:0}
  .two{grid-template-columns:1fr}
  .col-rule{border-left:0;padding-left:0;border-top:2px solid var(--red);padding-top:1.5rem}
}

@media (max-width:860px){
  .items,.row,.contact{grid-template-columns:minmax(0,1fr);gap:2rem}
  .row>*,.items>*,.contact>*{margin-top:0 !important;min-width:0}
  .row>div[style*="padding-top"]{padding-top:0 !important}
  .row>div[style*="padding:0 0 3rem 3rem"]{padding:0 0 2rem 1.2rem !important}
  .item{max-width:100%}
}
.js .static,.js .static>*{transition:none !important}

/* Soft photos: one shared rule for every photo of Pam (class soft-photo on the portrait and the working-session photo); the cover also gets a warm bloom and soft vignette on its overlay. To undo: delete this block, or git revert the "soften portrait" commit. The image file is untouched. */
.soft-photo{filter:contrast(.96) brightness(1.02)}
.cover .photo::after{background:
  radial-gradient(ellipse 88% 82% at 52% 40%,rgba(23,23,23,0) 58%,rgba(23,23,23,.30) 100%),
  linear-gradient(to top,rgba(23,23,23,.96) 0%,rgba(23,23,23,.55) 28%,rgba(23,23,23,0) 55%),
  linear-gradient(to right,rgba(23,23,23,.85) 0%,rgba(23,23,23,0) 35%)}
@media (max-width:860px){
  .cover .photo::after{background:
    radial-gradient(ellipse 95% 80% at 50% 38%,rgba(23,23,23,0) 58%,rgba(23,23,23,.28) 100%),
    linear-gradient(to top,rgba(23,23,23,1) 0%,rgba(23,23,23,.6) 30%,rgba(23,23,23,0) 60%)}
}

/* Group working-session photo keeps its earlier soft look; the portrait is neutral gray. */
.soft-photo-group{filter:contrast(.93) saturate(.88) sepia(.07) brightness(1.03)}

/* Full-color portrait: no filter, so the skin tone stays true. */
.color-photo{filter:none}

/* Lighter cover overlay (Pam picked it): keeps the portrait bright, with darker pools only behind the text. */
.cover .photo::after{background:
  linear-gradient(to right,rgba(23,23,23,.78) 0%,rgba(23,23,23,.66) 35%,rgba(23,23,23,0) 68%),
  radial-gradient(ellipse 78% 52% at 72% 78%,rgba(23,23,23,.88) 0%,rgba(23,23,23,.58) 58%,rgba(23,23,23,0) 100%),
  linear-gradient(to bottom,rgba(23,23,23,.55) 0%,rgba(23,23,23,.34) 14%,rgba(23,23,23,0) 28%),
  radial-gradient(ellipse 88% 82% at 52% 40%,rgba(23,23,23,0) 62%,rgba(23,23,23,.16) 100%),
  linear-gradient(to top,rgba(23,23,23,.88) 0%,rgba(23,23,23,.42) 22%,rgba(23,23,23,0) 44%),
  linear-gradient(to right,rgba(23,23,23,.88) 0%,rgba(23,23,23,.30) 22%,rgba(23,23,23,0) 34%)}
@media (max-width:860px){
  .cover .photo::after{background:
    linear-gradient(to bottom,rgba(23,23,23,.60) 0%,rgba(23,23,23,.36) 12%,rgba(23,23,23,0) 26%),
    linear-gradient(to top,rgba(23,23,23,.92) 0%,rgba(23,23,23,.46) 26%,rgba(23,23,23,0) 48%)}
}

/* Entrance transitions exist only after the visitor's first scroll (html.motion), so nothing below the first screen animates at page load. */
.js:not(.motion) .reveal,.js:not(.motion) .stagger>*,.js:not(.motion) .bridge b{transition:none !important}
/* Contact form status links */
.status a{color:var(--red);font-weight:600}
.status.ok a{color:inherit}

/* Required fields: a quiet note and a red asterisk on each required label */
.req-note{margin:0;font-size:.875rem;font-weight:500;color:var(--ink)}
.req{color:var(--red);font-weight:700;font-size:1em}


/* New headshot (landscape 4:3): keep the face and both hoops in frame. */
.cover .photo img{object-position:12% 20%}
@media (max-width:860px){.cover .photo img{object-position:30% 20%}}

/* Ph.D. after the surname on the cover: a smaller, lighter tail so the line stays on one row. */
.cover h1 .phd{font-size:.52em;font-weight:500;letter-spacing:0;white-space:nowrap}