:root {
  --paper: #e8dcc7;
  --paper-deep: #d9c5a7;
  --ink: #2f241e;
  --brown: #4b3026;
  --red: #a33c2d;
  --red-dark: #762b21;
  --cream: #f5ecdc;
  --line: rgba(75,48,38,.24);
  --serif: "Italiana", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
  --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); overflow-x: hidden; }
body::selection { background: var(--red); color: var(--cream); }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }

.grain { position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: .075; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); mix-blend-mode:multiply; }

.loader { position: fixed; inset: 0; z-index: 100; background: var(--red); color: var(--cream); display: grid; place-items: center; pointer-events: none; animation: loaderOut 1.15s 1.05s cubic-bezier(.77,0,.18,1) forwards; }
.loader-mark { font-family: var(--serif); font-size: clamp(7rem, 16vw, 13rem); line-height: .6; transform: translateY(.08em); animation: markIn .8s cubic-bezier(.16,1,.3,1) forwards; }
.loader-word { position:absolute; bottom: 12%; font: 10px var(--mono); letter-spacing:.26em; text-transform:uppercase; opacity:.75; }
.loader-line { position:absolute; bottom: 10%; width: 160px; height: 1px; background: rgba(245,236,220,.28); overflow:hidden; }
.loader-line span { display:block; height:100%; background:var(--cream); transform:translateX(-100%); animation: lineIn 1s .15s ease forwards; }
@keyframes loaderOut { to { clip-path: inset(0 0 100% 0); } }
@keyframes markIn { from { opacity:0; transform:translateY(.35em) scale(.96); } to { opacity:1; transform:none; } }
@keyframes lineIn { to { transform:none; } }

.site-header { position:absolute; z-index:10; top:0; left:0; right:0; height:86px; padding:0 5vw; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid var(--line); font:10px var(--mono); letter-spacing:.16em; text-transform:uppercase; }
.brand { font-weight:600; letter-spacing:.26em; }
.nav { display:flex; gap:30px; }
.nav a { opacity:.72; transition:opacity .2s; }
.nav a:hover { opacity:1; }
.header-index { justify-self:end; opacity:.55; }

.section-act { position:relative; }
.hero { min-height:100svh; display:grid; grid-template-columns:48% 52%; align-items:center; padding:130px 7vw 70px; overflow:hidden; }
.hero-copy { position:relative; z-index:3; max-width:690px; }
.eyebrow { margin:0 0 22px; color:var(--red); font:10px var(--mono); text-transform:uppercase; letter-spacing:.22em; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-family:var(--serif); font-weight:400; letter-spacing:-.035em; }
h1 { font-size:clamp(5.2rem, 10vw, 10.6rem); line-height:.79; margin:0 0 45px; }
h1 em,h2 em { color:var(--red); font-style:italic; }
.hero-intro { max-width:500px; font-size:15px; line-height:1.75; color:rgba(47,36,30,.75); }
.arrow-link { margin-top:42px; display:inline-flex; gap:30px; align-items:center; border-bottom:1px solid var(--ink); padding-bottom:10px; font:10px var(--mono); text-transform:uppercase; letter-spacing:.15em; }
.arrow-link b { font:18px var(--sans); transition:transform .3s; }
.arrow-link:hover b { transform:translateY(5px); }
.hero-side-note { position:absolute; right:3.3vw; top:45%; writing-mode:vertical-rl; font:9px var(--mono); letter-spacing:.16em; opacity:.55; line-height:2; }
.hero-side-note span { color:var(--red); }

.hero-art { position:relative; height:min(740px, 84vh); min-height:540px; display:grid; place-items:center; isolation:isolate; }
.sun-disc { position:absolute; width:38vw; height:38vw; max-width:560px; max-height:560px; border-radius:50%; background:rgba(255,247,231,.38); box-shadow:0 0 90px rgba(255,247,231,.28); }
.orbit { position:absolute; border:1px solid rgba(75,48,38,.14); border-radius:50%; transform:rotate(-24deg); }
.orbit-a { width:78%; height:31%; }
.orbit-b { width:90%; height:47%; transform:rotate(28deg); }
.icarus { width:min(47vw, 620px); max-height:82vh; object-fit:contain; position:relative; z-index:2; transform:rotate(8deg) translate(0,-12px); filter:drop-shadow(0 18px 16px rgba(75,48,38,.07)); animation:fall 6.8s cubic-bezier(.42,0,.2,1) infinite alternate; }
@keyframes fall { from { transform:rotate(7deg) translate(-6px,-18px); } to { transform:rotate(13deg) translate(28px,22px); } }
.art-caption { position:absolute; z-index:3; bottom:2%; right:0; max-width:250px; font:9px var(--mono); letter-spacing:.08em; line-height:1.6; text-transform:uppercase; opacity:.5; }

