:root{--ink:#142f40;--muted:#4d626a;--blue:#075b80;--blue-dark:#17394b;--paper:#eae5db;--white:#f2eee5;--line:#d1ccc2;--radius:18px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",-apple-system,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible{outline:3px solid #0073ad;outline-offset:4px}.wrap{width:min(1360px,calc(100% - 96px));margin-inline:auto}.proposal{min-height:36px;background:#d7d0c3;color:#263e49;display:flex;align-items:center;justify-content:center;gap:20px;padding:8px 24px;font-size:12px;font-weight:600}.proposal a{text-decoration:underline;text-underline-offset:3px}.nav{height:92px;display:flex;align-items:center;justify-content:space-between}.brand{display:inline-flex;align-items:center;font-size:25px;font-weight:700;letter-spacing:-1.15px}.brand-mark{display:block;width:40px;height:40px;margin-right:11px;border-radius:13px}.brand-name{display:block}.nav nav{display:flex;align-items:center;gap:36px;font-size:14px;font-weight:600}.nav button{min-width:44px;min-height:44px;border:1px solid #c6d2d2;border-radius:999px;background:transparent;padding:9px 13px;color:var(--ink);cursor:pointer}.hero{display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:6%;padding-block:58px 112px;min-height:650px}.intro,.section-kicker{font-size:14px;font-weight:700;color:var(--blue);margin:0 0 23px}.hero h1{font-size:clamp(52px,6.6vw,96px);line-height:.99;letter-spacing:-.065em;font-weight:700;max-width:9.5ch;margin:0}.lead{font-size:clamp(17px,1.45vw,20px);line-height:1.6;color:var(--muted);max-width:34em;margin:29px 0 30px}.button{display:inline-flex;align-items:center;gap:38px;background:var(--ink);color:white;border-radius:999px;padding:17px 22px;font-size:14px;font-weight:700;transition:background .2s}.hero-art{height:480px;background:#17394b;border-radius:24px;position:relative;overflow:hidden}.hero-art:before{content:"";position:absolute;width:390px;height:390px;right:-85px;top:-140px;border-radius:50%;border:1px solid rgba(239,230,214,.10);box-shadow:0 0 0 65px rgba(239,230,214,.025),0 0 0 130px rgba(239,230,214,.02)}.art-card{position:absolute;overflow:hidden;box-shadow:0 22px 60px #274e5a35}.art-card img{display:block;width:100%;height:100%;object-fit:cover}.art-tram{width:73%;height:57%;top:15%;left:8%;border:7px solid #d9d0c2;border-radius:12px;transform:rotate(-3deg)}.art-phone{width:25%;height:70%;right:7%;top:17%;border:7px solid #d9d0c2;border-radius:23px;transform:rotate(5deg);background:#eadcc3}.art-phone img{object-fit:contain}.hero-label{position:absolute;bottom:26px;left:30px;color:#e8dfd0;font-size:13px;font-weight:650}.work{padding-block:24px 120px}.section-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:38px}.section-head h2,.about h2{font-size:clamp(40px,4.4vw,65px);line-height:1.03;letter-spacing:-.055em;margin:0;font-weight:700}.section-head>p{max-width:340px;color:var(--muted);font-size:16px;line-height:1.6;margin:0 0 4px}.projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.project{border:1px solid var(--line);background:var(--white);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;min-width:0;transition:border-color .2s,background-color .2s}.art{height:230px;background:#e5edef;display:flex;justify-content:center;align-items:center;overflow:hidden;padding:18px}.art img{display:block;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain}.project-copy{padding:24px 26px 28px;display:flex;flex-direction:column;flex:1}.project-meta{display:flex;justify-content:space-between;gap:16px;font-size:13px;font-weight:650;color:#4d626a}.project h3{font-size:27px;letter-spacing:-.045em;margin:22px 0 8px;line-height:1.1}.project p{font-size:15px;color:#4d626a;line-height:1.55;margin:0;max-width:36ch}.featured{grid-column:span 2;display:grid;grid-template-columns:1.2fr 1fr;min-height:330px}.featured .art{height:100%;min-height:330px}.featured .project-copy{padding:32px}.featured h3{font-size:clamp(33px,3.2vw,46px);margin-top:auto}.tram .art{padding:0;background:#b9d6d8}.tram .art img{object-fit:cover}.ink .art{background:#eee3ce}.tide .art{background:#d4e9ed}.energy .art{background:#e4edc6}.cannon .art{background:#d8e9ef}.home .art{background:#222922}.buzz .art{background:#f5e8d4}.six .art{background:#ecece7}.slop .art{background:#19131d}.vetra .art{background:#e8eee3}.storm .art{background:#dfe8e7}.entrada .art{background:#f1e8da}.tafeli .art{background:#e4ebe8}.usegha .art{background:#e7ece0}.dusk .art{background:#303b2c}.about{background:#17394b;color:#f2eee5;padding:100px 0}.about .section-kicker{color:#b4d5df}.about .text-link{color:#f2eee5;border-color:#9ab4bb}.about-inner{display:grid;grid-template-columns:1fr 1fr;gap:12%}.about-copy{font-size:18px;line-height:1.65;color:#d0d9d7;max-width:500px}.about-copy p:first-child{margin-top:0}.text-link{display:inline-block;font-size:15px;color:var(--ink);font-weight:700;margin-top:14px;border-bottom:1px solid #829ba1;padding-bottom:7px}.footer{padding-block:64px;display:flex;justify-content:space-between;gap:40px}.footer p{font-size:14px;color:var(--muted)}.footer-links{display:flex;align-items:flex-start;flex-wrap:wrap;gap:25px;font-size:14px;font-weight:600}.identity{max-width:1050px;padding-block:64px 100px}.identity h1{font-size:clamp(48px,7vw,86px);line-height:1;letter-spacing:-.06em;margin:16px 0 24px}.identity>.lead{max-width:680px}.identity section{border-top:1px solid var(--line);padding:40px 0}.identity h2{font-size:30px;letter-spacing:-.04em}.identity p,.identity li{font-size:16px;color:var(--muted);line-height:1.7}.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.swatch{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:white;font-size:13px;font-weight:650}.swatch i{display:block;height:100px}.swatch span{display:block;padding:14px}@media(max-width:900px){.wrap{width:min(100% - 48px,1360px)}.hero{gap:30px;min-height:0;padding-block:35px 80px}.hero-art{height:370px}.projects{grid-template-columns:repeat(2,minmax(0,1fr))}.featured{grid-column:span 2}.about-inner{gap:8%}}@media(max-width:620px){.wrap{width:calc(100% - 40px)}.proposal{font-size:11px;gap:12px}.nav{height:74px}.brand{font-size:22px}.brand-mark{width:34px;height:34px;margin-right:9px}.nav nav{gap:15px;font-size:13px}.nav nav a:nth-child(2),.nav nav a:nth-child(3){display:none}.hero{display:flex;flex-direction:column;align-items:stretch;padding-block:37px 76px;gap:42px}.hero h1{font-size:clamp(53px,13vw,72px)}.lead{margin:22px 0 26px}.hero-art{height:300px}.work{padding-bottom:80px}.section-head{display:block;margin-bottom:27px}.section-head>p{margin-top:18px}.projects{grid-template-columns:1fr;gap:18px}.featured{grid-column:auto;display:flex;min-height:0}.featured .art{height:230px;min-height:0}.featured .project-copy{padding:24px 26px 28px}.featured h3{font-size:27px;margin-top:22px}.about{padding:70px 0}.about-inner{display:block}.about-copy{margin-top:32px;font-size:16px}.footer{display:block;padding-block:48px}.footer-links{margin-top:30px}.swatches{grid-template-columns:repeat(2,1fr)}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}

h1,h2,h3{text-wrap:balance}p,li{text-wrap:pretty}.skip-link{position:absolute;left:16px;top:8px;padding:12px 16px;background:#f2eee5;color:#142f40;z-index:10;transform:translateY(-180%);border-radius:8px}.skip-link:focus{transform:translateY(0)}
@media (hover:hover) and (pointer:fine){.nav nav a:hover,.footer a:hover{color:#075b80}.about .text-link:hover{color:#c7e4eb}.project:hover{border-color:#6d8c96;background:#f7f3eb}.button:hover{background:#285b72}}
/* A four-part studio board puts the range of projects in the first view. */
.hero-art{display:grid;grid-template-columns:1.3fr .7fr;grid-template-rows:1fr 1fr;gap:12px;padding:18px}.hero-art:before{display:none}.hero-piece{min-width:0;min-height:0;overflow:hidden;border-radius:12px;display:flex;align-items:center;justify-content:center}.hero-piece img{width:100%;height:100%;object-fit:contain;display:block}.hero-tram{background:#273f49}.hero-tram img{object-fit:cover}.hero-globe{background:#e9ddca;padding:10px}.hero-home{background:#212820;padding:8px}.hero-tide{background:#cfdfdf;padding:10px}@media(max-width:620px){.hero-art{gap:8px;padding:12px}.hero-piece{border-radius:9px}}
/* The studio index is a calm, clickable introduction to the work. */
.hero-index{background:#17394b;color:#f2eee5;border-radius:24px;padding:42px 44px;min-height:480px;display:flex;flex-direction:column;justify-content:center}.hero-index-heading{font-size:14px;font-weight:600;color:#bdcbd0;margin:0 0 28px}.hero-index-row{display:grid;grid-template-columns:105px 1fr;gap:22px;border-top:1px solid #ffffff38;padding:22px 0}.hero-index-row>span{font-size:13px;color:#bdcbd0;line-height:1.5;padding-top:6px}.hero-index-row>div{display:flex;flex-wrap:wrap;gap:8px 22px}.hero-index-row a{font-size:clamp(20px,1.7vw,26px);font-weight:600;letter-spacing:-.04em;line-height:1.35}.hero-index a:focus-visible{outline-color:#f2eee5}@media(hover:hover) and (pointer:fine){.hero-index a:hover{color:#a9d5e2}}
/* Each card shares geometry but takes its colour from the project it presents. */
.project .art{background:transparent}.project{background:var(--card-bg,#e8e9e1);color:var(--card-ink,#1c3037);border-color:transparent}.project .project-meta,.project p{color:inherit;opacity:.76}.project h3{color:inherit}.project:hover{background:var(--card-bg,#e8e9e1)}.project.ink{--card-bg:#e9dfca;--card-ink:#26352e}.project.tide{--card-bg:#d3e3e1;--card-ink:#173f48}.project.energy{--card-bg:#e0e8cb;--card-ink:#293d27}.project.cannon{--card-bg:#142b39;--card-ink:#f0eee4}.project.tram{--card-bg:#d2ded7;--card-ink:#213b34}.project.home{--card-bg:#222b24;--card-ink:#ebe5d7}.project.buzz{--card-bg:#ecddc6;--card-ink:#423227}.project.six{--card-bg:#e1dfd6;--card-ink:#29383e}.project.slop{--card-bg:#1d1720;--card-ink:#f1e9e4}.project.vetra{--card-bg:#dfe6d7;--card-ink:#2c4737}.project.storm{--card-bg:#213f47;--card-ink:#f0eee4}.project.entrada{--card-bg:#eadfce;--card-ink:#48362a}.project.tafeli{--card-bg:#dce4d7;--card-ink:#2e4036}.project.usegha{--card-bg:#dfe6d4;--card-ink:#304435}.project.dusk{--card-bg:#303b2c;--card-ink:#e8e1ce}.project.tram .art{padding:0}.project.dusk .art{grid-area:1/2;padding:28px}.project.dusk .project-copy{grid-area:1/1}.project.dusk h3{font-weight:500}.project.slop .art img,.project.six .art img{width:auto}.project .art img{border-radius:4px}@media(hover:hover) and (pointer:fine){.project:hover{border-color:currentColor}}@media(max-width:620px){.hero-index{min-height:0;padding:28px 26px}.hero-index-row{grid-template-columns:82px 1fr;gap:12px;padding:17px 0}.hero-index-row a{font-size:20px}.project.dusk .art,.project.dusk .project-copy{grid-area:auto}.project.dusk .art{padding:26px}}
@media(max-width:620px){.nav nav a:nth-child(3){display:inline}.nav nav .nav-about,.nav nav .nav-contact{display:none}}
@media(max-width:620px){.nav nav{gap:10px}.nav .brand{font-size:20px}.nav .brand-mark{width:30px;height:30px;margin-right:8px}}
/* A project board follows the actual tafe.li display language. */
.station-board{background:#1a1d5a;border-radius:20px;padding:12px;box-shadow:0 16px 40px #1724311f;min-width:0}.station-screen{background:#000;overflow:hidden;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;display:flex;flex-direction:column;min-height:390px}.station-heading{background:#eb0000;color:#fff;display:flex;justify-content:space-between;gap:20px;padding:14px 18px;font-size:17px;font-weight:700}.station-cols,.station-rows a{display:grid;grid-template-columns:64px minmax(0,1fr) 105px;align-items:center;gap:10px}.station-cols{background:#fff;color:#555;padding:7px 14px;font-size:12px}.station-rows{display:flex;flex-direction:column;flex:1}.station-rows a{flex:1;min-height:48px;padding:6px 14px;background:#2d327d;color:#fff;border-bottom:1px solid #111;font-size:16px}.station-rows a:last-child{border:0}.station-rows b{font-family:Menlo,monospace;font-size:12px;background:#fff;color:#101010;padding:3px 5px;width:max-content;max-width:100%}.station-rows strong{font-weight:650;min-width:0;overflow-wrap:anywhere}.station-rows a>span{font-size:12px;color:#fff;opacity:.8}.station-rows a:focus-visible{outline:3px solid #fff;outline-offset:-4px;position:relative}@media(hover:hover) and (pointer:fine){.station-rows a:hover{background:#3948a2}}
/* Product artwork is legible at card size and keeps the original identity. */
.project:not(.featured) .art{height:260px;padding:22px}.project.energy .art img,.project.tide .art img,.project.ink .art img,.project.buzz .art img,.project.cannon .art img{width:auto;height:100%;max-width:100%;object-fit:contain}.project.vetra .art{padding:0}.project.vetra .art img{object-fit:cover;object-position:center 48%;border-radius:0}.project.entrada .art img{width:auto;height:70%;max-width:75%;object-fit:contain}.project:not(.featured) h3{margin-top:14px}.project:not(.featured) .project-copy{padding:22px 26px 28px}.project.tafeli .art{background:#e7e9db;padding:32px}.mini-board{width:min(100%,285px);background:#1a1d5a;padding:8px;border-radius:9px;box-shadow:0 12px 24px #20352624;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif}.mini-head{background:#eb0000;color:#fff;font-size:15px;font-weight:700;padding:8px 10px}.mini-columns{background:#fff;color:#555;font-size:10px;display:flex;gap:16px;padding:4px 8px}.mini-row{background:#2d327d;border-bottom:1px solid #111;color:#fff;padding:8px;display:flex;gap:13px;align-items:center;font-size:14px;font-weight:600}.mini-row:last-child{border:0}.mini-row b{background:#fff;color:#111;min-width:23px;text-align:center;font:700 12px Menlo,monospace;padding:3px}
@media(max-width:620px){.station-board{border-radius:15px;padding:8px}.station-screen{min-height:340px}.station-heading{font-size:15px;padding:12px}.station-cols,.station-rows a{grid-template-columns:52px minmax(0,1fr) 72px;gap:7px}.station-cols{font-size:11px;padding:6px 8px}.station-rows a{font-size:14px;padding:6px 8px}.station-rows a>span{font-size:11px}.station-rows b{font-size:10px}.project:not(.featured) .art{height:225px}}
.project.usegha .art,.project.storm .art{padding:0}.project.usegha .art img,.project.storm .art img{width:100%;height:100%;object-fit:cover;border-radius:0}
/* Show the globe itself, without the square icon's paper-coloured surround. */
.project.ink .art img{clip-path:circle(40% at 50% 50%);border:0;border-radius:0;height:100%;width:auto}
/* This is the buzzer artwork used by the actual iPhone app. */
.project.buzz .art img{height:min(100%,225px);width:auto;border:0;border-radius:0;filter:drop-shadow(0 12px 16px #3e281f22)}
.project.ink{--card-bg:#f3e9d7;border-color:transparent}
@media(hover:hover) and (pointer:fine){.project.ink:hover{border-color:transparent;box-shadow:0 8px 24px #26352e16}}

/* Match the card surface to the original cover artwork so it sits without a tile. */
.project.six{--card-bg:#f6f5f1;--card-ink:#222b38}
.project.slop{--card-bg:#000;--card-ink:#f1e9e4}
.project.six .art img,.project.slop .art img{border-radius:0}
/* A compact studio footer keeps the essentials on one line when space allows. */
.footer{padding-block:28px;align-items:center;gap:24px}
.footer>div:first-child{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px}
.footer .brand{font-size:20px;letter-spacing:-.8px}
.footer .brand-mark{width:32px;height:32px;margin-right:9px;border-radius:10px}
.footer p{margin:0;font-size:13px}
.footer-links{align-items:center;justify-content:flex-end;gap:12px 24px}
@media(max-width:760px){.footer{display:flex;flex-wrap:wrap;gap:18px;padding-block:25px}.footer-links{justify-content:flex-start;margin-top:0;gap:10px 22px}.footer-links a{padding-block:6px}}
@media(max-width:620px){.footer>div:first-child{width:100%;min-width:0}.footer p{min-width:0}}

/* Warm paper and a centred studio signature. */
:root{--paper:#ddd5c8;--white:#eee8db;--line:#c7bdae;--muted:#425963}
h1,h2,h3{text-wrap:balance}p,li{text-wrap:pretty}
.hero h1,.section-head h2,.about h2{overflow-wrap:anywhere;hyphens:auto}
.footer{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center}
.footer>div:first-child{grid-column:2;justify-content:center}
.footer-links{grid-column:3;justify-content:flex-end}
@media(max-width:1100px){.footer{display:flex;flex-direction:column;align-items:center;gap:16px}.footer>div:first-child{justify-content:center}.footer-links{justify-content:center;margin-top:0}}
@media(max-width:620px){.footer>div:first-child{justify-content:center;text-align:center}.footer-links{justify-content:center;gap:10px 20px}}

@media(max-width:380px){.nav nav{gap:8px}.nav nav a,.nav nav button{white-space:nowrap}}
/* Wheatpaste: a full-row split card keeps the 3, 2 and 1 column grids free of gaps. */
.project.wheat{--card-bg:#0e1113;--card-ink:#f2ede4;grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);min-height:330px}
.project.wheat .art{padding:0;height:100%;min-height:330px}
.project.wheat .art img{border-radius:0;object-fit:cover}
.project.wheat .project-copy{padding:32px}
.project.wheat h3{font-size:clamp(33px,3.2vw,46px);margin-top:auto}
@media(max-width:900px){.project.wheat{display:flex;min-height:0}.project.wheat .art{height:auto;min-height:0;aspect-ratio:1480/660}.project.wheat .project-copy{padding:24px 26px 28px}.project.wheat h3{font-size:27px;margin-top:22px}}
/* About band: a wider text column keeps each paragraph to two lines on desktop, in both languages. */
@media(min-width:901px){.about{padding:80px 0}.about-inner{grid-template-columns:minmax(0,.85fr) minmax(0,1.2fr);gap:56px;align-items:center}.about-copy{max-width:none;font-size:17px}.about h2{font-size:clamp(40px,3.7vw,54px)}}
/* Composed card art (2026-10-27): each card shows a full-bleed scene of its product, and the card colour continues the art edge. Sources: _build/shots/cards/. */
.projects .project .art{padding:0;background:transparent}
.projects .project:not(.featured):not(.wheat) .art{height:auto;aspect-ratio:5/3}
.projects .project .art img.card-art{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;border-radius:0;clip-path:none;filter:none;border:0}
@media(max-width:620px){.projects .project.featured .art{height:auto;min-height:0;aspect-ratio:5/3}}
.project.buzz{--card-bg:#fbf1df;--card-ink:#1a1618}
.project.cannon{--card-bg:#0c0d0f;--card-ink:#f0eee4}
.project.dusk{--card-bg:#293529;--card-ink:#e3d7bd}
.project.energy{--card-bg:#e4ecc9;--card-ink:#1f3524}
.project.entrada{--card-bg:#f4f3ef;--card-ink:#1b2b4b}
.project.home{--card-bg:#191917;--card-ink:#ece9e1}
.project.ink{--card-bg:#f3e9d7;--card-ink:#1c1917}
.project.six{--card-bg:#f6f5f2;--card-ink:#121316}
.project.slop{--card-bg:#000000;--card-ink:#e6e2d8}
.project.storm{--card-bg:#12100d;--card-ink:#f3eee4}
.project.tafeli{--card-bg:#c6b092;--card-ink:#2a221b}
.project.tide{--card-bg:#0b1519;--card-ink:#e3eff0}
.project.tram{--card-bg:#0a0c0b;--card-ink:#ededea}
.project.usegha{--card-bg:#f9eccc;--card-ink:#122941}
.project.vetra{--card-bg:#fbf7f1;--card-ink:#241f1a}