/* ───────────────────────────────────────────────────────────────────────── The Duke of AI — folio page styles Shared by all nine folio pages under /folio/. Lifted verbatim from the old folio.html so the pages look exactly as they did before. ───────────────────────────────────────────────────────────────────────── */ :root{ --canvas:#0a0a0b; --surface:#111113; --hairline:#2a2a2f; --paper:#f3efe6; --secondary:#c9c6bf; --muted:#8a8a86; --faint:#63615c; --gold:#c9a25a; --gold-hi:#e0c37e; --gold-soft:rgba(201,162,90,.14); --gold-line:rgba(201,162,90,.42); --gold-dim:rgba(201,162,90,.75); /* gold, stepped back - form placeholders */ /* a gold hairline, for a washed panel */ --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,sans-serif; --text:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif; --maxw:1120px; --nav-h:53px; /* .nav-inner 52px + 1px border */ /* Motion. Three durations and one curve, so hover and open timings stop being invented per component. The interaction range only - ambient loops (the corridor belt, the handbook page turn) keep their own long values. Defined in THREE places because the site has three CSS islands: css/folio.css (59 pages), css/vault.css (87, and loads no folio) and index.html's inline block, which loads neither. Keep them in step by hand, the same way the nav pill rules already are. Added 8 Oct 2026. */ --dur-fast:.15s; /* small flips: colour, border, opacity, small transforms */ --dur-base:.25s; /* the workhorse: cards, tiles, panels, fades */ --dur-slow:.3s; /* larger moves: cards that lift, things that open */ --ease-std:cubic-bezier(.4,0,.2,1); } *{ box-sizing:border-box; margin:0; padding:0; } /* The nav is sticky, so a section arrived at from a #link would otherwise start underneath it, with the first line of its heading hidden. This reserves the nav's height plus a little air for every fragment landing. --nav-h is .nav-inner's height plus its 1px border; keep them in step. */ html{ -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--nav-h) + 22px); } body{ background:var(--canvas); color:var(--paper); font-family:var(--text); line-height:1.47; -webkit-font-smoothing:antialiased; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; } .section{ padding:clamp(40px,6vw,72px) 0 clamp(56px,8vw,92px); } /* nav */ .nav{ position:sticky; top:0; z-index:20; background:rgba(10,10,11,.72); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--hairline); } .nav-inner{ max-width:var(--maxw); margin:0 auto; padding:0 24px; height:52px; display:flex; align-items:center; justify-content:space-between; } .brand{ display:flex; align-items:center; gap:10px; } .brand img{ width:24px; height:24px; object-fit:contain; } .brand span{ font-family:var(--display); font-size:17px; font-weight:600; letter-spacing:-.01em; color:var(--paper); } /* The nav links carry the same treatment as the artist chips on the Prompt Creator - outline pill, and on hover the border and the text go gold over a wash of gold. Uppercase and the letter-spacing come with it: they are most of why that shape reads the way it does. One stylesheet, so this reaches all 21 pages at once. */ .nav-links{ display:flex; align-items:center; gap:10px; } .nav-links a{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--secondary); background:transparent; border:1px solid var(--hairline); border-radius:999px; padding:6px 13px; white-space:nowrap; transition:border-color var(--dur-fast) ease, color var(--dur-fast) ease, background var(--dur-fast) ease; } .nav-links a:hover{ border-color:var(--gold); color:var(--gold); background:var(--gold-soft); } .nav-links a:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; } /* Get in touch keeps its emphasis: gold from the start rather than on hover */ .nav-cta{ color:var(--gold) !important; border-color:var(--gold-line) !important; font-weight:500; } .nav-cta:hover{ border-color:var(--gold) !important; } /* The two knowledge-base links are the widest in the nav, and with them the row needs about 870px. Below that it overflowed on portrait tablets, so they are shown only where they fit. Every other width behaves exactly as it did before they were added. An eighth link arrived on 19 Sep 2026 - the Vault - and the row needs about 900px with it, measured rather than guessed: seven links plus the brand used 814 of 880, and a Vault pill is 69px plus a 10px gap. So the break moved from 879 to 919. Below that the row wraps, or becomes the panel when js/nav.js has run. THE NUMBER LIVES IN THREE PLACES AND THEY MUST AGREE: this file, the homepage's inline copy of these rules, and the matchMedia in js/nav.js that closes the panel on the way back up. A panel that closes at a width where the row does not yet fit leaves the nav overflowing with no way to open it. */ /* ---------- the mobile nav ---------- Built so the site works with JavaScript off: below 920px the links simply wrap onto a second row and all six stay reachable. js/nav.js then adds .has-nav-js, which is what licenses the collapsed panel below. Nothing here hides a link unless the script that can reveal it again has run. */ .nav-burger{ display:none; align-items:center; justify-content:center; width:38px; height:32px; padding:0; background:transparent; border:1px solid var(--hairline); border-radius:999px; color:var(--secondary); cursor:pointer; transition:border-color var(--dur-fast) ease, color var(--dur-fast) ease, background var(--dur-fast) ease; } .nav-burger:hover{ border-color:var(--gold); color:var(--gold); background:var(--gold-soft); } .nav-burger:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; } .nav-burger span{ display:block; width:15px; height:9px; position:relative; } .nav-burger span::before, .nav-burger span::after{ content:""; position:absolute; left:0; right:0; height:1px; background:currentColor; transition:transform var(--dur-fast) ease, opacity var(--dur-fast) ease; } .nav-burger span::before{ top:0; } .nav-burger span::after{ bottom:0; } .nav-burger[aria-expanded="true"] span::before{ transform:translateY(4px) rotate(45deg); } .nav-burger[aria-expanded="true"] span::after{ transform:translateY(-4px) rotate(-45deg); } @media (max-width:919px){ /* No JS: the row wraps and everything stays on screen. */ .nav-inner{ flex-wrap:wrap; height:auto; padding-top:10px; padding-bottom:10px; row-gap:10px; } .nav-links{ flex-wrap:wrap; row-gap:8px; } .nav-links a.nav-kb{ display:inline-block; } /* With JS: the same links become a panel under the header. */ .has-nav-js .nav-inner{ flex-wrap:nowrap; height:52px; padding-top:0; padding-bottom:0; } .has-nav-js .nav-burger{ display:inline-flex; } .has-nav-js .nav-links{ position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch; gap:8px; padding:14px 24px 18px; background:rgba(10,10,11,.96); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--hairline); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity var(--dur-fast) ease, transform var(--dur-fast) ease, visibility var(--dur-fast); } .has-nav-js .nav-links a{ text-align:center; padding:10px 13px; } .has-nav-js .nav-links.is-open{ opacity:1; visibility:visible; transform:none; } } /* folio header */ .back{ display:inline-flex; align-items:center; gap:6px; font-size:13px; letter-spacing:.02em; color:var(--gold); margin-bottom:22px; transition:color var(--dur-base) ease; } .back:hover{ color:var(--gold-hi); } .folio-head{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:start; text-align:left; margin-bottom:clamp(34px,5vw,56px); } .folio-head h1{ font-family:var(--display); font-weight:600; font-size:clamp(2.2rem,1.2rem + 3vw,3.2rem); line-height:1.08; letter-spacing:-.014em; color:var(--paper); } .folio-tag{ font-family:var(--display); font-weight:300; font-size:clamp(1.1rem,.9rem + .8vw,1.45rem); color:var(--gold); margin-top:12px; } .folio-intro{ font-family:var(--display); font-weight:300; font-size:clamp(1.05rem,.92rem + .5vw,1.28rem); line-height:1.6; color:var(--secondary); max-width:54ch; margin:0; text-wrap:pretty; } @media (max-width:760px){ .folio-head{ grid-template-columns:1fr; gap:14px; } } /* uniform gallery grid */ .gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(clamp(150px,24vw,250px),1fr)); gap:16px; } .g-item{ position:relative; aspect-ratio:1/1; border-radius:8px; overflow:hidden; border:1px solid var(--hairline); cursor:pointer; padding:0; background:none; transition:transform var(--dur-base) ease, border-color var(--dur-base) ease; } .g-item:hover{ transform:translateY(-3px); border-color:var(--gold); } .g-item img{ width:100%; height:100%; object-fit:cover; } .g-item .ph-mark{ position:absolute; inset:0; display:grid; place-items:center; opacity:.14; } .g-item .ph-mark img{ width:46%; } /* The wall's filter hides tiles rather than removing them, so every work stays in the HTML. Stated explicitly rather than left to the browser's [hidden] default: .g-item has no display of its own today, but the day somebody gives it one the tiles would silently stop hiding. people.css carries the same line for .ip-person, for the same reason. */ .g-item[hidden]{ display:none; } /* shown only when the filter matches nothing */ .art-none{ font-family:var(--display); font-weight:300; font-size:clamp(1rem,.9rem + .4vw,1.15rem); color:var(--secondary); text-align:center; padding:clamp(40px,8vw,90px) 0; margin:0; } /* footer */ .foot{ background:var(--canvas); border-top:1px solid var(--hairline); padding:44px 0 34px; } .foot-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:28px; } .foot-brand{ display:flex; align-items:center; gap:10px; } .foot-brand img{ width:22px; height:22px; object-fit:contain; } .foot-brand span{ font-family:var(--display); font-weight:600; font-size:15px; color:var(--paper); } .foot-col h2{ font-size:12px; color:var(--faint); font-weight:600; letter-spacing:.02em; margin-bottom:12px; } .foot-col a{ display:block; font-size:13px; color:var(--muted); padding:5px 0; } .foot-col a:hover{ color:var(--paper); } .foot-fine{ border-top:1px solid var(--hairline); margin-top:32px; padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12px; color:var(--faint); } /* The one link in the fine print. --faint is 3.19:1 and fails the contrast rule, so the link takes the gold rather than inheriting it. */ .foot-fine .foot-privacy{ color:var(--gold); } .foot-fine .foot-privacy:hover{ color:var(--gold-hi); } /* ---------- lightbox (two-panel) ---------- */ .lightbox{ position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:clamp(56px,7vw,80px) clamp(56px,7vw,88px); background:rgba(6,6,7,.95); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); } .lightbox.open{ display:flex; } .lb-inner{ display:flex; flex-direction:column; gap:clamp(14px,2.4vw,26px); max-width:100%; max-height:100%; } .lb-meta{ text-align:left; } .lb-num{ font-family:var(--text); font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:6px; } .lb-num:empty{ display:none; } .lb-name{ font-family:var(--display); font-weight:600; font-size:clamp(19px,2.2vw,30px); letter-spacing:-.01em; color:var(--paper); } .lb-year{ font-family:var(--text); font-size:clamp(12px,1.3vw,15px); letter-spacing:.02em; color:var(--gold); margin-top:3px; } .lb-prov{ text-align:center; font-family:var(--display); font-style:italic; font-size:clamp(13px,1.3vw,15px); line-height:1.4; color:var(--secondary); max-width:44ch; margin:4px auto 0; text-wrap:balance; } .lb-prov:empty{ display:none; } .lb-pair{ display:flex; gap:clamp(16px,2.6vw,36px); align-items:center; justify-content:center; min-height:0; } .lb-box{ position:relative; display:flex; align-items:center; justify-content:center; } .lb-box img{ max-height:min(66vh,760px); max-width:43vw; object-fit:contain; display:block; border:4px solid var(--paper); border-radius:2px; box-shadow:0 14px 50px rgba(0,0,0,.55); } .lb-box.ph{ width:min(40vw,520px); aspect-ratio:1/1; border:1px solid var(--hairline); border-radius:8px; display:grid; place-items:center; } .lb-box.ph.wide{ aspect-ratio:16/10; } .lb-box.ph img{ width:24%; max-width:none; opacity:.5; border:0; box-shadow:none; } .lb-note{ position:fixed; bottom:22px; left:0; right:0; text-align:center; font-family:var(--display); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); pointer-events:none; } .lb-close,.lb-prev,.lb-next{ position:fixed; z-index:101; background:rgba(20,20,22,.6); border:1px solid var(--hairline); color:var(--paper); border-radius:50%; width:46px; height:46px; font-size:22px; line-height:1; cursor:pointer; display:grid; place-items:center; transition:border-color var(--dur-base), color var(--dur-base), background var(--dur-base); } .lb-close:hover,.lb-prev:hover,.lb-next:hover{ border-color:var(--gold); color:var(--gold); background:rgba(20,20,22,.85); } .lb-close{ top:20px; right:20px; } .lb-prev{ left:20px; top:50%; transform:translateY(-50%); } .lb-next{ right:20px; top:50%; transform:translateY(-50%); } @media (max-width:760px){ .lightbox{ padding:64px 14px 56px; } .lb-pair{ flex-direction:column; gap:14px; overflow:auto; } .lb-box img{ max-width:88vw; max-height:38vh; } .lb-box.ph{ width:80vw; } } @media (max-width:560px){ /* The nav used to be hidden entirely below here, leaving a phone with Get in touch and nothing else. The menu above covers this width now. */ .foot-grid{ grid-template-columns:1fr 1fr; } .lb-close,.lb-prev,.lb-next{ width:40px; height:40px; font-size:19px; } .lb-prev{ left:8px; } .lb-next{ right:8px; } } /* ---------- focus states ---------- */ /* Every interactive thing gets a visible gold ring when reached by keyboard. */ a:focus-visible, button:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; } .g-item:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; } .lb-close:focus-visible, .lb-prev:focus-visible, .lb-next:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-color:var(--gold); color:var(--gold); } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion:reduce){ *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } .g-item:hover{ transform:none; } }