.section-number { position:absolute; top:42px; left:5vw; color:var(--red); font:10px var(--mono); z-index:5; }
.section-number-light { color:#d88e7e; }
.section-number-contact { color:rgba(245,236,220,.55); }

.statement { min-height:100vh; padding:15vh 13vw 14vh; border-top:1px solid var(--line); display:flex; align-items:center; }
.statement-grid { width:min(900px,100%); margin:auto; }
.statement h2 { font-size:clamp(4rem, 7vw, 8rem); line-height:.9; margin:0 0 70px; }
.statement-text { max-width:510px; margin-left:auto; font-size:15px; line-height:1.85; color:rgba(47,36,30,.72); }
.statement-text.delay { margin-top:80px; margin-right:12%; }
.red-rule { position:absolute; right:0; bottom:15%; width:24vw; height:2px; background:var(--red); }

.work { min-height:100vh; background:var(--brown); color:var(--cream); padding:12vh 7vw; display:grid; grid-template-columns:35% 65%; align-items:center; overflow:hidden; }
.work .eyebrow { color:#d88e7e; }
.work-meta { position:relative; z-index:2; }
.work h2 { font-size:clamp(4.2rem,7vw,7.8rem); line-height:.84; margin-bottom:48px; }
.work h2 em { color:#d88e7e; }
.work-meta > p:not(.eyebrow) { max-width:260px; font-size:13px; line-height:1.8; opacity:.7; }
.work-index { display:block; max-width:260px; margin-top:70px; font:10px var(--mono); line-height:1.7; letter-spacing:.08em; text-transform:uppercase; color:#d88e7e; }
.work-image { margin:0; position:relative; height:78vh; min-height:550px; overflow:hidden; background:#76554a; }
.work-image img { width:100%; height:100%; object-fit:cover; filter:sepia(.24) saturate(.62) contrast(1.04); transform:scale(1.05); transition:transform 1.4s cubic-bezier(.16,1,.3,1); display:block; }
.work:hover .work-image img { transform:scale(1.01); }
.work-image::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(47,36,30,.32), transparent 45%); pointer-events:none; }
.work-image figcaption { position:absolute; z-index:2; bottom:18px; left:20px; right:20px; font:9px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:#fff; opacity:.7; }
.work-corner-label { position:absolute; right:6.5vw; top:8vh; z-index:3; font:clamp(1.8rem,3vw,3.2rem) var(--serif); letter-spacing:-.03em; color:rgba(245,236,220,.18); text-align:right; pointer-events:none; }
.work-corner-label span { display:block; margin-top:7px; font:9px var(--mono); letter-spacing:.18em; color:rgba(245,236,220,.5); }

.principles { min-height:100vh; padding:15vh 13vw 15vh; }
.principles-head { margin-left:15%; }
.principles h2 { font-size:clamp(4rem,7vw,7.4rem); line-height:.85; margin-bottom:110px; }
.principle-list { border-top:1px solid var(--line); margin-left:15%; }
.principle { display:grid; grid-template-columns:10% 25% 1fr; gap:20px; padding:36px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.principle span { font:10px var(--mono); color:var(--red); }
.principle h3 { margin:0; font:32px var(--serif); }
.principle p { margin:0; max-width:400px; font-size:13px; line-height:1.7; opacity:.7; }

.contact { min-height:100vh; background:var(--red); color:var(--cream); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.contact .eyebrow { color:var(--cream); opacity:.65; }
.contact-content { position:relative; z-index:3; width:min(700px,80%); text-align:center; padding-bottom:5vh; }
.contact h2 { font-size:clamp(5rem,9vw,10rem); line-height:.8; margin-bottom:45px; }
.contact h2 em { color:var(--cream); }
.contact-content > p:not(.eyebrow) { max-width:420px; margin:0 auto 35px; font-size:14px; line-height:1.8; opacity:.8; }
.contact-details { display:flex; flex-direction:column; align-items:center; gap:17px; }
.contact-link { display:inline-flex; gap:24px; align-items:center; padding-bottom:12px; border-bottom:1px solid rgba(245,236,220,.7); font:11px var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.contact-link span { font-size:17px; transition:transform .25s; }
.contact-link:hover span { transform:translate(4px,-4px); }
.contact-fake { font:10px var(--mono); letter-spacing:.1em; opacity:.58; }
.columns { position:absolute; inset:auto -4vw -2px; height:55%; display:flex; align-items:flex-end; justify-content:space-between; opacity:.17; }
.column { width:17%; height:100%; position:relative; display:flex; flex-direction:column; align-items:center; }
.column i { display:block; width:72%; height:10%; border:4px solid var(--cream); border-bottom:0; border-radius:50% 50% 0 0; }
.column b { display:block; width:62%; flex:1; border-left:4px solid var(--cream); border-right:4px solid var(--cream); background:repeating-linear-gradient(90deg, transparent 0 10%, rgba(245,236,220,.08) 10% 13%); }
.column strong { width:80%; height:12%; border-top:5px solid var(--cream); border-bottom:7px solid var(--cream); }
.footer { position:absolute; z-index:4; bottom:0; left:0; right:0; padding:25px 5vw; border-top:1px solid rgba(245,236,220,.25); display:flex; justify-content:space-between; font:9px var(--mono); letter-spacing:.15em; opacity:.65; }

.reveal { opacity:0; transform:translateY(35px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.reveal.visible { opacity:1; transform:none; }

@media (max-width: 900px) {
  .site-header { grid-template-columns:1fr auto; }
  .nav { display:none; }
  .hero { grid-template-columns:1fr; padding-top:130px; }
  .hero-copy { padding-right:12vw; }
  .hero-art { position:absolute; width:76vw; right:-20vw; top:25vh; height:65vh; opacity:.78; }
  .hero-intro { max-width:430px; }
  .hero-side-note { display:none; }
  .statement { padding-left:10vw; padding-right:10vw; }
  .statement-text { margin-left:0; }
  .statement-text.delay { margin-left:10%; margin-right:0; }
  .work { grid-template-columns:1fr; gap:45px; }
  .work-image { height:65vh; min-height:400px; }
  .principles { padding-left:10vw; padding-right:10vw; }
  .principles-head, .principle-list { margin-left:0; }
}

@media (max-width: 600px) {
  .site-header { height:70px; padding:0 6vw; }
  .header-index { display:none; }
  .hero { min-height:900px; padding:105px 7vw 60px; }
  h1 { font-size:clamp(4.4rem, 18vw, 7rem); }
  .hero-art { top:38vh; right:-18vw; width:100vw; opacity:.7; }
  .sun-disc { width:75vw; height:75vw; }
  .icarus { width:91vw; }
  .art-caption { right:7vw; bottom:1%; }
  .statement { padding:100px 8vw; }
  .statement h2, .principles h2 { font-size:clamp(3.7rem, 15vw, 5.5rem); }
  .statement-text.delay { margin-left:0; margin-top:50px; }
  .red-rule { width:40vw; }
  .work { padding:90px 7vw 80px; }
  .work h2 { font-size:clamp(4rem, 17vw, 6rem); }
  .work-image { min-height:420px; }
  .work-corner-label { top:5vh; right:7vw; }
  .principles { padding:100px 8vw; }
  .principles h2 { margin-bottom:70px; }
  .principle { grid-template-columns:14% 1fr; }
  .principle p { grid-column:2; margin-top:-10px; }
  .contact { min-height:780px; }
  .contact h2 { font-size:clamp(4.5rem, 18vw, 7rem); }
  .columns { height:40%; }
  .column { width:23%; }
  .column:nth-child(even) { display:none; }
  .footer { padding:18px 6vw; font-size:7px; }
  .footer span:nth-child(2) { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}
