:root { --ink:#171714; --muted:#6f6a62; --paper:#f4f0e8; --red:#a80f26; --gold:#dcae54; --line:rgba(23,23,20,.13); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; overflow-x:clip; color:var(--ink); background:var(--paper); font-family:"DM Sans",sans-serif; -webkit-font-smoothing:antialiased; }
body::before { content:""; position:fixed; inset:0; z-index:-3; background:radial-gradient(circle at 50% -10%,rgba(255,255,255,.95),transparent 42%),linear-gradient(115deg,transparent 0 65%,rgba(168,15,38,.025) 65% 100%); }
.noise { position:fixed; inset:0; z-index:10; opacity:.035; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.orb { position:fixed; z-index:-2; border-radius:50%; pointer-events:none; }
.orb--red { width:320px; height:320px; top:160px; right:-245px; background:rgba(168,15,38,.07); }
.orb--gold { width:280px; height:280px; bottom:12%; left:-220px; background:rgba(220,174,84,.14); }
a { color:inherit; } button { font:inherit; }
a,button { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible { outline:3px solid rgba(168,15,38,.32); outline-offset:4px; }
.page { width:min(100% - 32px,650px); margin:0 auto; padding:max(26px,env(safe-area-inset-top)) 0 max(38px,env(safe-area-inset-bottom)); }
.hero__tools { display:flex; align-items:center; justify-content:space-between; }
.location { display:flex; gap:8px; align-items:center; color:var(--muted); font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.location i { width:6px; height:6px; border-radius:50%; background:#5d8d63; box-shadow:0 0 0 4px rgba(93,141,99,.1); }
.share { display:grid; width:46px; height:46px; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--ink); background:rgba(255,255,255,.62); cursor:pointer; touch-action:manipulation; transition:transform .2s ease,background .2s ease; }
.share:hover { transform:rotate(8deg); background:#fff; }
.share svg { width:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.identity { display:grid; grid-template-columns:112px 1fr; gap:28px; align-items:end; margin-top:28px; }
.portrait-wrap { position:relative; width:112px; height:112px; }
.portrait-wrap::before { content:""; position:absolute; inset:-5px; border:1px solid var(--line); border-radius:38% 62% 48% 52%/51% 40% 60% 49%; transform:rotate(-7deg); }
.portrait-wrap img { width:100%; height:100%; object-fit:cover; border-radius:48% 52% 46% 54%/43% 48% 52% 57%; filter:grayscale(18%); }
.portrait-badge { position:absolute; right:-7px; bottom:5px; display:grid; width:31px; height:31px; place-items:center; border:3px solid var(--paper); border-radius:50%; color:#fff; background:var(--red); font-size:13px; }
.kicker { margin:0 0 8px; color:var(--red); font-size:.75rem; font-weight:700; letter-spacing:.12em; }
h1,h2 { margin:0; }
h1 { max-width:10ch; font:800 clamp(2.7rem,10vw,3.75rem)/.92 "Manrope",sans-serif; letter-spacing:-.065em; text-wrap:balance; }
.intro { max-width:590px; margin:26px 0 22px; font:400 clamp(1.25rem,4.5vw,1.6rem)/1.34 "Newsreader",serif; text-wrap:pretty; }
.intro em { color:var(--red); }
.social-row { display:flex; flex-wrap:wrap; gap:9px; }
.social-row a { display:inline-flex; min-height:44px; gap:8px; align-items:center; padding:10px 14px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.52); font-size:.8125rem; font-weight:600; text-decoration:none; touch-action:manipulation; transition:transform .2s ease,background .2s ease; }
.social-row a:hover { transform:translateY(-2px); background:#fff; }
.social-row svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.social-row a span { color:var(--red); font-size:14px; }
.destinations { margin-top:43px; }
.section-label { display:flex; gap:12px; align-items:center; margin-bottom:14px; color:var(--muted); font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.section-label__line { flex:1; height:1px; background:var(--line); }
.project { position:relative; display:block; min-height:326px; margin-bottom:14px; overflow:hidden; border-radius:28px; box-shadow:0 17px 48px rgba(53,41,28,.1); text-decoration:none; isolation:isolate; touch-action:manipulation; transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease; }
.project:hover { transform:translateY(-5px); box-shadow:0 25px 60px rgba(53,41,28,.16); }
.project__copy { position:relative; z-index:3; }
.project__index { display:block; margin-bottom:20px; font-size:.75rem; font-weight:700; letter-spacing:.13em; }
.project__copy p { font-size:1rem; line-height:1.55; text-wrap:pretty; }
.project__cta { display:inline-flex; min-height:44px; gap:10px; align-items:center; margin-top:2px; border-bottom:1px solid currentColor; font-size:.8125rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.project__cta i { font:normal 16px/1 sans-serif; transition:transform .2s ease; }
.project:hover .project__cta i { transform:translate(3px,-3px); }
.project--ai { padding:30px 46% 29px 30px; color:#f9f5ed; background:#141413; }
.project--ai::before { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(circle at 76% 50%,rgba(168,15,38,.33),transparent 37%),linear-gradient(135deg,rgba(255,255,255,.025),transparent); }
.project--ai h2 { font:800 clamp(2.5rem,9vw,3.4rem)/.9 "Manrope",sans-serif; letter-spacing:-.07em; text-wrap:balance; }
.project--ai h2 b { color:#d01d35; }
.project--ai p { color:#aaa69e; }
.book-wrap { position:absolute; z-index:1; width:57%; height:115%; right:-5%; bottom:-13%; transform:rotate(3deg); transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.book-wrap img { position:relative; z-index:2; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 23px 18px rgba(0,0,0,.45)); }
.project:hover .book-wrap { transform:rotate(0) scale(1.035); }
.book-glow { position:absolute; width:230px; height:230px; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:50%; background:rgba(176,14,39,.25); filter:blur(26px); }
.project__scribble { position:absolute; z-index:3; right:20px; top:18px; transform:rotate(6deg); color:rgba(255,255,255,.58); font:italic 15px "Newsreader",serif; }
.project--artisan { min-height:294px; padding:32px 31px 29px; border:1px solid rgba(168,15,38,.1); color:#211e1a; background:#fffaf2; }
.project--artisan::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(115deg,transparent 48%,rgba(168,15,38,.045)); }
.project--artisan .project__copy { width:68%; }
.project--artisan h2 { font:400 clamp(2.5rem,8vw,3.25rem)/.92 "Newsreader",serif; letter-spacing:-.045em; text-wrap:balance; }
.project--artisan h2 em { color:var(--red); }
.project--artisan h2 sup { color:var(--red); font:600 .75rem "DM Sans",sans-serif; vertical-align:top; }
.project--artisan p { color:#6d665d; }
.project--artisan .project__index { color:var(--red); }
.artisan-mark { position:absolute; right:28px; top:27px; width:27px; height:27px; }
.artisan-mark img { width:100%; height:100%; }
.artisan-diagram { position:absolute; right:-50px; bottom:-55px; width:250px; height:250px; opacity:.68; }
.artisan-diagram span { position:absolute; z-index:2; display:grid; width:94px; height:94px; place-items:center; border:1px solid rgba(168,15,38,.38); border-radius:50%; color:var(--red); font-size:.6875rem; font-weight:700; letter-spacing:.08em; }
.artisan-diagram span:nth-child(1) { left:45px; top:4px; }
.artisan-diagram span:nth-child(2) { left:8px; top:70px; }
.artisan-diagram span:nth-child(3) { left:82px; top:70px; }
.artisan-diagram i { position:absolute; left:79px; top:82px; width:33px; height:30px; background:rgba(168,15,38,.1); clip-path:polygon(50% 0,100% 100%,0 100%); }
.manifesto { position:relative; display:flex; gap:17px; align-items:flex-start; margin:42px 0 38px; padding:0 8px; }
.manifesto>span { color:var(--red); font:400 58px/.8 "Newsreader",serif; }
.manifesto p { margin:0; font:400 clamp(1.6rem,6vw,2.15rem)/1.16 "Newsreader",serif; letter-spacing:-.025em; text-wrap:balance; }
.manifesto em { color:var(--red); }
.footer { display:flex; justify-content:space-between; padding:21px 2px 0; border-top:1px solid var(--line); color:var(--muted); font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; }
.footer p { margin:0; }
.toast { position:fixed; z-index:20; left:50%; bottom:max(22px,env(safe-area-inset-bottom)); transform:translate(-50%,18px); padding:12px 18px; border-radius:999px; color:#fff; background:#171714; box-shadow:0 12px 30px rgba(0,0,0,.2); font-size:.8125rem; opacity:0; pointer-events:none; transition:opacity .2s ease,transform .2s ease; }
.toast.is-visible { transform:translate(-50%,0); opacity:1; }
.js .reveal { animation:reveal .65s cubic-bezier(.2,.8,.2,1) both; }
.js .section-label { animation-delay:.06s; }
.js .project--ai { animation-delay:.12s; }
.js .project--artisan { animation-delay:.18s; }
@keyframes reveal { from { opacity:0; transform:translateY(13px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:520px) {
  .page { width:min(100% - 24px,650px); padding-top:max(16px,env(safe-area-inset-top)); }
  .identity { grid-template-columns:78px 1fr; gap:16px; margin-top:20px; }
  .portrait-wrap { width:78px; height:78px; }
  .portrait-badge { width:27px; height:27px; right:-5px; border-width:2px; }
  h1 { font-size:clamp(2.2rem,10.5vw,2.9rem); line-height:.94; }
  .kicker { margin-bottom:6px; font-size:.6875rem; line-height:1.35; }
  .intro { margin:21px 0 18px; }
  .social-row { display:grid; grid-template-columns:auto 1fr; gap:8px; }
  .social-row a { justify-content:center; padding:9px 12px; white-space:nowrap; }
  .destinations { margin-top:31px; }
  .project { border-radius:24px; }
  .project--ai { min-height:318px; padding:24px 43% 22px 22px; }
  .project--ai h2 { font-size:clamp(2.2rem,11vw,2.75rem); }
  .project--ai p { font-size:.875rem; line-height:1.48; }
  .book-wrap { width:60%; right:-11%; bottom:-12%; }
  .project__scribble { display:none; }
  .project__index { margin-bottom:16px; }
  .project--artisan { min-height:286px; padding:25px 22px 23px; }
  .project--artisan .project__copy { width:75%; }
  .project--artisan h2 { font-size:clamp(2.25rem,11vw,2.7rem); }
  .project--artisan p { font-size:.875rem; line-height:1.48; }
  .artisan-diagram { right:-78px; bottom:-71px; }
  .artisan-mark { right:21px; top:22px; }
  .manifesto { margin:34px 0 31px; }
}
@media (max-width:370px) {
  .location { letter-spacing:.08em; }
  .social-row { grid-template-columns:1fr; }
  .social-row a { justify-content:flex-start; }
  .project--ai { min-height:338px; padding-right:40%; }
  .book-wrap { width:62%; right:-19%; }
  .project--artisan .project__copy { width:80%; }
  .footer { flex-direction:column; gap:8px; }
}
@media (hover:none) {
  .share:hover,.social-row a:hover,.project:hover { transform:none; }
  .project:hover { box-shadow:0 17px 48px rgba(53,41,28,.1); }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; animation-delay:0s!important; } }