@font-face{font-family:HeroDIN;src:url('assets/fonts/din-condensed-bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:RightBold;src:url('assets/fonts/right-grotesk-bold.woff') format('woff');font-weight:700;font-display:swap}
:root{--paper:#f4f0e6;--forest:#194731;--pink:#e99ba7;--green:#529a78;--sage:#d9dfb8;--light:#fffdf5}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#fff}body{padding:16px 24px;color:var(--forest)}a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid var(--forest);outline-offset:6px}::selection{background:var(--pink);color:var(--forest)}
.hero-shell{height:calc(100svh - 32px);min-height:580px;position:relative;overflow:clip;background:var(--paper);isolation:isolate}
.hero-header{position:absolute;inset:0 0 auto;height:15.2%;border-bottom:3px solid var(--light)}
.hero-header nav{position:absolute;right:2.6%;top:42%;display:flex;flex-direction:column;align-items:flex-start;font:700 14px/1.05 RightBold,Arial,sans-serif}
.hero-header a:first-child{color:var(--forest)}.hero-header a:last-child{color:#b85f71}.hero-header a:hover{text-decoration:underline;text-underline-offset:3px}
.composition{position:absolute;left:7.5%;right:7.5%;top:22%;height:58%;display:grid;grid-template-columns:31% 28.5% 29.5%;column-gap:5.5%;align-items:center}
.name-block{position:relative;align-self:center;margin:0;transform:translateY(-3.5%);font:700 clamp(100px,10.7vw,190px)/.85 HeroDIN,'Arial Narrow',sans-serif;font-synthesis:none;letter-spacing:.005em}
.initial-block{position:absolute;left:0;top:-22%;bottom:-18%;width:24%;background:var(--sage);z-index:-1}
.name-row{display:flex;align-items:baseline;white-space:nowrap;position:relative}
.initial{flex:0 0 24%;text-align:center;color:#b96272}
.remaining{display:flex;justify-content:space-between;flex:1;min-width:0}
.portrait-mount{height:100%;display:grid;place-items:center;min-width:0}
.portrait{height:100%;max-height:100%;width:100%;position:relative;display:grid;place-items:center;padding:0;border:0;background:none;color:inherit;cursor:pointer;touch-action:manipulation}
.portrait-crop{display:block;position:relative;height:100%;aspect-ratio:613.333/855;max-width:100%;overflow:hidden;border:2px solid var(--light)}
.portrait-strip{position:absolute;left:0;top:0;display:block;height:100%;width:auto;max-width:none;user-select:none;pointer-events:none}
.statement{margin:0;transform:translateY(-3%);font:700 clamp(50px,5.4vw,96px)/1 HeroDIN,'Arial Narrow',sans-serif;font-synthesis:none;letter-spacing:.045em}
.statement-line{display:flex;align-items:center;justify-content:space-between;white-space:nowrap;min-height:1.1em;padding:.025em .3em 0}
.highlighted{background:var(--pink);color:var(--forest);padding-top:.12em;padding-bottom:.03em;margin:0 -.02em .08em}
.statement-line.second{padding-top:.06em}.statement-line.last{letter-spacing:.035em;justify-content:flex-start}
.bottom-rule{position:absolute;bottom:5%;height:3px;left:0;right:0;background:var(--light)}
@media(min-width:1800px){.composition{left:9%;right:9%}.name-block{font-size:10.4vw}.statement{font-size:5.25vw}}
@media(max-width:900px) and (min-width:651px){body{padding:12px 16px}.hero-shell{height:calc(100svh - 24px);min-height:500px}.composition{left:5%;right:5%;column-gap:4%;grid-template-columns:32% 29% 31%;height:53%;top:25%}.name-block{font-size:11.1vw;line-height:.88}.statement{font-size:5.6vw}.hero-header nav{font-size:12px}}
@media(max-width:650px){
 body{padding:12px}.hero-shell{height:calc(100svh - 24px);min-height:740px}
 .hero-header{height:10.5%;border-width:2px}.hero-header nav{right:7%;top:32%;font-size:12px}
 .composition{left:7%;right:7%;top:18%;height:72%;grid-template-columns:46% 46%;grid-template-rows:35% 61%;gap:4% 8%;align-items:center}
 .name-block{font-size:19.2vw;line-height:.85;transform:none;grid-area:1/1}.initial-block{top:-13%;bottom:-11%}
 .statement{grid-area:1/2;font-size:9.7vw;transform:none;letter-spacing:.035em}
 .statement-line{padding-left:.19em;padding-right:.19em}.highlighted{margin-left:-.08em;margin-right:-.08em}
 .portrait-mount{grid-area:2/1/3/3;height:100%;margin-top:4%;align-self:end}.portrait{max-width:260px;justify-self:center}.portrait-crop{border-width:2px}
 .bottom-rule{height:2px;bottom:3%}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Unboxed type, with equally spaced letter centers from Sarah's Figma layout. */
body{--accent:#b96272;--copy:var(--forest)}
.initial-block{display:none}
.name-block{width:108%;margin-left:.7vw;font-size:10.1vw;line-height:.8}
.name-row{display:grid;grid-template-columns:repeat(5,1fr)}
.name-row .remaining{display:contents}
.name-row span{text-align:center}
.initial{color:var(--accent)}
.highlighted{background:none;color:var(--copy)}
.statement{color:var(--copy)}
.hero-header a:last-child{color:var(--accent)}
body[data-palette="rose-blue"]{--paper:#e7c6cb;--forest:#355da2;--accent:#a37325;--copy:#355da2;--light:#f7eadd}
body[data-palette="cream-forest"]{--paper:#f3eee2;--forest:#244a39;--accent:#b66e82;--copy:#244a39;--light:#fffdf5}
body[data-palette="butter-bordeaux"]{--paper:#efdc99;--forest:#73243c;--accent:#a76466;--copy:#73243c;--light:#fff4cb}
body[data-palette="arctic-rust"]{--paper:#c6dbe8;--forest:#8e392d;--accent:#bd6d39;--copy:#8e392d;--light:#eaf2ed}
body[data-palette="lilac-espresso"]{--paper:#ddd5e4;--forest:#4b343c;--accent:#a36882;--copy:#72485e;--light:#f3edf0}
body[data-palette="sage-poppy"]{--paper:#d1d8be;--forest:#b34432;--accent:#586d4c;--copy:#b34432;--light:#f0efdc}
@media(min-width:1800px){.name-block{font-size:9.85vw}}
@media(max-width:900px) and (min-width:651px){.name-block{font-size:10.6vw;line-height:.8}}
@media(max-width:650px){.name-block{width:100%;margin:0;font-size:18vw;line-height:.85}}