@font-face{font-family:'Hanken Grotesk';src:url(assets/fonts/hanken-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url(assets/fonts/hanken-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url(assets/fonts/hanken-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Newsreader';src:url(assets/fonts/newsreader-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Newsreader';src:url(assets/fonts/newsreader-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url(assets/fonts/instrument-400i.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}

:root{
  --orange:#ed633c;--ink:#212026;--paper:#f5f1e9;--lime:#ddd95b;--card:#fffdf8;
  --line:rgba(33,32,38,.24);--line-light:rgba(245,241,233,.22);
  --gutter:clamp(22px,4.2vw,72px);
  --sans:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --italic:'Instrument Serif',Georgia,'Times New Roman',serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 clamp(16px,1.2vw,18px)/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid currentColor;outline-offset:5px;border-radius:2px}
::selection{background:var(--ink);color:var(--paper)}
.skip{position:absolute;left:14px;top:-80px;background:var(--paper);padding:10px 14px;z-index:20}
.skip:focus{top:12px}
.ico{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}

h1,h2{font-weight:500;letter-spacing:-.045em;margin:0}
h1 em,h2 em,.art-label em,.people-note em{font-family:var(--italic);font-style:italic;font-weight:400;letter-spacing:-.018em}
h2{font-size:clamp(44px,6.1vw,104px);line-height:1.02;margin-bottom:.5em}
h2 em{font-size:1.09em;line-height:.96}

/* ---- hero ---- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) min(44vw,72svh);min-height:max(100svh,640px);background:var(--orange)}
.hero-text{display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding:clamp(22px,2.4vw,36px) var(--gutter) clamp(26px,3vw,44px)}
.masthead{display:flex;justify-content:space-between;align-items:flex-start;gap:28px}
.wordmark{display:inline-block;font:700 clamp(24px,2vw,31px)/1 var(--serif);letter-spacing:-.04em}
.wordmark i{font-family:var(--italic);font-weight:400;font-size:1.12em;letter-spacing:0;margin:0 .03em}
.wordmark small{display:block;font:500 clamp(9px,.7vw,10.5px)/1 var(--sans);letter-spacing:.42em;text-transform:uppercase;margin-top:.8em}
nav{display:flex;gap:clamp(16px,2.2vw,34px);font-size:14px;font-weight:500;padding-top:3px}
nav a{padding-block:6px}
nav a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .3s var(--ease)}
nav a:hover{background-size:100% 1px}
.eyebrow{display:flex;gap:clamp(20px,3vw,48px);flex-wrap:wrap;font-size:12px;font-weight:600;letter-spacing:.13em;margin-bottom:clamp(20px,2.6vh,30px)}
h1{font-size:clamp(50px,min(7.5vw,12.6svh),150px);line-height:.98}
h1 em{display:block;font-size:1.1em;line-height:.94;margin-top:.04em}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-top:clamp(24px,4vh,48px)}
.hero-foot p{margin:0;font-size:clamp(16px,1.3vw,20px);line-height:1.45}
.round-link{display:flex;align-items:center;gap:16px;font-size:14px;font-weight:500;white-space:nowrap}
.circle{width:54px;height:54px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-size:20px;transition:background .25s,color .25s,transform .35s var(--ease)}
.round-link:hover .circle{background:var(--ink);color:var(--orange);transform:translateY(4px)}
.hero-art{position:relative;overflow:hidden;background:#1d4f6e;color:#fff}
.hero-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;will-change:transform}
.hero-art:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.42),transparent 26%);pointer-events:none}
.art-label{position:absolute;left:clamp(20px,2.4vw,36px);top:clamp(20px,2.6vw,38px);font-size:clamp(30px,3.1vw,54px);font-weight:500;line-height:1.02;letter-spacing:-.04em;text-shadow:0 2px 18px rgba(0,0,0,.28)}
.art-label em{font-size:1.1em}
.art-caption{position:absolute;z-index:1;left:clamp(20px,2.4vw,36px);right:clamp(20px,2.4vw,36px);bottom:clamp(16px,1.8vw,26px);display:flex;justify-content:space-between;gap:16px;font-size:10.5px;font-weight:500;letter-spacing:.14em}

/* ---- sections ---- */
.section{display:grid;grid-template-columns:minmax(0,22%) minmax(0,1fr);column-gap:24px;padding:clamp(72px,10vw,170px) var(--gutter)}
.section-label{font-size:12px;font-weight:600;letter-spacing:.14em;padding-top:clamp(6px,1vw,16px)}
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,48px);max-width:900px}
.story-grid p{margin:0}
.intro{max-width:640px;margin:0 0 clamp(34px,4vw,60px);font-size:clamp(17px,1.4vw,21px);line-height:1.55}

/* ---- spirit + the inspiral ---- */
.spirit{background:var(--paper)}
.definition{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,22%) minmax(0,1fr);column-gap:24px;grid-template-rows:auto auto;row-gap:clamp(14px,2vw,26px);margin-top:clamp(60px,8vw,130px);position:relative}
.spiral{grid-row:1/3;grid-column:1;width:min(100%,290px);align-self:center;fill:none;stroke:var(--orange);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.spiral-line{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--draw,1))}
.spiral-head{opacity:var(--head,1);transition:opacity .3s}
.definition-word{grid-column:2;border-top:1px solid var(--line);padding-top:clamp(16px,2vw,28px);display:flex;align-items:baseline;flex-wrap:wrap;column-gap:32px}
.definition-word h3{margin:0;font:italic 400 clamp(68px,10.4vw,178px)/.95 var(--italic);letter-spacing:-.025em}
.pronunciation{font-size:14px}
.definition>p{grid-column:2;margin:0;font-size:clamp(18px,1.7vw,26px);line-height:1.4;border-bottom:1px solid var(--line);padding-bottom:clamp(20px,2.4vw,36px)}

/* ---- possibilities ---- */
.possibilities{background:var(--ink);color:var(--paper)}
.possibilities .section-label,.number{color:var(--orange)}
.possibility-list article{display:flex;gap:clamp(18px,2.4vw,36px);align-items:flex-start;border-top:1px solid var(--line-light);padding:clamp(24px,2.8vw,42px) 0}
.possibility-list article:last-child{border-bottom:1px solid var(--line-light)}
.number{font-size:13px;padding-top:.75em}
.possibility-list h3{font-weight:500;font-size:clamp(25px,3vw,50px);line-height:1.1;letter-spacing:-.03em;margin:0 0 .35em;transition:transform .45s var(--ease)}
.possibility-list p{margin:0;max-width:34em;color:#d3d0cf}
.star{width:clamp(26px,3vw,44px);height:clamp(26px,3vw,44px);margin-left:auto;flex:none;fill:none;stroke:var(--orange);stroke-width:2.4;stroke-linecap:round;transition:transform .7s var(--ease)}
@media(hover:hover){.possibility-list article:hover h3{transform:translateX(10px)}.possibility-list article:hover .star{transform:rotate(90deg)}}

/* ---- people ---- */
.people{background:var(--paper);padding-bottom:clamp(60px,7vw,120px)}
.founders{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--line);padding-block:clamp(22px,2.4vw,36px)}
.founders article{padding:0 clamp(14px,1.8vw,28px);border-right:1px solid var(--line)}
.founders article:first-child{padding-left:0}
.founders article:last-child{border:0}
.founders span{font-size:12px;letter-spacing:.12em}
.founders h3{font:400 clamp(32px,4.2vw,72px)/1.04 var(--serif);letter-spacing:-.035em;margin:clamp(26px,3.4vw,56px) 0 0}
.founders p{margin:clamp(14px,1.5vw,24px) 0 0;max-width:27em;font-size:clamp(15px,1.1vw,17px);line-height:1.5}

/* Loose instant prints, never overlapping: each photograph is shown whole. */
.memory-wall{grid-column:1/-1;container-type:inline-size;position:relative;aspect-ratio:1300/1275;margin-top:clamp(50px,6vw,100px)}
.polaroid{position:absolute;margin:0;padding:1cqw 1cqw 0;background:var(--card);box-shadow:0 .4cqw .7cqw rgba(33,32,38,.09),0 1.5cqw 3cqw rgba(33,32,38,.17);transform:rotate(var(--r));transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.polaroid img{width:100%;height:auto}
.polaroid figcaption{height:5cqw;display:flex;align-items:center;justify-content:center;font:italic 400 1.7cqw/1 var(--italic);letter-spacing:.02em;color:#534c43}
.p1{--r:-3.4deg;left:1.5%;top:1%;width:25%}
.p2{--r:3.6deg;left:32%;top:4%;width:31%}
.p3{--r:-1.8deg;left:70%;top:0;width:27%}
.p4{--r:2.6deg;left:32.5%;top:41%;width:20%}
.p5{--r:-3.8deg;left:59.5%;top:54.5%;width:29%}
.people-note{position:absolute;left:2%;top:64%;width:26%;margin:0;font-size:2.15cqw;line-height:1.22;letter-spacing:-.02em}
.people-note em{display:block;font-size:1.32em;line-height:1.08;margin-top:.3em}
@media(hover:hover){.polaroid:hover{--r:0deg;transform:rotate(0) scale(1.03);box-shadow:0 .7cqw 1.2cqw rgba(33,32,38,.12),0 3cqw 5cqw rgba(33,32,38,.24);z-index:3}}

/* ---- gives back ---- */
.giveback{background:var(--lime)}
.principles{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 28px;border-top:1px solid var(--line);margin-top:clamp(40px,5vw,76px);padding-top:clamp(18px,2vw,28px);font:italic 400 clamp(26px,2.9vw,50px)/1.08 var(--italic);letter-spacing:-.012em}

/* ---- the loop ---- */
.loop{background:var(--orange);overflow:hidden;padding:clamp(14px,1.5vw,24px) 0;border-block:1px solid var(--ink)}
.loop-track{display:flex;width:max-content;animation:loop 58s linear infinite}
.loop-run{display:flex;align-items:center;flex:none;font-size:clamp(26px,3.8vw,62px);font-weight:500;letter-spacing:-.025em;line-height:1.1;white-space:nowrap}
.loop-run span{padding:0 .42em}
.loop-run .ico{width:1.5em;height:.75em;stroke-width:1.2}
@keyframes loop{to{transform:translateX(-33.3333%)}}

/* ---- closing ---- */
.closing{position:relative;height:clamp(640px,76vw,1180px);overflow:hidden;background:#1a6bab;color:#fff}
.closing>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 52%}
.closing-copy{position:relative;padding:clamp(52px,6vw,104px) var(--gutter);text-align:center}
.closing h2{font-size:clamp(40px,6.3vw,112px);text-shadow:0 2px 28px rgba(10,50,90,.3);margin-bottom:.42em}
.closing-link{display:inline-flex;align-items:center;gap:14px;font-size:clamp(16px,1.3vw,19px);font-weight:500;padding-bottom:6px;border-bottom:1px solid currentColor}
.closing-link .ico{font-size:1.15em;transition:transform .35s var(--ease)}
.closing-link:hover .ico{transform:translate(3px,-3px)}

/* ---- footer ---- */
footer{background:var(--ink);color:var(--paper);display:grid;grid-template-columns:1fr 1fr auto;gap:32px clamp(24px,4vw,60px);align-items:start;padding:clamp(38px,4vw,60px) var(--gutter) 26px}
footer p{margin:0;font-size:14px;line-height:1.55}
.back{display:inline-flex;align-items:center;gap:10px;font-size:14px}
.copyright{grid-column:1/-1;border-top:1px solid var(--line-light);padding-top:22px;font-size:12px;color:#aaa5a5}

/* ---- motion, only where JS can undo it ---- */
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js [data-reveal].in{opacity:1;transform:none}
.js .polaroid img{filter:brightness(1.5) contrast(.55) saturate(.25) sepia(.35) blur(1.5px);transition:filter 2.4s ease-out}
.js .polaroid.in img{filter:none}

/* ---- tablet: the art moves under the words, whole ---- */
@media(max-width:1000px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-text{gap:clamp(44px,8vw,72px)}
  h1{font-size:clamp(50px,12.4vw,112px)}
  .hero-art img{position:static;height:auto}
  .art-label{font-size:clamp(34px,6.4vw,58px)}
  .art-caption{font-size:10px}
  .section{grid-template-columns:1fr;row-gap:26px}
  .definition{grid-template-columns:1fr;grid-template-rows:none;margin-top:40px}
  .spiral{grid-row:auto;width:clamp(150px,30vw,230px);justify-self:start}
  .definition-word,.definition>p{grid-column:1}
  .memory-wall{aspect-ratio:auto;container-type:normal;display:grid;grid-template-columns:1fr 1fr;gap:36px 26px;align-items:start;padding:0 8px}
  .polaroid{position:relative;inset:auto;width:auto;padding:10px 10px 0;box-shadow:0 4px 8px rgba(33,32,38,.09),0 16px 30px rgba(33,32,38,.17)}
  .polaroid figcaption{height:50px;font-size:17px}
  .p2{margin-top:44px}.p4{margin-top:-56px}
  .people-note{position:static;width:auto;grid-column:1/-1;order:6;font-size:22px;margin-top:12px}
  .closing{height:clamp(620px,126vw,1180px)}
}
/* ---- phone ---- */
@media(max-width:600px){
  .masthead{flex-direction:column;gap:18px}
  nav{width:100%;justify-content:space-between;font-size:13.5px;gap:10px}
  .eyebrow{font-size:11px}
  .eyebrow span:last-child{display:none}
  h1{font-size:clamp(46px,14.1vw,70px)}
  h2{font-size:10.2vw}
  .closing h2{font-size:10.2vw}
  .hero-foot{display:block}
  .hero-foot p br{display:none}
  .round-link{justify-content:space-between;margin-top:22px}
  .circle{width:46px;height:46px}
  .art-caption span:last-child{display:none}
  .story-grid{grid-template-columns:1fr;gap:18px}
  .possibility-list article{flex-wrap:wrap;gap:6px 14px}
  .possibility-list article>div{order:3;flex-basis:100%}
  .star{width:22px;height:22px}
  .founders{grid-template-columns:1fr;padding:0}
  .founders article,.founders article:first-child{padding:22px 0;border-right:0;border-bottom:1px solid var(--line)}
  .founders article:last-child{border:0}
  .founders h3{font-size:42px;margin-top:10px}
  .founders h3 br{display:none}
  .founders p{font-size:16px}
  .memory-wall{display:flex;flex-direction:column;gap:38px;padding:0}
  .polaroid{width:84%;margin:0}
  .polaroid:nth-of-type(even){align-self:flex-end}
  .p2,.p4{margin-top:0}
  .principles{flex-direction:column;gap:6px}
  .closing>img{object-position:30% 100%}
  footer{grid-template-columns:1fr;gap:24px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .js [data-reveal]{opacity:1;transform:none}
  .js .polaroid img{filter:none}
}