:root{color-scheme:dark;--sans:'Albert Sans',Arial,Helvetica,sans-serif;--serif:'Cormorant Garamond',Georgia,serif;--night:#081510;--fir:#10291f;--silver:#bec8cd;--snow:#edf1ef;--muted:#a3b5ab}*{box-sizing:border-box}body{margin:0;background:var(--night);color:var(--snow);font-family:var(--sans);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid var(--snow);outline-offset:6px}::selection{background:#7f9b8d;color:var(--night)}.skip{position:fixed;top:-100px;left:20px;z-index:10;padding:14px;background:var(--snow);color:var(--night)}.skip:focus{top:12px}.header{height:112px;position:absolute;z-index:3;top:0;left:0;width:100%;display:flex;align-items:center;padding:0 6vw}.wordmark{font-family:var(--serif);font-weight:500;font-size:29px;letter-spacing:-.02em;line-height:1}.wordmark span{display:block;font:500 9px var(--sans);text-transform:uppercase;letter-spacing:.3em;color:var(--muted);margin-top:10px}.hero{min-height:560px;height:100svh;position:relative;overflow:hidden;display:flex;align-items:center;background:linear-gradient(110deg,#081510 15%,#10291f 85%)}.aurora{position:absolute;inset:0;background:radial-gradient(ellipse at 87% 60%,#49675155,transparent 55%),linear-gradient(0deg,#081510,transparent 30%)}.cycles{position:absolute;width:min(69vw,1000px);height:auto;right:-9vw;top:46%;transform:translateY(-50%) rotate(-12deg);opacity:.85;animation:none}.hero-copy{position:relative;z-index:1;padding:130px 6vw;pointer-events:none}h1{max-width:610px;font-size:clamp(30px,3.5vw,53px);line-height:1.25;letter-spacing:-.045em;font-weight:400;margin:0;text-wrap:balance}.hero-bottom{position:absolute;bottom:33px;left:6vw;right:6vw;border-top:1px solid #bec8cd26;padding-top:22px;font-size:10px;letter-spacing:.4px;color:var(--muted)}@keyframes suspension{from{transform:translateY(-50%) rotate(-12deg)}to{transform:translate(-7px,-49%) rotate(-5deg)}}@media(max-width:900px){.cycles{width:85vw;right:-28vw;opacity:.55}h1{max-width:510px}}@media(max-width:600px){.header{height:95px}.wordmark{font-size:25px}.hero{min-height:500px}.hero-copy{padding:130px 6vw}h1{font-size:clamp(29px,7vw,39px);max-width:410px}.cycles{width:115vw;right:-44vw;top:46%;opacity:.38}.hero-bottom{font-size:9px}}@media(prefers-reduced-motion:reduce){.cycles{animation:none}}

/* A stronger typographic presence, with cool silver against the forest. */
h1{max-width:760px;font-size:clamp(30px,3.3vw,50px);line-height:1.16;font-weight:300;letter-spacing:-.035em;color:#9AAF9F}
.tagline-accent{color:#E0E7E8;background:linear-gradient(115deg,#BEC8CD 0%,#EDF1EF 38%,#B6C5CB 72%,#E0E7E8 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@media(max-width:900px){h1{max-width:620px}}
@media(max-width:600px){h1{font-size:clamp(35px,8.5vw,47px);max-width:450px;line-height:1.16}}
@media(forced-colors:active){.tagline-accent{background:none;-webkit-text-fill-color:currentColor;color:CanvasText}}

/* The tagline sits on the shared forest glass (materials.css), with its own organic outline. */
.hero-copy h1.glass{
  display:block;color:#9AAF9F;
  --radius:64px 88px 70px 92px / 62px 76px 66px 84px;
  padding:clamp(28px,3vw,46px);
  max-width:640px;
}
@media(max-width:900px){.hero-copy h1.glass{max-width:560px}}
@media(max-width:600px){.hero-copy h1.glass{padding:28px 24px;--radius:36px 48px 40px 52px;max-width:450px;font-size:clamp(26px,7vw,34px)}}

/* ITC Avant Garde Gothic — the Dunes text face, as in the programme. Subset to Latin text. */
@font-face{font-family:'Avant Garde Dunes';src:url('fonts/avantgarde-xlt.woff') format('woff');font-weight:300;font-display:swap}
@font-face{font-family:'Avant Garde Dunes';src:url('fonts/avantgarde-bk.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'Avant Garde Dunes';src:url('fonts/avantgarde-bkobl.woff') format('woff');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Avant Garde Dunes';src:url('fonts/avantgarde-md.woff') format('woff');font-weight:500;font-display:swap}
@font-face{font-family:'Avant Garde Dunes';src:url('fonts/avantgarde-demi.woff') format('woff');font-weight:600;font-display:swap}
/* The name is set in ITC Avant Garde Gothic Book. */
.wordmark{font-family:'Avant Garde Dunes','Albert Sans',Arial,sans-serif;font-weight:400;font-size:24px;letter-spacing:-.01em}
@media(max-width:600px){.wordmark{font-size:21px}}
/* Works: a glass control, and cards that fall onto the horizon line under gravity. */
@view-transition{navigation:auto}
.hero-copy{transition:transform 1.1s cubic-bezier(.22,1.2,.36,1)}
.header{justify-content:space-between;align-items:flex-end;height:auto;padding-top:34px}
/* About sits under the wordmark, the same glass as Works; the chevron points onward. */
/* The header spans the page but only its contents take the pointer, so cards can be reached beneath it. */
.header,.brand{pointer-events:none}
.header :is(a,button){pointer-events:auto}
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.glass.btn-glass.about-link{padding:13px 22px 13px 24px;font-size:14px}
.about-link .mark{transform:rotate(-45deg) translate(-1px,-1px)}
@media(max-width:600px){.header{padding-top:26px}.brand{gap:14px}}
.works-toggle{pointer-events:auto}
.glass.btn-glass.works-toggle{padding:13px 20px 13px 24px;font-size:14px}
/* Works sits up in the top-right corner, clear of the rings. */
.works-toggle{position:absolute;top:26px;right:3vw}
/* Plus while the works are away; turns to a close mark once they have been summoned. */
.summon{position:relative;width:11px;height:11px;transition:transform .8s cubic-bezier(.34,1.56,.64,1)}
.summon::before,.summon::after{content:"";position:absolute;left:0;top:5px;width:11px;height:1.5px;border-radius:1px;background:currentColor}
.summon::after{transform:rotate(90deg)}
.works-toggle[aria-expanded="true"] .summon{transform:rotate(135deg)}
.works{position:absolute;inset:0;z-index:2;pointer-events:none}
/* Every work is a glass plate; only pieces with a page are links. */
.work-card{
  --radius:16px;
  position:absolute;left:0;top:0;width:196px;height:80px;padding:13px 16px 12px;
  display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;gap:0;
  pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;
  will-change:transform;transition:box-shadow .5s ease,opacity .6s ease;
}
.work-card.dragging{cursor:grabbing}
.work-card[data-world="dunes"]{font-family:'Avant Garde Dunes','Albert Sans',Arial,sans-serif}
/* Work titles in ITC Avant Garde Gothic Book, like the name; Dunes keeps its Nord lettering. */
.work-title{font-family:'Avant Garde Dunes','Albert Sans',Arial,sans-serif;font-weight:400;font-size:20px;line-height:1.05;letter-spacing:-.015em;color:var(--snow)}
.work-title.dunes-type{font-family:'Nord','Albert Sans',Arial,sans-serif;font-weight:400;font-size:25px;letter-spacing:.07em;line-height:1.1}
/* Title and duration share the top line; the instrumentation sits beneath. */
.work-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.work-time{font-size:11px;font-weight:500;letter-spacing:.04em;color:#C3D0C9;white-space:nowrap}
.work-foot{font-size:10.5px;font-weight:500;letter-spacing:.03em;color:#C3D0C9;white-space:nowrap}
.work-arrow{display:inline-block;font-size:12px;margin-left:5px;transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
.work-card:hover .work-arrow{transform:translateX(4px)}
.work-card.settle{transition:opacity .6s ease}
.works.reduced .work-card{opacity:0;transition:opacity .6s ease}
.works.reduced.open .work-card{opacity:1}
/* Where a card strikes the horizon, the line briefly catches the light. */
.floor-glint{position:absolute;z-index:1;left:0;width:340px;height:2px;margin-left:-170px;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,rgba(237,241,239,.9),rgba(190,200,205,.25) 55%,transparent);filter:blur(.4px)}
.floor-glint.flash{animation:glint 1.4s ease-out}
@keyframes glint{0%{opacity:0}8%{opacity:1}100%{opacity:0}}

@media(prefers-reduced-motion:reduce){.hero-copy{transition:none}}
/* Physics owns the cards' transform; only light and fades transition. */
.works .work-card{transition:box-shadow .5s ease}
.works.reduced .work-card{transition:opacity .6s ease}
/* Stained Glass: nearly clear at rest, with a hint of the score's colours. On hover the glass
   frosts over from left to right in its vermilion-to-sky-blue gradient. */
.work-card.stained{background:
  radial-gradient(ellipse at 5% 0%,rgba(255,236,220,.07),transparent 55%),
  linear-gradient(120deg,rgba(226,92,56,.14),rgba(222,168,96,.06) 50%,rgba(84,176,206,.13))}
.work-card.stained::after{background:radial-gradient(clamp(140px,55%,320px) circle at var(--mx) var(--my),rgba(255,240,226,calc(.04 + .12 * var(--glow) + .18 * var(--lit))),transparent 70%)}
.frost{position:absolute;inset:1px;width:calc(100% - 2px);height:calc(100% - 2px);z-index:-1;border-radius:inherit;overflow:hidden;pointer-events:none}
/* Frosted, but still glass: the colour stays translucent so the blurred rings, rim and highlight show through. */
.frost>g{opacity:.55}
/* The side glow is the card's own frost, blurred and spilling past its edges: it lights up patch by
   patch as the frost forms, in the colours beneath. Masked to the outside of the card. */
.frost-glow{position:absolute;inset:-40px;width:calc(100% + 80px);height:calc(100% + 80px);z-index:-2;pointer-events:none;overflow:visible;opacity:.7;
  -webkit-mask:linear-gradient(#000 0 0) center/calc(100% - 88px) calc(100% - 88px) no-repeat,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) center/calc(100% - 88px) calc(100% - 88px) no-repeat exclude,linear-gradient(#000 0 0)}
/* Over the frost, the reflections of a glass plate: a lit top edge, two diagonal streaks and the
   pointer's bloom. They come in with the hover (--lit), above the colour. */
.work-card:has(.frost)::after{background:
  linear-gradient(180deg,rgba(255,255,255,calc(.32 * var(--lit))),transparent 16%),
  linear-gradient(112deg,transparent 14%,rgba(255,255,255,calc(.3 * var(--lit))) 24%,rgba(255,255,255,calc(.08 * var(--lit))) 33%,transparent 38%,
    transparent 58%,rgba(255,255,255,calc(.18 * var(--lit))) 64%,transparent 70%),
  linear-gradient(0deg,rgba(8,21,16,calc(.16 * var(--lit))),transparent 30%),
  radial-gradient(clamp(140px,55%,320px) circle at var(--mx) var(--my),rgba(255,255,255,calc(.04 + .1 * var(--glow) + .14 * var(--lit))),transparent 70%)}
.works .work-card:has(.frost):is(:hover,:focus-visible){box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(255,255,255,.14),
    inset 1px 0 0 rgba(255,255,255,.18),
    inset 0 0 18px rgba(255,255,255,.1),
    0 0 36px rgba(214,236,224,.12),
    0 24px 60px rgba(0,0,0,.28)}
.work-card:has(.frost) :is(.work-title,.work-time,.work-foot){text-shadow:0 1px 5px rgba(8,21,16,.45)}
.works .work-card:has(.frost){transition:box-shadow .7s ease,--lit .7s ease,backdrop-filter 1s ease,-webkit-backdrop-filter 1s ease}
.works .work-card:has(.frost):is(:hover,:focus-visible){-webkit-backdrop-filter:blur(8px) saturate(130%);backdrop-filter:blur(8px) saturate(130%)}
.work-title.long{font-size:17px;white-space:nowrap}
/* Hovering a work lights it up; the halo follows the same light the rest of the page uses. */
.works .work-card{transition:box-shadow .7s ease,--lit .7s ease}
.works .work-card:is(:hover,:focus-visible){--lit:1;box-shadow:
    inset 0 2px 1px rgba(255,255,255,.2),
    inset 0 -1px 1px rgba(216,235,223,.14),
    inset 14px 16px 38px rgba(224,239,229,.07),
    0 0 46px rgba(214,236,224,.13),
    0 28px 70px rgba(0,0,0,.26)}
/* The header buttons light up the same way, with a halo sized to the smaller glass. */
.header .btn-glass{transition:transform .55s cubic-bezier(.34,1.56,.64,1),box-shadow .7s ease,--lit .7s ease}
.header .btn-glass:is(:hover,:focus-visible){--lit:1;box-shadow:
    inset 0 2px 1px rgba(255,255,255,.2),
    inset 0 -1px 1px rgba(216,235,223,.14),
    inset 8px 10px 24px rgba(224,239,229,.07),
    0 0 30px rgba(214,236,224,.14),
    0 18px 44px rgba(0,0,0,.24)}
.header .btn-glass:active{transition-duration:.12s,.7s,.7s}
@media(prefers-reduced-motion:reduce){.works .work-card,.header .btn-glass{transition:none}}

/* The About handoff (carry.js), in three beats: the homepage falls away around the name, which holds
   still, and the About button's glass melts off its word; then about.html takes the name and the word
   and grows them forward. Coming back, they settle into place here while the homepage returns
   around them and the button's glass re-forms. */
[data-carry-part]{transform-origin:0 0}
.wordmark .wm-name{font:inherit;display:inline-block}
@keyframes recede{to{opacity:0;transform:scale(.97);filter:blur(12px)}}
@keyframes return{from{opacity:0;transform:scale(.98);filter:blur(10px)}}
html body.leaving :is(main,.works-toggle,.wordmark>span){animation:recede .4s cubic-bezier(.4,0,.2,1) forwards}
html.carried :is(main,.works-toggle,.wordmark>span){animation:return 1.2s .4s cubic-bezier(.2,.75,.15,1) both}
/* The button's chevron only fades, so it keeps its angle. */
@keyframes fade{to{opacity:0}}
@keyframes unfade{from{opacity:0}}
html body.leaving .about-link .mark{animation:fade .3s ease forwards}
html.carried .about-link .mark{animation:unfade .6s 1.1s ease both}
/* The About button's glass, drawn at strength --gi so it can melt away and re-form around the word. */
@property --gi{syntax:'<number>';inherits:true;initial-value:1}
.glass.about-link{
  background:
    radial-gradient(ellipse at 5% 0%,rgba(224,239,229,calc(.085 * var(--gi))),transparent 55%),
    linear-gradient(135deg,rgba(164,196,176,calc(.055 * var(--gi))),rgba(16,41,31,calc(.12 * var(--gi))) 55%,rgba(190,200,205,calc(.05 * var(--gi))));
  -webkit-backdrop-filter:blur(calc(2px * var(--gi))) saturate(calc(100% + 15% * var(--gi)));
  backdrop-filter:blur(calc(2px * var(--gi))) saturate(calc(100% + 15% * var(--gi)))}
.header .glass.about-link:not(:hover):not(:focus-visible){box-shadow:
    inset 0 2px 1px rgba(255,255,255,calc(.12 * var(--gi))),
    inset 0 -1px 1px rgba(216,235,223,calc(.1 * var(--gi))),
    0 24px 65px rgba(0,0,0,calc(.18 * var(--gi)))}
.about-link::before,.about-link::after{opacity:var(--gi)}
@keyframes melt{to{--gi:0}}
@keyframes reform{from{--gi:0}}
html body.leaving .about-link{animation:melt .4s ease forwards}
html.carried .about-link{animation:reform .9s 1s ease both}
@media(prefers-reduced-motion:reduce){
  html body.leaving :is(main,.works-toggle,.wordmark>span,.about-link .mark){animation:none;opacity:0}
  html.carried :is(main,.works-toggle,.wordmark>span,.about-link,.about-link .mark){animation-duration:.3s;animation-delay:0s}}