@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Playfair+Display:ital,wght@0,600;0,700;1,600;1,700&display=swap');

:root { color-scheme: light dark; --bg:#f1f0eb; --surface:#e8e6df; --surface-2:#ddd9cf; --ink:#171817; --muted:#65665f; --line:#c9c6bd; --accent:#f15a3b; --accent-2:#3958b8; --wash:#fffdf8; --shadow:0 18px 45px rgba(24,25,22,.10); }
:root[data-theme="dark"] { --bg:#101216; --surface:#181b21; --surface-2:#20242b; --ink:#f4f1e8; --muted:#afb0ac; --line:#343a43; --accent:#ff7355; --accent-2:#98adff; --wash:#14171c; --shadow:0 22px 60px rgba(0,0,0,.35); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:"DM Sans", Arial, sans-serif; font-size:16px; line-height:1.5; }
a { color:inherit; text-decoration:none; }
.grain { position:fixed; inset:0; pointer-events:none; opacity:.11; z-index:5; 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='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); }
.skip-link { position:fixed; top:12px; left:12px; padding:10px 14px; background:var(--ink); color:var(--bg); transform:translateY(-160%); transition:transform .2s; z-index:20; }
.skip-link:focus { transform:translateY(0); }
.site-header { width:min(1280px, calc(100% - 64px)); margin:auto; min-height:102px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line); }
.brand img,.footer-brand img { display:block; width:auto; height:40px; }
nav { display:flex; gap:30px; margin-left:auto; font:500 12px/1 "DM Mono", monospace; text-transform:uppercase; letter-spacing:.08em; }
nav a { position:relative; padding:9px 0; } nav a:after { content:""; position:absolute; height:1px; background:var(--accent); bottom:4px; left:0; right:100%; transition:right .2s; } nav a:hover:after,nav a:focus-visible:after { right:0; }
.theme-toggle { appearance:none; border:1px solid var(--line); background:transparent; color:var(--ink); border-radius:99px; padding:9px 12px; display:flex; gap:7px; align-items:center; cursor:pointer; font:500 11px/1 "DM Mono",monospace; text-transform:uppercase; letter-spacing:.06em; }
.theme-toggle:hover { background:var(--surface); } .theme-icon { font-size:18px; line-height:10px; }
.hero,.section,footer { width:min(1280px, calc(100% - 64px)); margin:auto; }
.hero { min-height:690px; display:grid; grid-template-columns:1.04fr .96fr; align-items:center; gap:80px; padding:82px 44px 88px; }
.eyebrow { margin:0 0 20px; font:500 11px/1.2 "DM Mono", monospace; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); }
.status-dot,.mini-dot { display:inline-block; width:7px; height:7px; margin-right:8px; background:var(--accent); border-radius:50%; box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent); }
h1,h2,h3,p { margin-top:0; } h1,h2 { letter-spacing:-.055em; }
h1 { max-width:700px; margin-bottom:25px; font:600 clamp(3.8rem, 7.1vw, 6.8rem)/.94 "Playfair Display", Georgia, serif; } h1 em { color:var(--accent); }
.lede { max-width:555px; color:var(--muted); font-size:clamp(1.05rem,1.6vw,1.25rem); line-height:1.55; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin:35px 0 46px; }
.button { display:inline-flex; align-items:center; gap:19px; min-height:48px; padding:0 18px; border:1px solid var(--line); font:500 12px/1 "DM Mono",monospace; text-transform:uppercase; letter-spacing:.05em; transition:transform .2s,background .2s; }
.button:hover { transform:translateY(-3px); } .button-primary { border-color:var(--accent); background:var(--accent); color:#fffaf5; } .button-quiet:hover { background:var(--surface); }
.availability { display:flex; gap:11px; align-items:center; color:var(--muted); font-size:13px; }.availability span { color:var(--ink); font:500 11px "DM Mono",monospace; text-transform:uppercase; }
.portrait-wrap { position:relative; width:min(100%,455px); justify-self:end; padding:20px 20px 44px 0; }
.portrait-frame { position:relative; height:530px; overflow:hidden; background:var(--surface-2); box-shadow:var(--shadow); z-index:1; } .portrait-frame:after { content:""; position:absolute; inset:0; background:linear-gradient(135deg, transparent 65%, rgba(57,88,184,.22)); mix-blend-mode:multiply; pointer-events:none; }
.portrait-frame img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; filter:none; }
.portrait-halo { position:absolute; width:92%; height:70%; border:1px solid var(--accent); left:-28px; top:-22px; z-index:0; }
.portrait-note { position:absolute; z-index:2; bottom:7px; right:-22px; background:var(--wash); border:1px solid var(--line); padding:11px 13px; font:500 10px/1.25 "DM Mono",monospace; text-transform:uppercase; letter-spacing:.05em; box-shadow:var(--shadow); }.mini-dot { background:var(--accent-2); box-shadow:none; width:6px;height:6px; }
.section { padding:115px 44px; border-top:1px solid var(--line); }.section-heading { max-width:680px; margin-bottom:48px; }.section-heading h2,.about h2 { margin-bottom:16px; font:600 clamp(2.5rem,4.8vw,4.5rem)/.98 "Playfair Display",Georgia,serif; }.section-heading > p:last-child { max-width:550px; margin-bottom:0; color:var(--muted); font-size:17px; }
.project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }.project { min-height:550px; padding:26px; display:flex; flex-direction:column; border:1px solid var(--line); overflow:hidden; transition:transform .25s, box-shadow .25s; }.project:hover { transform:translateY(-6px); box-shadow:var(--shadow); }.project-cup { background:#f5ede0; color:#1d2721; }.project-xyx { background:#101931; color:#f8f5f0; border-color:#24325c; }.project-topline { display:flex; justify-content:space-between; gap:16px; font:500 10px/1.3 "DM Mono",monospace; text-transform:uppercase; letter-spacing:.07em; }.project-topline a { text-decoration:underline; text-underline-offset:3px; }
.project-logo-wrap { margin:auto 0; display:flex; align-items:center; min-height:220px; }.project-logo { display:block; }.cup-logo-wrap { justify-content:center; }.cup-logo { width:min(190px,48%); height:auto; filter:drop-shadow(0 14px 13px rgba(124,45,18,.18)); }.xyx-logo-wrap { justify-content:center; }.xyx-logo { width:min(100%,360px); height:auto; }
.project-copy { max-width:430px; }.project-type { margin-bottom:9px; font:500 10px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.08em; opacity:.7; }.project h3 { margin-bottom:8px; font:600 34px/1 "Playfair Display",Georgia,serif; letter-spacing:-.04em; }.project-copy > p:last-child { margin-bottom:0; opacity:.76; line-height:1.55; }.tags { display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:28px 0 0; list-style:none; }.tags li { padding:6px 8px; border:1px solid currentColor; border-radius:99px; font:500 9px/1 "DM Mono",monospace; text-transform:uppercase; opacity:.75; }
.about-layout { display:grid; grid-template-columns:1.12fr .88fr; gap:10%; }.about-layout h2 { margin-bottom:0; }.about-layout p { color:var(--muted); font-size:17px; line-height:1.65; }.text-link { display:inline-flex; gap:10px; margin-top:12px; padding-bottom:4px; border-bottom:1px solid var(--accent); font:500 12px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.06em; }
.compact { margin-bottom:38px; }.principles { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }.principles article { min-height:260px; padding:26px 28px 20px 0; border-right:1px solid var(--line); }.principles article+article { padding-left:28px; }.principles article:last-child { border-right:0; }.principles span { color:var(--accent); font:500 11px "DM Mono",monospace; }.principles h3 { margin:50px 0 10px; font:600 25px/1.05 "Playfair Display",Georgia,serif; letter-spacing:-.035em; }.principles p { max-width:300px; margin:0; color:var(--muted); font-size:14px; line-height:1.6; }
footer { display:grid; grid-template-columns:1fr 1.3fr auto; align-items:center; gap:30px; padding:35px 44px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; }footer p { margin:0; }.footer-brand img { height:32px; }.footer-email { color:var(--ink); font:500 12px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.04em; }.copyright { grid-column:1/-1; padding-top:18px; border-top:1px solid var(--line); font:10px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.08em; }
.not-found { min-height:80vh; display:grid; place-items:center; text-align:center; }.not-found-title { font-size:clamp(3rem,9vw,7rem); }
:focus-visible { outline:2px solid var(--accent); outline-offset:4px; } @media (max-width:800px) { .site-header,.hero,.section,footer { width:min(100% - 40px, 680px); }.site-header { min-height:80px; }.brand img { height:32px; }nav { display:none; }.hero { grid-template-columns:1fr; padding:66px 0 70px; gap:54px; min-height:0; }.portrait-wrap { width:min(100%,430px); justify-self:start; margin-left:12px; }.portrait-frame { height:min(112vw,530px); }.project-grid,.about-layout { grid-template-columns:1fr; }.section { padding:76px 0; }.principles { grid-template-columns:1fr; }.principles article,.principles article+article { padding:24px 0; border-right:0; border-bottom:1px solid var(--line); }.principles h3 { margin-top:28px; }.principles article:last-child { border-bottom:0; }footer { grid-template-columns:1fr; padding:30px 0; gap:16px; }.copyright { margin-top:8px; } }
@media (max-width:450px) { .site-header,.hero,.section,footer { width:calc(100% - 32px); }.theme-label { display:none; }.theme-toggle { padding:10px; }.hero { padding-top:48px; }h1 { font-size:3.35rem; }.project { min-height:480px; padding:20px; }.project-topline { font-size:9px; }.project-logo-wrap { min-height:185px; }.cup-logo { width:150px; }.section-heading h2,.about h2 { font-size:2.55rem; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.skip-link,.button,nav a:after,.project { transition:none; } }