/* ============================================================ KALÓ HAUS — v2 Editorial rebuild. The reference is LOVR: very few elements per screen, enormous scale contrast, tiny tracked out labels doing the signposting, and space used as a material rather than a gap. Rules of the system 1. One idea per screen. If two ideas are fighting, split them. 2. Only three type sizes on a page: the label, the statement, the read. 3. Nothing is decorated. Weight, size and space do all the work. 4. Motion is slow and singular. Nothing bounces. ============================================================ */ /* ---------- Faces ---------- Four families, one job each, all WOFF2. Black Mango carries statements and figures, Newsreader carries everything read, Editors Note appears only as an italic on a statement tail, and Trueno carries every label, caption, table and control. Trueno and Newsreader are SIL Open Font License. */ @font-face{font-family:'Black Mango';src:url('fonts/BlackMango-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Black Mango';src:url('fonts/BlackMango-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:'Newsreader';src:url('fonts/Newsreader-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Newsreader';src:url('fonts/Newsreader-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:'Newsreader';src:url('fonts/Newsreader-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'Newsreader';src:url('fonts/Newsreader-500-italic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap} /* italic only, and deliberately so. there is no upright Editors Note here */ @font-face{font-family:'Editors Note';src:url('fonts/EditorsNote-ExtralightItalic.woff2') format('woff2');font-weight:200;font-style:italic;font-display:swap} @font-face{font-family:'Editors Note';src:url('fonts/EditorsNote-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:'Editors Note';src:url('fonts/EditorsNote-SemiboldItalic.woff2') format('woff2');font-weight:600;font-style:italic;font-display:swap} /* the upright cut, loaded for the wordmark only. Running text still uses the italic: that rule has not changed. */ @font-face{font-family:'Editors Note';src:url('fonts/EditorsNote-Semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:'Editors Note';src:url('fonts/EditorsNote-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:'Trueno';src:url('fonts/Trueno-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap} @font-face{font-family:'Trueno';src:url('fonts/Trueno-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Trueno';src:url('fonts/Trueno-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:'Trueno';src:url('fonts/Trueno-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:'Trueno';src:url('fonts/Trueno-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap} /* ---------- Tokens ---------- */ :root{ --mahogany:#760621; --cream:#f3eee6; --coral:#ff5e5e; --rule:rgba(243,238,230,0.16); --rule-dark:rgba(118,6,33,0.16); --display:'Black Mango', Georgia, serif; /* statements and figures only */ --text:'Newsreader', Georgia, serif; /* everything read at length */ --accent:'Editors Note', Georgia, serif; /* ITALIC ONLY, on a statement tail */ --small:'Trueno', 'Helvetica Neue', sans-serif; /* labels, captions, tables, controls */ --ease:cubic-bezier(.22,.61,.36,1); --slow:cubic-bezier(.16,1,.3,1); --gut:clamp(20px,5vw,64px); /* page margin */ --wrap:1560px; /* wide, LOVR runs near full bleed */ --band:clamp(96px,15vh,210px); /* vertical rhythm between ideas */ } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0;background:var(--mahogany);color:var(--cream); font-family:var(--text);font-weight:400; /* Editor's Note has a small x height for its point size, so everything is set larger than a sans would be to read comfortably */ font-size:clamp(1.26rem,1.45vw,1.56rem);line-height:1.64; letter-spacing:.004em; -webkit-font-smoothing:antialiased; } img,video,svg{max-width:100%;display:block} a{color:inherit;text-decoration:none} ::selection{background:var(--coral);color:var(--cream)} /* ---------- Structure ---------- */ .shell{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)} .shell-narrow{max-width:1080px;margin:0 auto;padding-inline:var(--gut)} .band{padding-block:var(--band)} .band-tight{padding-block:clamp(56px,8vh,110px)} /* A footnote, not a section. It only has to be legible to somebody who goes looking for it, so it takes the least room the page can give it. */ .note-band{padding-block:clamp(20px,2.6vh,34px)} .note{ margin:0;font-family:var(--text);font-weight:400; font-size:clamp(.76rem,.8vw,.86rem);line-height:1.55; opacity:.4;max-width:80ch; } .bleed{width:100%} .rule{height:1px;background:var(--rule);border:0;margin:0} /* the one grid the whole site sits on */ .grid12{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(18px,2.4vw,40px)} .c-1-6{grid-column:1 / span 6} .c-1-5{grid-column:1 / span 5} .c-1-7{grid-column:1 / span 7} .c-7-12{grid-column:7 / span 6} .c-8-12{grid-column:8 / span 5} .c-6-12{grid-column:6 / span 7} .c-full{grid-column:1 / -1} @media(max-width:900px){ .c-1-6,.c-1-5,.c-1-7,.c-7-12,.c-8-12,.c-6-12{grid-column:1 / -1} } /* ---------- Type ---------- */ /* 1 · the label. tiny, tracked out, never more than four words */ .label{ font-family:var(--small);font-weight:600;font-style:normal; font-size:clamp(.78rem,.92vw,.94rem); letter-spacing:.22em;text-transform:uppercase; color:var(--coral);margin:0 0 clamp(18px,2.4vw,34px); } .label-lc{text-transform:none;letter-spacing:.1em;font-size:clamp(.84rem,1vw,1rem)} .label-quiet{color:var(--cream);opacity:.5} /* 2 · the statement. Black Mango, set enormous and tight */ /* Tracking is an optical thing, not a fixed one. A single value across a range from 24px to 118px is always wrong at one end: too loose when the type is huge, too tight when it is small. Each size gets its own, and the leading tightens as the type grows, the way it would be set by hand. */ .statement{ font-family:var(--display);font-weight:400; font-size:clamp(2.6rem,7.4vw,7.4rem); line-height:.92;letter-spacing:-.026em; margin:0;text-wrap:balance; /* the quote or capital hangs into the margin rather than pushing the whole line in, so the left edge stays true against the rule above */ hanging-punctuation:first last; font-kerning:normal; font-variant-ligatures:common-ligatures contextual; /* a display face carries a left side bearing, which reads as the heading sitting a hair right of everything above it. This pulls it back true. */ margin-left:-.022em; } .statement-bold{font-weight:700} .statement-md{font-size:clamp(2rem,4.6vw,4.2rem);line-height:.98;letter-spacing:-.019em} .statement-sm{font-size:clamp(1.5rem,2.6vw,2.5rem);line-height:1.06;letter-spacing:-.012em} /* the italic is a different face at a different weight, so it needs its own tracking or it sits looser than the roman beside it */ .statement em{ font-family:var(--accent);font-weight:400;font-style:italic; letter-spacing:-.012em; } .statement-md em{letter-spacing:-.008em} .statement-sm em{letter-spacing:-.004em} /* nothing below tablet gets the optical pull, since the bearing is only visible once the type is genuinely large */ @media(max-width:760px){ .statement{margin-left:0;letter-spacing:-.018em} } /* The duo. One section on the home page deliberately breaks the eyebrow then heading pattern that runs everywhere else. Two sentences, one under the other, the second thrown across the page and set in the reading face, so the shape of the type carries the same split the words do. */ .duo{ font-family:var(--display);font-weight:400; font-size:clamp(1.9rem,4.6vw,4.2rem);line-height:1.06;letter-spacing:-.014em; margin:0 0 clamp(46px,6.2vw,92px); } .duo span{display:block} .duo .duo-b{ text-align:right;color:var(--coral); font-family:var(--accent);font-weight:200;font-style:italic;letter-spacing:-.004em; } .bone .duo .duo-b{color:var(--coral)} /* thrown right reads as a stray line on a narrow screen, so it steps in from the left instead and keeps the pair legible */ @media(max-width:760px){ .duo .duo-b{text-align:left;padding-left:1.6em} } /* 3 · the read. Editor's Note, long measure, quiet */ .read{ font-size:clamp(1.36rem,1.62vw,1.78rem); line-height:1.6;max-width:46ch;margin:0; opacity:.9;font-weight:300; } .read + .read{margin-top:1em} .read-lg{font-size:clamp(1.6rem,2.15vw,2.35rem);line-height:1.46;opacity:.94;max-width:36ch} /* .read-sm is read, not labelled: 258 of them, median 36 words. It wore the label face only because it inherited Figtree's old job. */ .read-sm{font-family:var(--text);font-weight:400;font-size:clamp(1.02rem,1.14vw,1.19rem); line-height:1.62;letter-spacing:0;opacity:.82;max-width:52ch} .lede{ font-family:var(--accent);font-weight:200;font-style:italic; font-size:clamp(1.7rem,3.3vw,2.95rem);line-height:1.2; letter-spacing:-.014em;max-width:20ch;margin:0; text-wrap:balance;hanging-punctuation:first last; } .coral{color:var(--coral)} .haus{color:var(--coral)} /* ---------- Navigation ---------- */ .nav{ position:fixed;top:0;left:0;right:0;z-index:80; padding:clamp(16px,2.2vw,28px) var(--gut); display:flex;align-items:center;justify-content:space-between; mix-blend-mode:normal;transition:background .5s var(--ease),padding .5s var(--ease); } .nav.stuck{background:rgba(118,6,33,.92);backdrop-filter:saturate(140%) blur(14px);padding-block:clamp(12px,1.5vw,18px)} .wordmark{ font-family:var(--display);font-weight:400; font-size:clamp(1.05rem,1.5vw,1.35rem);letter-spacing:.02em;line-height:1; transition:color .35s var(--ease); } /* cream on cream is invisible, so the mark turns over for as long as a pale band is passing behind the header. The script reads what is actually under the mark rather than assuming, and sets .on-cream. */ .nav.on-cream .wordmark, .nav.on-cream .nav-toggle{color:var(--mahogany)} .nav.on-cream .wordmark .sub{color:var(--coral)} /* On a phone the header lays down its own mahogany bar as soon as you scroll, so what is behind it stops mattering there. Turning the mark over on top of that bar would hide it a second way, mahogany on mahogany, so the flip is called off for as long as the bar is up. */ @media(max-width:760px){ .nav.stuck.on-cream .wordmark, .nav.stuck.on-cream .nav-toggle{color:var(--cream)} .nav.stuck.on-cream .wordmark .sub{color:var(--coral)} } /* lowercase throughout, the way the logo is actually drawn */ /* Measured off assets/logo.png: the sub sits at 80% of the wordmark's width and 52% of its height, flush left, in the upright Editor's Note. */ .wordmark .sub{ display:block;font-family:var(--accent);font-weight:400;font-style:normal; color:var(--coral);font-size:.52em;letter-spacing:.012em; text-transform:lowercase;margin-top:.34em;line-height:1; } .nav-links{display:flex;gap:clamp(18px,2.6vw,40px);align-items:center} .nav-links a{ font-family:var(--small);font-weight:500; font-size:clamp(.78rem,.88vw,.9rem);letter-spacing:.2em;text-transform:uppercase; opacity:.7;transition:opacity .4s var(--ease),color .4s var(--ease); } .nav-links a:hover,.nav-links a[aria-current]{opacity:1;color:var(--coral)} .nav-toggle{display:none;background:none;border:0;color:inherit;font-size:1.3rem;cursor:pointer;padding:6px} /* the full screen panel covers the hamburger that opened it, so the way back out has to live inside the panel */ .nav-close{display:none} /* On a wide screen the navigation stands on its side against the right edge, reading bottom to top, and stays put as you scroll. It is the clearest single borrowing from LOVR and it hands the whole top of the page back to the statement. */ .side-tab{display:none} .edge{display:none} /* The footer of the panel, Instagram and the email, is hidden by default so it never shows in the flat header before the panel exists, and each width turns it back on inside its own block below. This line used to sit after the wide screen block rather than before it, so at the same specificity it won, and the desktop panel lost its footer while the phone kept one. */ .nav-foot{display:none} @media(min-width:821px){ /* ---------- The edge ---------- A cream strip held down the right of every page for good, carrying the rule at the top and the name set on its side in the middle. The page is given that much padding so nothing ever runs underneath it. */ :root{--rail:clamp(58px,4.4vw,84px)} body{padding-right:var(--rail)} .nav{right:var(--rail);pointer-events:none} .nav .wordmark{pointer-events:auto} .rail{right:var(--rail);width:auto} /* Below the header, deliberately. The header is a fixed layer at 80, so everything inside it stacks within that layer, and a strip sitting above 80 paints straight over the button no matter what z-index the button is given. The strip only ever needs to clear the page. */ .edge{ display:block;position:fixed;z-index:60; top:0;right:0;bottom:0;width:var(--rail); background:var(--cream); border-left:1px solid rgba(118,6,33,.14); pointer-events:none; } /* closes off the cell the bars sit in at the head of the strip */ .edge::before{ content:'';position:absolute;left:0;right:0;top:var(--rail); height:1px;background:rgba(118,6,33,.16); } /* The whole strip is the switch, not just the bars. Three lines twenty pixels wide are a small target on a large screen, and they sit on the same cream as the strip, so the surface takes the press instead. */ .side-tab{ display:block;position:fixed;z-index:97; top:0;right:0;bottom:0; width:var(--rail);height:auto;padding:0; background:none;border:0;border-radius:0; color:var(--mahogany);pointer-events:auto; transition:color .4s var(--ease); } .side-tab::before{ content:'';position:absolute;left:50%;top:calc(var(--rail) / 2); transform:translate(-50%,-50%); width:clamp(22px,1.9vw,28px);height:2px; background:currentColor; box-shadow:0 -7px 0 currentColor, 0 7px 0 currentColor; transition:box-shadow .35s var(--ease); } /* the ó rather than the whole name, so the strip carries a mark and not a second wordmark competing with the one in the corner */ .side-tab .tab-o{ display:block;position:absolute;left:50%;top:50%; transform:translate(-50%,-50%); font-family:var(--display);font-weight:400;line-height:1; font-size:clamp(1.7rem,2.4vw,2.6rem); color:var(--coral); transition:opacity .4s var(--ease); } .side-tab:hover{color:var(--coral)} .side-tab:hover::before{box-shadow:0 -9px 0 currentColor, 0 9px 0 currentColor} .side-tab:hover .tab-o{opacity:.72} /* One directory at both sizes. Here it is a column tucked in behind the strip; on a phone the same panel simply covers the screen. */ .nav-links{ position:fixed;top:0;bottom:0;right:var(--rail);left:auto;z-index:90; width:min(520px,44vw); background:var(--cream); border-left:1px solid rgba(118,6,33,.14); /* the header ignores clicks so the page underneath stays live, and the panel would inherit that and refuse every link in it */ pointer-events:auto; flex-direction:column;justify-content:flex-end;align-items:flex-start; gap:clamp(2px,.6vh,10px); padding:clamp(120px,20vh,220px) clamp(40px,3.6vw,66px) clamp(44px,5.5vh,78px); overflow:hidden; transform:translateX(101%); transition:transform .72s var(--slow); } .nav-links.open{transform:none} .nav-links a{ font-family:var(--small);font-weight:500; font-size:clamp(.84rem,.94vw,.96rem);letter-spacing:.24em; text-transform:uppercase;line-height:1;padding-block:.62em; white-space:nowrap;color:var(--mahogany); opacity:0;transform:translateX(20px); transition:opacity .5s var(--ease),transform .62s var(--slow),color .3s; } .nav-links.open a{opacity:.78;transform:none} .nav-links.open a:nth-child(1){transition-delay:180ms} .nav-links.open a:nth-child(2){transition-delay:230ms} .nav-links.open a:nth-child(3){transition-delay:280ms} .nav-links.open a:nth-child(4){transition-delay:330ms} .nav-links.open a:nth-child(5){transition-delay:380ms} .nav-links a:hover,.nav-links a[aria-current]{opacity:1;color:var(--coral)} /* sits under the directory now rather than holding the far corner, so the whole block reads as one thing anchored to the bottom left */ .nav-foot{ display:block;position:static; width:min(280px,80%); margin-top:clamp(26px,3.4vh,44px); padding-top:clamp(16px,1.8vh,24px); border-top:1px solid rgba(118,6,33,.18); opacity:0;transition:opacity .6s var(--ease) .44s; } .nav-links.open .nav-foot{opacity:1} .nav-foot a{ display:block;font-family:var(--small);font-weight:500; font-size:.76rem;letter-spacing:.2em;text-transform:uppercase; color:var(--mahogany);opacity:.6;transform:none;padding:0; transition:opacity .3s,color .3s; } .nav-foot a{padding-block:.34em} .nav-foot a::before{content:'\25B8';margin-right:.9em;opacity:.6} .nav-foot a:hover{opacity:1;color:var(--coral)} .nav-foot-c{ margin:1.5em 0 0;font-family:var(--small);font-weight:500; font-size:.72rem;letter-spacing:.2em;text-transform:uppercase; color:var(--mahogany);opacity:.42; } .nav-close{ display:grid;place-items:center;position:absolute;z-index:2; top:clamp(24px,2.6vw,36px);right:clamp(40px,3.6vw,66px); width:auto;height:auto;padding:.3em .1em; background:none;border:0;border-radius:0; font-family:var(--small);font-weight:500; font-size:.8rem;letter-spacing:.12em;line-height:1; color:var(--mahogany);opacity:.7; transition:opacity .3s,color .3s; } .nav-close::before{content:'[';margin-right:.34em;opacity:.55} .nav-close::after{content:']';margin-left:.34em;opacity:.55} .nav-close:hover{opacity:1;color:var(--coral)} /* no banner. the header stays clear at this width and the mark turns over instead, so the page runs unbroken underneath it */ .nav.stuck{background:none;backdrop-filter:none} .nav.stuck .wordmark{mix-blend-mode:normal} } /* ---------- The drawer ---------- On a phone the directory pulls out from the right rather than dropping from the top, on the same cream ground the desktop rail uses, so the two are recognisably the same object at two sizes. The links are set large in the display face instead of small uppercase, because a drawer with five things in it should read like a contents page. */ @media(max-width:820px){ .nav-toggle{display:block} /* Pulls out from the right and covers the page on cream, the same ground the desktop rail uses. The links sit a third of the way down rather than centred, which leaves the top of the panel empty on purpose and lets the contact block hold the bottom. */ .nav-links{ position:fixed;inset:0;z-index:90; background:var(--cream); border-left:1px solid rgba(118,6,33,.16); flex-direction:column;justify-content:flex-end;align-items:flex-start; gap:clamp(4px,1.1vh,12px); padding:clamp(110px,18vh,220px) var(--gut) clamp(38px,6vh,72px); overflow:hidden; transform:translateX(101%); transition:transform .72s var(--slow); } .nav-links.open{transform:none} .nav-links a{ font-family:var(--small);font-weight:500; font-size:.92rem;letter-spacing:.24em;text-transform:uppercase; line-height:1;padding-block:.55em; color:var(--mahogany);opacity:0;transform:translateX(22px); transition:opacity .5s var(--ease),transform .62s var(--slow),color .3s; } .nav-links.open a{opacity:.82;transform:none} .nav-links.open a:nth-child(1){transition-delay:180ms} .nav-links.open a:nth-child(2){transition-delay:230ms} .nav-links.open a:nth-child(3){transition-delay:280ms} .nav-links.open a:nth-child(4){transition-delay:330ms} .nav-links.open a:nth-child(5){transition-delay:380ms} .nav-links a[aria-current]{color:var(--coral);opacity:1} /* under the directory, part of the same block in the bottom corner */ .nav-foot{ display:block;position:static; width:min(260px,78%); margin-top:clamp(24px,3.4vh,40px); padding-top:clamp(14px,1.8vh,22px); border-top:1px solid rgba(118,6,33,.18); opacity:0;transition:opacity .6s var(--ease) .44s; } .nav-links.open .nav-foot{opacity:1} .nav-foot a{ display:block;font-family:var(--small);font-weight:500; font-size:.74rem;letter-spacing:.2em;text-transform:uppercase; color:var(--mahogany);opacity:.6;transform:none; padding:.34em 0;transition:opacity .3s,color .3s; } .nav-foot a::before{content:'\25B8';margin-right:.9em;opacity:.6} .nav-foot a:active{opacity:1;color:var(--coral)} .nav-foot-c{ margin:1.5em 0 0;font-family:var(--small);font-weight:500; font-size:.72rem;letter-spacing:.2em;text-transform:uppercase; color:var(--mahogany);opacity:.42; } /* set in brackets rather than given a button, so it reads as a mark on the page instead of a control sitting on top of it */ .nav-close{ position:absolute;z-index:2; top:clamp(22px,3.2vh,34px);right:var(--gut); width:auto;height:auto;padding:.3em .1em; background:none;border:0;border-radius:0; font-family:var(--small);font-weight:500; font-size:.8rem;letter-spacing:.12em;line-height:1; color:var(--mahogany);opacity:.75;cursor:pointer; transition:opacity .3s,color .3s; } .nav-close::before{content:'[';margin-right:.34em;opacity:.55} .nav-close::after{content:']';margin-left:.34em;opacity:.55} .nav-close:active{opacity:1;color:var(--coral)} } /* ---------- Cover ---------- */ .cover{ min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end; padding-block:clamp(120px,18vh,200px) clamp(34px,6vh,72px); position:relative;overflow:hidden; } .cover-statement{max-width:16ch} /* Coral in the hero, so the opening screen is not two tones of one colour. The italic clause takes it, and a short rule runs out from the label. */ .cover .statement em{color:var(--coral)} .cover .label::before{ content:'';display:inline-block;vertical-align:middle; width:clamp(30px,4.5vw,72px);height:1px;background:var(--coral); margin-right:1.1em;transform-origin:left center; animation:rule-out 1.2s var(--slow) both .2s; } @keyframes rule-out{from{transform:scaleX(0)}to{transform:scaleX(1)}} /* the first action on the cover is the loud one */ .cover .act:first-of-type{color:var(--coral);border-color:var(--coral)} .cover .act:first-of-type:hover{color:var(--cream);border-color:var(--cream)} @media(prefers-reduced-motion:reduce){.cover .label::before{animation:none}} .cover-foot{ margin-top:clamp(34px,6vh,72px); display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,64px);align-items:flex-end;justify-content:space-between; } /* ---------- Links that behave like buttons ---------- */ .act{ display:inline-flex;align-items:center;gap:.7em; font-family:var(--small);font-weight:500; font-size:clamp(.84rem,.94vw,.96rem);letter-spacing:.2em;text-transform:uppercase; padding-bottom:.55em;border-bottom:1px solid var(--rule); transition:border-color .5s var(--ease),color .5s var(--ease),gap .5s var(--ease); } .act:hover{color:var(--coral);border-color:var(--coral);gap:1.1em} .act .arrow{transition:transform .5s var(--ease)} .act:hover .arrow{transform:translateX(3px)} .act-solid{ border:1px solid var(--rule);border-radius:0; padding:1.05em 1.6em; } .act-solid:hover{background:var(--coral);border-color:var(--coral);color:var(--cream)} /* ---------- Imagery, given room ---------- */ .plate{position:relative;overflow:hidden} .plate img,.plate video{width:100%;height:auto;display:block} /* A drawing that has finished drawing should be as sharp as the artwork. No amount of quality fixes this: every browser safe video format halves colour resolution, and coral on mahogany is a pure colour edge, so the lines always come back softer. The still therefore takes over, and it takes over instantly on the frame the last stroke lands. A fade would be a flip, an instant swap under the eye's own motion is not seen. */ .plate .draws-still{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;opacity:0;pointer-events:none; transition:none; } .plate.done .draws-still{opacity:1} .plate.done video{visibility:hidden} /* a run of plates side by side is cropped to one ratio, otherwise the drawings' own proportions leave the row ragged */ .plate-even img,.plate-even video{aspect-ratio:4 / 3;object-fit:cover;height:auto} /* Shown as a band rather than the whole scene. A crop reads as a decision somebody made. A complete picture, every time, reads as whatever asset happened to be to hand, which is most of why the drawings felt generated. */ .plate-crop img{aspect-ratio:21 / 9;object-fit:cover;object-position:50% 64%} @media(max-width:760px){.plate-crop img{aspect-ratio:16 / 10}} /* A drawing shown deliberately small. Everything else on the site runs at full width, so one spot at a tenth the size gives the page the change of scale it has never had. */ .spot{ width:clamp(92px,10vw,158px);height:auto;display:block; opacity:.85;margin:0 0 clamp(22px,2.6vw,38px); } /* pulls out through the page gutters when it sits inside .shell */ .plate-full{margin-inline:calc(var(--gut) * -1);width:calc(100% + var(--gut) * 2)} /* but in a .bleed section there is no gutter to pull out of, and the negative margin was shunting the drawing off centre to the left */ .bleed > .plate-full{margin-inline:0;width:100%} /* one line beneath a full bleed drawing, given room on both sides so it reads as a caption to the picture rather than the start of a section */ .bleed-note{padding-block:clamp(34px,4.5vw,68px) clamp(8px,1vw,16px)} .plate-cap{ margin-top:clamp(12px,1.4vw,20px); font-size:clamp(1.06rem,1.18vw,1.24rem);letter-spacing:.02em;opacity:.6;font-style:italic;font-weight:300; } /* the image uncovers itself rather than fading */ .plate .veil{ position:absolute;inset:0;background:var(--mahogany);transform-origin:right center; transition:transform 1.3s var(--slow); } .in .plate .veil,.plate.in .veil{transform:scaleX(0)} /* ---------- Index rows, the archive pattern ---------- */ /* ---------- The reel ---------- Not a block. The label sits at the far left on the same line as the first card and stays put, the cards run off the right hand edge of the screen, and you drag through them. Nothing is centred, nothing is contained, and there is a great deal of empty ground on the left. */ .reel{ display:flex;align-items:flex-start; gap:clamp(20px,2.6vw,52px); overflow-x:auto;overflow-y:hidden; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none;-ms-overflow-style:none; padding-right:var(--gut); cursor:grab; /* stops the browser holding a scrolling box in place when things above it change height, which was another way the strip opened part way in */ overflow-anchor:none; } /* zero has to be a valid resting place or the strip snaps to the first card instead of the left edge */ .reel-lead{scroll-snap-align:start} .reel::-webkit-scrollbar{display:none} .reel.dragging{cursor:grabbing} .reel.dragging a{pointer-events:none} /* the empty ground, with the label held against the left edge of it */ /* travels with the strip rather than staying pinned, so the heading clears out of the way once you start moving through the cards */ .reel-lead{ flex:0 0 clamp(140px,34vw,600px); padding-left:var(--gut); pointer-events:none; will-change:opacity; } .reel-lead .label{margin:0} .reel-item{ flex:0 0 clamp(240px,25vw,380px); scroll-snap-align:start;display:block; } .reel-t{ margin:0;font-family:var(--small);font-weight:600; font-size:clamp(.8rem,.88vw,.9rem);letter-spacing:.22em;text-transform:uppercase; color:var(--coral);transition:color .4s var(--ease); } .reel-mark{ display:block;margin:.95em 0 1.15em; /* it was set as a hairline tick and read as a speck. This is the one mark telling you the cards run sideways, so it carries some weight now. */ font-size:1.15rem;line-height:1;color:var(--coral);opacity:.8; } .reel-fig{margin:0;overflow:hidden;background:rgba(243,238,230,.03)} /* The drawings are all wide scenes, so left alone the cards come out squat. Cropping them upright is what gives the reel the tall proportion the reference has, and a crop reads as a decision rather than an asset. */ .reel-fig img{ display:block;width:100%;height:auto; aspect-ratio:4 / 5;object-fit:cover;object-position:50% 50%; transition:transform 1.2s var(--slow); } .reel-item:hover .reel-fig img{transform:scale(1.045)} .reel-m{font-family:var(--small); margin:1.15em 0 0;font-family:var(--text);font-weight:400; font-size:clamp(1rem,1.08vw,1.16rem);line-height:1.5; opacity:.62;transition:opacity .4s var(--ease); } .reel-item:hover .reel-m{opacity:.85} .bone .reel-mark{color:var(--mahogany)} /* The suburb reel carries no drawing. Twelve cards would mean showing the same eight sketches over and over, so the median does the work instead, set large enough to be the thing you see rather than a figure tucked in a corner. Each card opens on a rule, the way an index entry would. */ .reel-data .reel-item{flex:0 0 clamp(228px,21vw,320px)} .reel-card{border-top:1px solid var(--rule);padding-top:clamp(18px,2vw,30px)} .bone .reel-card{border-color:var(--rule-dark)} .reel-card .reel-mark{margin:.9em 0 .7em} /* a card carrying a drawing needs the room for it, and the median sits under the picture rather than standing in for one */ .reel-card:has(.reel-fig){flex:0 0 clamp(248px,25vw,380px)} /* A card with no drawing in it has nothing but the words, so they are set larger and given a longer measure than a caption under a picture would need, otherwise the card reads as a caption with its picture missing. */ .reel-words .reel-item{flex:0 0 clamp(240px,23vw,346px)} .reel-words .reel-m{ margin-top:1.15em; font-size:clamp(1.06rem,1.16vw,1.28rem); line-height:1.5;opacity:.72; } .reel-card .reel-fig{margin-top:.4em} .reel-card .reel-fig + .reel-n{margin-top:.85em} .reel-n{ margin:0;font-family:var(--display);font-weight:400; font-size:clamp(2rem,3.1vw,3.1rem);line-height:1;letter-spacing:-.014em; } .reel-sub{ margin:.85em 0 0;font-family:var(--small);font-weight:600; /* the growth figure is the point of these cards, so it is set to be read rather than filed away as a caption under the median */ font-size:clamp(.86rem,.94vw,1rem);letter-spacing:.16em;text-transform:uppercase; color:var(--coral);white-space:nowrap; } .bone .reel-sub{color:var(--coral)} .reel-card .reel-m{margin-top:1.3em;font-size:clamp(1.08rem,1.18vw,1.28rem);opacity:.72} .reel-lead .statement{margin:.6em 0 0} .reel-lead .read-sm{margin:clamp(18px,2vw,28px) 0 0;opacity:.72;max-width:36ch} @media(max-width:760px){ .reel{cursor:default;scroll-padding-left:var(--gut)} .reel-item,.reel-data .reel-item,.reel-words .reel-item, .reel-card:has(.reel-fig){flex:0 0 76vw} /* the strip opens hard against the gutter, since the heading has been lifted out above it and there is no lead spacer left to sit behind */ .reel-lead{display:none} .reel > .reel-item:first-of-type{margin-left:var(--gut)} } /* Nothing on a phone says a strip moves sideways, so this sits under the heading until the first swipe and then leaves for good. The arrow drifts the way you are meant to push. */ .reel-hint{ display:none;align-items:center;gap:.6em; margin-top:clamp(16px,2.6vw,24px); font-family:var(--small);font-weight:500; font-size:.72rem;letter-spacing:.24em;text-transform:uppercase; color:var(--coral); transition:opacity .5s var(--ease),transform .5s var(--ease); } .reel-lead-out .reel-hint{display:inline-flex} .reel-hint i{font-style:normal;display:inline-block;animation:nudge 1.9s var(--ease) infinite} .reel-hint.gone{opacity:0;transform:translateX(10px);pointer-events:none} @keyframes nudge{ 0%,58%,100%{transform:translateX(0)} 76%{transform:translateX(7px)} } @media(prefers-reduced-motion:reduce){.reel-hint i{animation:none}} .bone .reel-hint{color:var(--coral)} /* the heading once the script has moved it out of the strip on a phone */ /* no opacity here on purpose: the heading now carries .rise like the rest of the page, and pinning it to 1 would stop it ever revealing */ .reel-lead-out{ flex:none;width:auto;max-width:none; padding:0 var(--gut); margin-bottom:clamp(24px,4.5vw,40px); pointer-events:auto;display:block; } .reel-lead-out .read-sm{max-width:46ch} /* ---------- The split ---------- One section refuses the eyebrow, heading, paragraph, list stack that the rest of the page uses. The heading moves out of the way into the margin and stays there, riding alongside as you read down the list, so the list starts at the top of the section instead of a third of the way into it. */ .split{ display:grid; grid-template-columns:minmax(0,25%) minmax(0,1fr); column-gap:clamp(34px,5.5vw,96px); align-items:start; } .split-aside{position:sticky;top:clamp(96px,13vh,150px)} .split-aside .statement{margin:.55em 0 0} .split-aside .read-sm{margin-top:clamp(18px,2vw,30px);opacity:.66;max-width:30ch} /* narrower ground, so the description drops under the title rather than fighting it for width */ .split-main .row{grid-template-columns:max-content minmax(0,1fr);align-items:start} .split-main .row-n{padding-top:.6em} .split-main .row-t{font-size:clamp(1.4rem,2.6vw,2.4rem)} .split-main .row-m{grid-column:2;margin-top:.5em;max-width:40ch} @media(max-width:900px){ .split{grid-template-columns:1fr;row-gap:clamp(32px,5vw,58px)} .split-aside{position:static} .split-aside .read-sm{max-width:46ch} } .rows{border-top:1px solid var(--rule)} .row{ display:grid; /* the numeral takes only the room it needs and sits against the title, rather than being marooned at the far left by a shared gap, and the description is given a column instead of being pushed to the edge */ grid-template-columns:max-content minmax(0,1fr) minmax(0,clamp(17ch,23vw,29ch)); column-gap:clamp(14px,1.8vw,32px); align-items:center; padding-block:clamp(22px,3.4vw,42px);border-bottom:1px solid var(--rule); position:relative;transition:color .55s var(--ease); } .row > *{position:relative;z-index:1} /* A row that goes somewhere takes a coral wash across it from the left, the same direction the name changes in and the skyline used to draw. It bleeds a little past the text either side so it reads as a band rather than a box drawn around the words. */ a.row::before{ content:'';position:absolute;z-index:0; top:0;bottom:0;left:calc(var(--gut) * -.4);right:calc(var(--gut) * -.4); background:var(--coral); transform:scaleX(0);transform-origin:left center; transition:transform .72s var(--slow); } a.row:hover::before{transform:scaleX(1)} a.row:hover{color:var(--cream)} a.row:hover .row-n,a.row:hover .row-m{opacity:.88} /* A row that is only a list entry cannot be pressed, so it gets the rule beneath it filling instead of a wash that would promise a link */ .row:not(a)::after{ content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px; background:var(--coral); transform:scaleX(0);transform-origin:left center; transition:transform .72s var(--slow); } .row:not(a):hover::after{transform:scaleX(1)} .row:not(a):hover .row-n{opacity:1;color:var(--coral)} .row-n{ font-family:var(--small);font-weight:600;font-size:.86rem;letter-spacing:.18em; opacity:.45;min-width:0;padding-right:.15em; transition:opacity .4s var(--ease),color .4s var(--ease); } .row-t{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,3.4vw,3.1rem);line-height:1.05;margin:0} .row-m{ font-size:clamp(1.06rem,1.15vw,1.22rem);line-height:1.5; opacity:.72;margin:0;transition:opacity .4s var(--ease); } /* A list carrying nothing but names wants more air than one carrying descriptions, or it reads as cramped rather than deliberate. */ .rows-bare .row{padding-block:clamp(26px,4vw,54px)} /* the same row, carrying a figure on the right. used for the suburbs */ .row-body{min-width:0} .row-body .row-m{margin-top:.6em} .row-data{ text-align:right;margin:0;white-space:nowrap; font-family:var(--display);font-weight:400; font-size:clamp(1.15rem,2.1vw,1.85rem);line-height:1.1; } .row-data small{ display:block;font-family:var(--small);font-weight:600; font-size:.62em;letter-spacing:.14em;text-transform:uppercase; color:var(--coral);margin-top:.55em; } .bone .row-data small{color:var(--coral)} @media(max-width:760px){ .row{grid-template-columns:max-content 1fr;gap:14px;align-items:start} .row-m{grid-column:2;margin-top:.5em} .row-data{grid-column:2;text-align:left;margin-top:.7em} /* a wash needs a pointer to trigger it, so on touch the rows stay still */ a.row::before,.row:not(a)::after{display:none} } /* ---------- What people said ---------- Set large and quiet. The words are the proof, so nothing decorates them: no quote marks drawn in, no cards, no stars. */ /* One at a time. The stack is kept for anyone without JS, and the script turns it into a slider on load, so nothing is lost if it never runs. */ .said{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)} /* the slider sits on cream, so the quote reads as something lifted out of the page rather than more of the same mahogany */ .said.is-slider{ position:relative;min-height:1px; background:var(--cream);color:var(--mahogany); border:0;overflow:hidden; padding:clamp(28px,3.2vw,50px) clamp(26px,3vw,52px); /* Two shadows rather than one: a wide soft cast that puts the card above the page, and a tight dark one just under the edge that gives it a thickness. A single blur reads as a glow, not as a card sitting on something. Warm rather than grey, since the ground is mahogany. */ box-shadow: 0 2px 4px rgba(118,6,33,.20), 0 26px 60px -18px rgba(118,6,33,.55); } /* the ó, oversized and faint, sitting behind the words */ .said.is-slider::after{ content:'ó';position:absolute;right:clamp(-10px,-1vw,0px);bottom:-.34em; font-family:var(--display);font-size:clamp(150px,18vw,280px);line-height:1; color:var(--coral);opacity:.09;pointer-events:none; } .said.is-slider .say .who span{color:var(--mahogany);opacity:.5} .said.is-slider .say .who{color:var(--coral)} .said.is-slider .say{ position:absolute;inset:0; opacity:0;pointer-events:none; transform:translateY(14px); transition:opacity .7s var(--ease),transform .9s var(--slow); border-bottom:0; } .said.is-slider .say.on{opacity:1;pointer-events:auto;transform:none;position:relative} .said.is-slider .say blockquote{max-width:42ch} /* the controls: a count, and two quiet arrows */ .say-nav{ display:flex;align-items:center;gap:clamp(18px,2.4vw,34px); margin-top:clamp(18px,2.1vw,30px); } .say-nav button{ background:none;border:1px solid var(--rule);border-radius:0; width:42px;height:42px;display:grid;place-items:center; color:inherit;font-size:1rem; transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease); } .say-nav button:hover{background:var(--coral);border-color:var(--coral);color:var(--cream)} .say-count{ font-family:var(--small);font-weight:500; font-size:.86rem;letter-spacing:.2em;opacity:.5; } .bone .say-nav button{border-color:var(--rule-dark)} /* a coral hairline creeps across while the current quote is showing */ .say-bar{flex:1;height:1px;background:var(--rule);position:relative;overflow:hidden} .say-bar i{ position:absolute;inset:0;background:var(--coral); transform:scaleX(0);transform-origin:left center; } .say-bar i.run{transition:transform 7s linear;transform:scaleX(1)} .bone .say-bar{background:var(--rule-dark)} .say{ padding-block:clamp(24px,3vw,44px); border-bottom:1px solid var(--rule); } /* Proper curly quotes, with the opening one hung into the margin so the words still line up with everything else. Setting them in the margin is the difference between a quotation and a sentence that has been shoved right by a punctuation mark. */ .say blockquote{ quotes:'\201C' '\201D'; text-indent:-.44em; margin:0;font-family:var(--text);font-weight:400;font-style:italic; font-size:clamp(1.14rem,1.7vw,1.62rem);line-height:1.45; letter-spacing:-.006em;max-width:34ch; } .say blockquote::before{content:open-quote} .say blockquote::after{content:close-quote} /* on a phone the indent is a larger share of the measure, so it eases off */ @media(max-width:760px){ .say blockquote{text-indent:-.36em} } .say .who{ margin:clamp(20px,2.6vw,34px) 0 0; font-family:var(--small);font-weight:500; font-size:clamp(.8rem,.9vw,.92rem);letter-spacing:.2em;text-transform:uppercase; color:var(--coral); } .say .who span{color:var(--cream);opacity:.5;letter-spacing:.14em} .bone .said,.bone .say{border-color:var(--rule-dark)} .bone .say .who{color:var(--coral)} .bone .say .who span{color:var(--mahogany);opacity:.55} /* ---------- Booking ---------- */ .cal{ /* Calendly is themed light rather than dark. Their booking form keeps its own pale input fields whatever background you pass it, so cream text landed on a near white field and could not be read while you typed. A cream panel on the mahogany reads as a card and every field is legible. */ background:var(--cream); border:1px solid rgba(118,6,33,.12); box-shadow:0 2px 4px rgba(118,6,33,.18), 0 26px 60px -20px rgba(118,6,33,.5); width:100%; /* Calendly's embed script reads the inline height off the div to size its own iframe, so that attribute has to stay. It is set generously, to clear the confirmation form rather than just the calendar, and the script below trims it to the exact height once Calendly reports one. Nothing here sets height, or it would fight the inline value. */ min-height:660px; } .bone .cal{box-shadow:none;border-color:var(--rule-dark)} /* Calendly's own stylesheet is what normally makes its iframe fill this box, and when that does not land the iframe falls back to the browser default of 150px, which is the event name and the duration and then nothing. That is not something to leave to chance on the one page that takes bookings, so the size is set here instead and marked important, because their script writes an inline height on the same element. */ .cal iframe{display:block;width:100% !important;height:100% !important;border:0} .cal .calendly-spinner{display:none} /* a plain list, set with the ó standing in for a bullet */ .brief-list{list-style:none;margin:clamp(24px,3vw,38px) 0 0;padding:0} .brief-list li{ position:relative;padding-left:1.9em;margin-bottom:.9em; font-size:clamp(1.1rem,1.24vw,1.3rem);line-height:1.55;opacity:.82; } .brief-list li::before{ content:'ó';position:absolute;left:0;top:-.06em; font-family:var(--display);color:var(--coral); } .bone .brief-list li::before{color:var(--coral)} /* ---------- The voyage ---------- The nine stages are a passage, so a boat sails down them as you scroll. The line is the course, the wake fills in behind, and the boat heels a little as it goes. It only ever moves with the page. */ /* The course runs the full width of the list and passes behind the words, so the boat crosses the stages rather than sailing beside them. */ .voyage{position:relative} .voyage .legs{position:relative;z-index:1} /* ---------- The spine ---------- The boat used to swing the full width of the section, straight across the words, which made the whole thing busy to read. The stages now sit either side of a single quiet line and the boat only weaves a little around it, so it still sails rather than slides, but it stops competing with the text. --spine is where that line sits, and the script reads it. */ .voyage{--spine:50%} .voyage-spine{ position:absolute;left:var(--spine);top:0;bottom:0;width:1px;margin-left:-.5px; background:linear-gradient(180deg,transparent,var(--rule) 5%,var(--rule) 94%,transparent); z-index:0;pointer-events:none; } .bone .voyage-spine{ background:linear-gradient(180deg,transparent,var(--rule-dark) 5%,var(--rule-dark) 94%,transparent); } .leg{ position:relative;z-index:1; width:calc(50% - clamp(38px,5vw,72px)); padding-block:clamp(16px,2.2vw,26px); } .leg + .leg{margin-top:clamp(14px,2.6vw,34px)} .leg-l{margin-right:auto;text-align:right} .leg-r{margin-left:auto;text-align:left} /* the mark where each stage meets the course */ .leg::after{ content:'';position:absolute;top:calc(clamp(16px,2.2vw,26px) + .62em); width:7px;height:7px;border-radius:50%; background:var(--rule-dark);opacity:.5; transition:background .5s var(--ease),opacity .5s var(--ease),transform .5s var(--slow); } .leg-l::after{right:calc(clamp(38px,5vw,72px) * -1 - 3.5px)} .leg-r::after{left:calc(clamp(38px,5vw,72px) * -1 - 3.5px)} /* the stage the boat has reached */ .leg.passed::after{background:var(--coral);opacity:1;transform:scale(1.25)} .leg.passed .leg-n{opacity:1} .leg-n{ display:block;font-family:var(--small);font-weight:600; font-size:.82rem;letter-spacing:.18em;color:var(--coral); opacity:.6;margin-bottom:.55em; transition:opacity .5s var(--ease); } .leg-t{ font-family:var(--display);font-weight:400; font-size:clamp(1.45rem,2.9vw,2.5rem);line-height:1.05;margin:0 0 .34em; } .leg-m{font-family:var(--small); font-size:clamp(1rem,1.1vw,1.16rem);line-height:1.5; opacity:.72;margin:0;max-width:40ch; } .leg-l .leg-m{margin-left:auto} /* on a phone the spine moves to the left margin and every stage lines up against it, because two narrow columns either side of a line is unreadable */ @media(max-width:760px){ .voyage{--spine:12px} .leg{width:auto;margin:0 0 0 46px;text-align:left} .leg + .leg{margin-top:clamp(20px,5vw,30px)} .leg-l{text-align:left;margin-right:0} .leg-l .leg-m{margin-left:0} .leg-l::after,.leg-r::after{left:-37px;right:auto} } .voyage-svg{ position:absolute;inset:0; width:100%;height:100%; overflow:visible;pointer-events:none;z-index:0; } /* the spine is the drawn line now. the course is kept in the document because the script measures the boat's position along it, but it is not painted, so only the wake shows where the boat actually went. */ .voyage-course{stroke:none} /* the water already crossed. the gradient stroke is anchored to the boat in script, so the wake is strongest just astern and gone further back. */ .voyage-wake{stroke:url(#wakeFade);stroke-width:1.6;stroke-linecap:round} /* a presentation attribute cannot read a custom property, so the stop colour is set here and only the opacities are left on the markup */ #wakeFade stop{stop-color:var(--coral)} .voyage-boat{ position:absolute;left:0;top:0;z-index:2; width:clamp(40px,4.6vw,66px); margin:calc(clamp(40px,4.6vw,66px) / -2) 0 0 calc(clamp(40px,4.6vw,66px) / -2); will-change:transform;pointer-events:none; } .voyage-boat img{width:100%;display:block} /* the champagne. same anchor point as the boat, so one swaps for the other on the spot rather than one sliding in from somewhere else. */ .voyage-cork{ opacity:0; /* larger than the boat it replaces. The boat is a thing making its way down the page and wants to sit lightly; this is the arrival, so it is allowed to take up more room than what it came from. */ width:clamp(104px,11.5vw,168px); margin:calc(clamp(104px,11.5vw,168px) / -2) 0 0 calc(clamp(104px,11.5vw,168px) / -2); } .bone .voyage-boat img{filter:invert(1) brightness(.35) sepia(1) hue-rotate(-20deg)} @media(max-width:760px){ .voyage-boat{width:34px;margin:-17px 0 0 -17px} .voyage-cork{width:92px;margin:-46px 0 0 -46px} } @media(prefers-reduced-motion:reduce){ .voyage-boat,.voyage-wake{display:none} } /* ---------- The footprint ---------- A live map, so you can move around it, with an ó dropped on every suburb we have bought in. The glyph is sized by how many, square rooted, because that is how the eye judges area. Tiles come from OpenStreetMap; the attribution in the corner is a condition of using them, not decoration. */ .fp{position:relative} .fp-map{ width:100%;height:clamp(420px,58vh,680px); border-radius:var(--round-lg);overflow:hidden; border:1px solid var(--rule-dark); background:var(--cream); } /* the map is a picture of Brisbane, not a satellite photo, so the colour is pulled most of the way out of the tiles and the warmth of the page put back */ .fp-map .leaflet-tile-pane{filter:grayscale(1) contrast(.88) brightness(1.06) sepia(.22) opacity(.72)} .fp-map .leaflet-container{background:var(--cream);font-family:var(--small)} .fp-o{ display:grid;place-items:center; font-family:var(--display);font-weight:400;line-height:1; color:var(--coral); text-shadow:0 1px 0 var(--cream), 0 0 6px var(--cream); transition:color .2s var(--ease),transform .25s var(--slow); } .fp-o:hover,.fp-o:focus-visible{color:var(--coral);transform:scale(1.18);outline:none;z-index:500} .fp-lab{ font-family:var(--small) !important;font-weight:600; font-size:.74rem;letter-spacing:.16em;text-transform:uppercase; color:var(--cream);background:var(--mahogany); border:0;border-radius:var(--round-pill); padding:.5em .85em;white-space:nowrap; box-shadow:0 2px 4px rgba(118,6,33,.2), 0 14px 30px -12px rgba(118,6,33,.5); } .fp-lab b{font-family:var(--display);font-weight:400;color:var(--coral);letter-spacing:0;margin-left:.5em;font-size:1.15em} .fp-lab::before{display:none} .leaflet-tooltip-top.fp-lab::before{display:none} .fp-note{ margin:clamp(14px,1.8vw,22px) 0 0;max-width:72ch; font-family:var(--small);font-size:clamp(.88rem,.95vw,1rem);line-height:1.5;opacity:.6; } .fp-map .leaflet-control-attribution{ background:rgba(243,238,230,.82);font-family:var(--small);font-size:.7rem; } .fp-map .leaflet-control-zoom a{ font-family:var(--small);color:var(--mahogany);border-color:var(--rule-dark); } @media(prefers-reduced-motion:reduce){ .fp-o{transition:none} } /* ---------- Questions ---------- */ .qs{border-top:1px solid var(--rule)} .q{border-bottom:1px solid var(--rule)} .q summary{ list-style:none;display:flex;gap:clamp(16px,3vw,40px);align-items:baseline; padding-block:clamp(20px,2.8vw,34px); font-family:var(--display);font-weight:400; font-size:clamp(1.2rem,2.1vw,1.85rem);line-height:1.2; transition:color .5s var(--ease),padding-inline .6s var(--ease); } .q summary::-webkit-details-marker{display:none} .q summary::after{ content:'+';margin-left:auto;font-family:var(--small);font-weight:400; font-size:1.4rem;line-height:1;color:var(--coral); transition:transform .5s var(--slow); } .q[open] summary::after{transform:rotate(45deg)} .q summary:hover{color:var(--coral);padding-inline:clamp(6px,1.2vw,18px)} .q .a{ margin:0;padding:0 0 clamp(24px,3vw,40px); max-width:58ch;opacity:.82; } .bone .qs,.bone .q{border-color:var(--rule-dark)} /* ---------- Figures, side by side ---------- */ /* Left to fit themselves these landed four across with one or two stranded underneath, and a 72px row gap made the leftovers look abandoned rather than wrapped. The count is set to suit how many there actually are. */ /* ── the figure index ──────────────────────────────────────────────── Five identical columns with a rule over each. Forty nine of them across the site, and the single thing that made the pages read as generic. A set of figures is a list, so it is set as one: the figure and its label hold the left, the note sits beside them, a hairline runs the full width between entries. Reads down the page, not across it. */ .figures{display:block} .figures > *{ display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); grid-template-areas:"n l" "n note"; align-items:baseline; column-gap:clamp(24px,3.4vw,64px); padding:clamp(20px,2.2vw,30px) 0; border-top:1px solid var(--rule); position:relative; } .figures > *:last-child{border-bottom:1px solid var(--rule)} .bone .figures > *{border-top-color:var(--rule-dark)} .bone .figures > *:last-child{border-bottom-color:var(--rule-dark)} /* the coral rule still draws in, one entry after another */ .figures > *::before{ content:'';position:absolute;left:0;top:-1px;height:1px;width:100%; background:var(--coral);transform:scaleX(0);transform-origin:left center; transition:transform 1.1s var(--slow); } .figures > .in::before{transform:scaleX(1)} .figures > *:nth-child(2)::before{transition-delay:90ms} .figures > *:nth-child(3)::before{transition-delay:180ms} .figures > *:nth-child(4)::before{transition-delay:270ms} .figures > *:nth-child(5)::before{transition-delay:360ms} .figures > *:nth-child(6)::before{transition-delay:450ms} .figures .fig-n{grid-area:n} .figures .fig-l{grid-area:l;margin:0} .figures .fig-m{grid-area:note;max-width:46ch;margin:.7em 0 0} @media(max-width:620px){ .figures > *{grid-template-columns:1fr;grid-template-areas:"n" "l" "note"} .figures .fig-l{margin-top:.5em} .figures .fig-m{margin-top:.8em;max-width:none} } .fig-n{ font-family:var(--display);font-weight:400; /* brought down from 4.6rem: a four character figure like 9.75% will not hold one line at the old size, and a set of stats should all be set the same rather than one of them shrinking to fit */ font-size:clamp(2.1rem,3.8vw,3.5rem);line-height:1;margin:0 0 .3em; font-variant-numeric:tabular-nums;white-space:nowrap; } .fig-l{ font-family:var(--small);font-weight:600;font-size:.84rem;letter-spacing:.2em;text-transform:uppercase; color:var(--coral);margin:0 0 .7em; } .fig-m{font-size:clamp(1.12rem,1.28vw,1.3rem);opacity:.7;margin:0;max-width:24ch;font-style:italic} /* ---------- The mark ---------- The traced καλó artwork, painted through a mask so it takes its colour from the panel it sits on rather than carrying a baked in fill. */ .mark{ position:relative;container-type:inline-size; width:min(620px,74%);aspect-ratio:1975 / 682;margin:0 auto; color:var(--cream); opacity:0;transform:translateY(4%); transition:opacity 1.4s var(--slow),transform 1.4s var(--slow); } /* The Greek is a traced vector, so it cannot simply be retyped in English. The two words are stacked instead and cross faded, which is what makes the translation land: kaló drifts out as good drifts in, and back again. */ .mark::before{ content:'';position:absolute;inset:0; background-color:currentColor; /* inlined, because a mask pointing at a separate file is blocked when the page is opened straight off disk and the mark simply vanishes */ -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221975%22%20height%3D%22682%22%20viewBox%3D%220%200%201975%20682%22%20fill%3D%22%23000%22%3E%20%3Cpath%20d%3D%22M22.0%20681.1%20C14.4%20678.8%207.6%20672.7%203.2%20664.5%20C0.7%20659.8%200.5%20658.7%200.6%20646.5%20C0.6%20636.5%201.2%20631.4%202.9%20624.5%20C5.4%20614.7%2013.3%20597.4%2020.0%20587.0%20C35.0%20564.0%2062.9%20536.1%2097.4%20509.7%20C110.7%20499.5%20112.3%20498.4%20130.4%20485.7%20C137.3%20480.9%20143.2%20476.5%20143.5%20475.9%20C144.3%20474.7%20149.7%20453.6%20151.0%20446.5%20C158.5%20407.8%20159.0%20374.2%20152.5%20354.5%20C149.8%20346.4%20148.3%20343.7%20144.3%20339.6%20C133.4%20328.6%20113.4%20326.0%2091.2%20332.9%20C83.6%20335.2%2074.3%20341.6%2065.5%20350.4%20C54.7%20361.3%2048.6%20369.2%2041.7%20381.2%20C38.9%20386.1%2036.3%20390.3%2035.9%20390.5%20C35.1%20391.1%2021.0%20387.0%2019.4%20385.8%20C18.2%20384.9%2018.3%20384.2%2022.1%20373.5%20C28.1%20356.3%2037.3%20336.7%2046.1%20322.0%20C48.9%20317.3%2052.0%20312.1%2053.0%20310.4%20C57.1%20303.3%2068.7%20287.4%2073.9%20281.7%20C88.5%20265.7%20100.3%20257.2%20116.5%20251.0%20C126.4%20247.1%20146.6%20246.2%20155.1%20249.2%20C166.4%20253.3%20175.4%20260.9%20179.8%20270.2%20C184.9%20281.1%20189.3%20299.8%20191.1%20317.9%20C193.0%20336.6%20190.8%20371.3%20186.0%20399.9%20C183.8%20412.4%20183.2%20415.3%20179.4%20430.5%20C176.9%20440.1%20176.4%20442.2%20173.9%20450.8%20C172.0%20457.6%20171.8%20459.0%20172.6%20459.0%20C173.4%20459.0%20177.6%20456.6%20192.8%20447.9%20C194.5%20446.8%20197.5%20445.2%20199.2%20444.1%20C201.0%20443.1%20209.2%20438.3%20217.5%20433.5%20C225.8%20428.7%20233.9%20424.0%20235.5%20423.0%20C237.1%20422.0%20245.2%20417.3%20253.5%20412.5%20C261.8%20407.7%20270.0%20402.9%20271.8%20401.9%20C273.5%20400.8%20276.5%20399.2%20278.2%20398.1%20C280.0%20397.1%20288.2%20392.3%20296.5%20387.5%20C304.8%20382.7%20312.9%20377.9%20314.5%20377.0%20C316.1%20376.0%20319.0%20374.4%20320.7%20373.4%20C323.5%20371.8%20324.8%20369.5%20329.6%20357.6%20C353.1%20298.8%20381.1%20262.1%20411.5%20250.4%20C417.6%20248.0%20420.0%20247.7%20430.0%20247.6%20C441.3%20247.5%20443.0%20247.8%20451.8%20251.7%20C462.8%20256.6%20466.3%20269.4%20462.4%20291.5%20C458.7%20312.8%20447.6%20336.9%20433.1%20355.0%20C409.5%20384.5%20392.2%20400.0%20353.4%20426.0%20C333.1%20439.7%20331.0%20441.4%20330.0%20444.8%20C328.3%20450.5%20325.9%20458.8%20324.1%20465.0%20C322.6%20470.7%20315.0%20499.9%20312.9%20508.0%20C306.8%20532.7%20305.2%20559.0%20309.1%20571.1%20C315.8%20591.9%20333.7%20603.9%20358.0%20604.0%20C375.8%20604.0%20392.8%20596.1%20405.4%20581.8%20C414.8%20571.2%20426.6%20552.1%20431.0%20540.4%20C432.1%20537.5%20432.1%20537.5%20440.5%20540.7%20C448.8%20543.8%20448.8%20543.8%20445.9%20553.5%20C432.8%20597.7%20420.2%20622.3%20396.0%20650.4%20C394.6%20652.0%20389.6%20656.5%20384.9%20660.5%20C357.2%20683.7%20318.4%20688.5%20298.1%20671.4%20C288.1%20662.9%20279.4%20643.5%20276.9%20624.3%20C274.3%20603.7%20280.1%20539.5%20287.6%20507.2%20C292.6%20485.6%20297.1%20469.2%20300.5%20460.8%20C300.9%20459.7%20300.8%20459.0%20300.0%20459.0%20C298.9%20459.0%20278.5%20471.0%20230.0%20500.0%20C210.5%20511.7%20188.0%20525.1%20185.5%20526.4%20C174.6%20532.5%20144.0%20551.3%20142.9%20552.7%20C142.0%20553.7%20139.6%20558.8%20137.5%20564.0%20C123.4%20599.0%2098.6%20639.7%2080.8%20657.2%20C67.4%20670.3%2052.3%20678.3%2035.8%20681.0%20C28.6%20682.1%2025.6%20682.2%2022.0%20681.1%20Z%22%2F%3E%20%3Cpath%20d%3D%22M679.0%20681.4%20C640.7%20678.0%20615.2%20668.4%20589.1%20647.7%20C580.6%20640.9%20565.4%20624.0%20558.3%20613.2%20C538.3%20583.1%20529.9%20550.4%20531.3%20507.7%20C532.3%20478.5%20536.3%20456.1%20545.2%20429.6%20C549.2%20417.7%20550.8%20413.7%20558.1%20398.4%20C568.6%20376.2%20588.5%20347.0%20607.5%20326.0%20C610.2%20322.9%20614.3%20318.4%20616.5%20316.0%20C636.8%20293.3%20673.3%20269.1%20701.5%20259.5%20C712.2%20255.9%20721.4%20253.3%20728.5%20252.0%20C731.2%20251.5%20737.5%20250.4%20742.5%20249.5%20C748.7%20248.3%20757.6%20247.8%20771.5%20247.7%20C793.4%20247.6%20801.1%20248.8%20816.0%20255.0%20C834.6%20262.7%20852.4%20280.1%20864.1%20302.0%20C867.8%20308.9%20872.7%20320.5%20874.1%20325.5%20C878.0%20340.3%20879.2%20346.0%20880.5%20355.4%20C881.3%20361.5%20882.0%20369.1%20882.0%20372.4%20C882.1%20386.3%20883.8%20383.2%20895.0%20350.0%20C896.6%20345.3%20900.9%20333.0%20904.5%20322.5%20C908.2%20312.0%20912.0%20301.0%20913.0%20298.0%20C918.2%20282.7%20926.9%20257.9%20927.5%20257.0%20C928.3%20255.7%201001.0%20255.6%201001.0%20257.0%20C1001.0%20257.5%201000.5%20259.2%20999.9%20260.7%20C999.3%20262.2%20998.4%20264.4%20998.0%20265.5%20C997.6%20266.6%20996.8%20268.6%20996.2%20270.0%20C995.6%20271.4%20989.5%20287.1%20982.5%20305.0%20C975.5%20322.9%20969.4%20338.6%20968.8%20340.0%20C968.2%20341.4%20967.4%20343.4%20966.9%20344.5%20C966.5%20345.6%20957.1%20369.7%20946.0%20398.0%20C934.9%20426.3%20925.4%20450.5%20924.9%20451.8%20C924.4%20453.0%20923.6%20455.0%20923.1%20456.2%20C922.6%20457.5%20916.5%20473.1%20909.5%20491.0%20C902.5%20508.9%20896.4%20524.5%20895.9%20525.8%20C888.2%20544.6%20887.9%20545.7%20888.5%20553.8%20C890.5%20578.7%20901.2%20603.3%20914.3%20612.8%20C922.0%20618.4%20926.7%20620.3%20937.3%20622.0%20C943.4%20623.0%20946.6%20623.0%20952.8%20622.1%20C967.0%20619.8%20973.0%20617.0%20981.8%20608.6%20C986.4%20604.3%20999.0%20587.3%20999.0%20585.5%20C999.0%20585.2%20999.7%20583.8%201000.6%20582.5%20L1002.2%20580.1%20L1008.8%20583.5%20C1018.8%20588.6%201018.3%20587.9%201016.6%20594.1%20C1008.4%20625.5%20989.4%20656.8%20970.4%20670.0%20C959.4%20677.7%20947.1%20681.4%20932.5%20681.4%20C916.9%20681.5%20907.7%20678.0%20896.4%20667.7%20C883.3%20655.7%20874.6%20637.4%20869.2%20610.0%20C868.6%20607.0%20867.6%20602.2%20867.1%20599.5%20C866.5%20596.8%20865.8%20589.2%20865.4%20582.8%20C864.7%20570.5%20863.6%20568.2%20861.1%20573.7%20C859.7%20576.7%20849.1%20593.2%20848.1%20594.0%20C847.7%20594.3%20846.3%20596.1%20845.0%20598.0%20C842.6%20601.4%20841.7%20602.5%20833.6%20611.9%20C827.6%20618.9%20810.3%20635.6%20802.5%20642.0%20C785.7%20655.7%20765.4%20667.0%20747.5%20672.8%20C724.9%20680.1%20699.8%20683.2%20679.0%20681.4%20Z%20M709.8%20657.0%20C726.6%20653.6%20737.1%20649.2%20751.5%20639.6%20C761.3%20633.1%20777.9%20617.6%20787.0%20606.5%20C799.6%20591.0%20815.4%20564.4%20822.0%20547.5%20C823.3%20544.2%20824.6%20541.0%20825.0%20540.5%20C827.0%20537.7%20841.3%20497.4%20844.6%20485.3%20C845.5%20482.1%20846.6%20477.9%20847.2%20476.0%20C847.7%20474.1%20848.6%20470.5%20849.2%20468.0%20C849.7%20465.5%20850.6%20461.7%20851.1%20459.5%20C862.6%20409.7%20862.4%20351.7%20850.8%20322.0%20C842.1%20299.7%20830.4%20284.4%20816.7%20277.6%20C788.3%20263.4%20748.0%20268.4%20718.0%20289.8%20C710.1%20295.4%20693.5%20311.9%20685.7%20321.6%20C671.3%20339.9%20655.5%20366.9%20648.0%20386.0%20C646.8%20389.0%20645.2%20393.1%20644.3%20395.0%20C641.5%20401.6%20641.1%20402.5%20636.2%20416.0%20C631.7%20428.4%20625.5%20447.7%20622.8%20457.5%20C622.3%20459.7%20621.4%20462.6%20621.0%20464.0%20C619.0%20470.2%20614.6%20491.3%20612.6%20504.0%20C608.3%20530.8%20607.5%20561.2%20610.5%20578.5%20C612.3%20588.8%20616.6%20603.3%20620.0%20610.7%20C621.1%20613.1%20622.0%20615.2%20622.0%20615.5%20C622.0%20616.6%20630.3%20629.7%20634.2%20634.8%20C642.0%20644.8%20655.4%20653.1%20670.0%20656.9%20C680.4%20659.6%20697.1%20659.6%20709.8%20657.0%20Z%22%2F%3E%20%3Cpath%20d%3D%22M1371.5%20681.4%20C1370.4%20681.2%201367.5%20680.4%201365.0%20679.8%20C1347.4%20675.5%201332.4%20658.8%201324.2%20634.5%20C1320.9%20624.5%201317.6%20603.5%201314.9%20575.0%20C1313.0%20555.2%201314.5%20445.9%201317.6%20379.8%20C1318.3%20364.0%201317.9%20361.9%201315.0%20365.2%20C1313.8%20366.6%201295.2%20395.6%201288.7%20406.0%20C1286.5%20409.6%201280.4%20419.2%201275.0%20427.5%20C1251.1%20464.5%201243.5%20476.4%201243.1%20477.4%20C1242.9%20478.0%201237.1%20486.9%201230.3%20497.3%20C1223.6%20507.6%201218.0%20516.3%201218.0%20516.5%20C1218.0%20516.7%201213.0%20524.7%201206.8%20534.2%20C1195.5%20551.7%201180.9%20574.6%201159.8%20607.5%20C1135.3%20645.8%201122.6%20665.6%201120.4%20669.2%20L1118.0%20673.0%20L1075.9%20673.0%20C1042.6%20673.0%201033.9%20672.7%201034.3%20671.8%20C1034.5%20671.1%201048.4%20649.8%201065.0%20624.5%20C1081.7%20599.2%201098.6%20573.5%201102.5%20567.5%20C1106.5%20561.5%201158.4%20482.5%201217.9%20392.1%20L1326.0%20227.8%20L1326.0%20180.6%20C1326.0%20134.1%201325.4%20122.8%201322.1%20106.2%20C1319.4%2092.9%201311.6%2084.8%201296.5%2079.8%20C1294.0%2079.0%201287.3%2078.5%201278.5%2078.5%20C1266.5%2078.5%201263.5%2078.8%201257.6%2080.8%20C1249.4%2083.6%201241.2%2088.7%201235.2%2095.0%20C1230.0%20100.4%201215.5%20119.6%201211.6%20126.2%20C1207.2%20133.8%201207.4%20133.8%201195.5%20129.0%20C1189.5%20126.6%201185.0%20124.2%201185.0%20123.4%20C1185.0%20122.7%201185.5%20120.8%201186.1%20119.3%20C1186.7%20117.8%201187.6%20115.6%201188.0%20114.5%20C1191.6%20105.7%201193.6%20101.3%201201.7%2085.0%20C1218.5%2051.3%201225.1%2040.9%201239.0%2025.6%20C1243.3%2020.9%201255.2%2011.1%201260.0%208.4%20C1277.4%20-1.6%201302.7%20-2.9%201321.0%205.3%20C1333.9%2011.1%201344.0%2025.5%201348.9%2045.0%20C1355.0%2069.5%201355.5%2075.3%201355.5%20120.5%20C1355.4%20143.6%201354.9%20178.7%201354.2%20198.5%20C1353.5%20218.3%201352.5%20247.8%201352.0%20264.0%20C1349.6%20334.3%201348.9%20355.1%201348.0%20381.0%20C1345.9%20437.7%201345.0%20462.1%201343.9%20484.1%20C1341.7%20531.6%201348.3%20574.1%201360.9%20592.3%20C1368.5%20603.4%201380.4%20609.0%201396.5%20609.0%20C1410.1%20609.0%201421.3%20605.3%201430.7%20597.8%20C1436.8%20593.0%201445.9%20580.5%201451.5%20569.2%20C1454.2%20563.9%201456.7%20559.0%201457.2%20558.4%20C1457.8%20557.6%201460.1%20558.1%201465.3%20560.4%20C1469.2%20562.1%201473.1%20563.9%201473.8%20564.4%20C1475.2%20565.2%201474.9%20569.6%201473.1%20575.0%20C1472.6%20576.4%201471.7%20579.5%201471.0%20582.0%20C1466.7%20597.1%201464.7%20602.2%201456.9%20618.5%20C1444.6%20643.9%201433.7%20659.1%201422.0%20667.1%20C1420.1%20668.4%201418.0%20669.9%201417.4%20670.5%20C1415.3%20672.5%201403.4%20678.1%201398.0%20679.5%20C1392.4%20681.1%201375.1%20682.3%201371.5%20681.4%20Z%22%2F%3E%20%3Cpath%20d%3D%22M1672.1%20681.0%20C1657.2%20679.4%201632.4%20673.6%201625.0%20670.0%20C1624.2%20669.6%201620.3%20667.8%201616.5%20666.0%20C1600.1%20658.3%201578.3%20641.0%201567.9%20627.3%20C1565.5%20624.1%201563.3%20621.3%201563.0%20621.0%20C1562.7%20620.7%201560.9%20617.8%201558.9%20614.5%20C1549.1%20598.4%201544.3%20585.1%201540.3%20564.0%20C1538.4%20553.4%201538.1%20517.1%201539.9%20506.0%20C1542.6%20489.8%201543.2%20486.2%201545.2%20478.0%20C1549.2%20461.3%201554.8%20445.0%201562.1%20429.2%20C1564.3%20424.6%201566.0%20420.6%201566.0%20420.4%20C1566.0%20419.8%201580.2%20395.6%201583.9%20390.0%20C1596.0%20371.6%201611.0%20353.7%201631.0%20333.7%20C1649.6%20315.2%201656.9%20308.8%201672.0%20297.8%20C1708.4%20271.4%201745.2%20256.4%201792.5%20248.8%20C1804.3%20246.9%201842.2%20247.2%201853.0%20249.3%20C1876.5%20253.8%201885.4%20256.7%201902.2%20265.1%20C1937.7%20283.0%201961.2%20312.6%201970.3%20351.0%20C1973.5%20364.4%201974.4%20373.0%201974.4%20390.5%20C1974.4%20414.1%201971.9%20430.5%201964.0%20458.5%20C1960.2%20472.1%201949.9%20495.9%201940.4%20513.0%20C1935.7%20521.5%201923.2%20540.5%201916.1%20550.0%20C1900.2%20571.2%201869.5%20603.4%201850.5%20618.6%20C1841.4%20625.9%201815.9%20644.0%201814.7%20644.0%20C1814.4%20644.0%201811.2%20645.9%201807.4%20648.1%20C1796.7%20654.6%201775.9%20664.5%201766.1%20667.6%20C1763.6%20668.4%201760.6%20669.5%201759.5%20669.9%20C1758.4%20670.4%201755.5%20671.3%201753.0%20672.0%20C1750.5%20672.7%201747.4%20673.6%201746.0%20674.0%20C1743.6%20674.8%201738.3%20676.1%201731.5%20677.5%20C1715.7%20681.0%201687.5%20682.6%201672.1%20681.0%20Z%20M1718.7%20657.6%20C1742.0%20653.4%201762.5%20642.9%201783.6%20624.2%20C1801.7%20608.0%201817.2%20589.1%201832.0%20565.0%20C1836.4%20557.9%201854.0%20523.1%201854.0%20521.5%20C1854.0%20521.3%201855.3%20518.1%201857.0%20514.5%20C1858.7%20510.9%201860.0%20507.7%201860.0%20507.5%20C1860.0%20507.2%201860.8%20505.1%201861.9%20502.7%20C1862.9%20500.4%201864.7%20495.9%201865.9%20492.8%20C1867.0%20489.6%201868.9%20484.6%201870.0%20481.8%20C1880.5%20454.0%201888.2%20420.9%201891.5%20389.0%20C1893.8%20366.5%201893.1%20348.5%201889.1%20329.0%20C1885.9%20313.8%201878.6%20297.7%201871.1%20289.6%20C1866.0%20284.1%201855.0%20277.5%201845.5%20274.2%20C1830.7%20269.0%201802.8%20268.1%201786.0%20272.1%20C1770.7%20275.8%201754.5%20283.4%201742.2%20292.8%20C1727.7%20303.9%201707.1%20325.7%201694.0%20343.8%20C1675.7%20369.0%201653.1%20416.2%201639.3%20458.0%20C1622.7%20508.5%201616.5%20559.8%201623.1%20593.0%20C1630.0%20627.8%201648.4%20649.2%201678.1%20657.0%20C1687.3%20659.4%201706.8%20659.6%201718.7%20657.6%20Z%20M1805.7%20199.2%20C1805.4%20198.8%201807.3%20195.7%201809.9%20192.3%20C1812.4%20188.9%201816.7%20183.1%201819.4%20179.3%20C1824.4%20172.5%201830.2%20164.6%201840.3%20150.8%20C1843.2%20146.8%201849.4%20138.3%201854.0%20132.0%20C1858.6%20125.7%201866.2%20115.3%201870.8%20109.0%20C1884.8%2090.1%201886.2%2088.1%201897.6%2072.5%20C1903.6%2064.2%201909.8%2055.7%201911.5%2053.5%20C1913.1%2051.2%201916.5%2046.6%201919.0%2043.1%20C1924.7%2035.3%201932.5%2031.0%201941.3%2031.0%20C1957.6%2031.0%201970.8%2046.9%201966.9%2061.9%20C1965.6%2067.2%201962.5%2071.4%201957.4%2075.2%20C1955.7%2076.5%201932.3%2099.1%201905.4%20125.6%20C1878.5%20152.0%201850.4%20179.6%201843.0%20186.8%20L1829.5%20199.9%20L1817.8%20200.0%20C1811.4%20200.0%201805.9%20199.7%201805.7%20199.2%20Z%22%2F%3E%20%3C%2Fsvg%3E") no-repeat center / contain; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221975%22%20height%3D%22682%22%20viewBox%3D%220%200%201975%20682%22%20fill%3D%22%23000%22%3E%20%3Cpath%20d%3D%22M22.0%20681.1%20C14.4%20678.8%207.6%20672.7%203.2%20664.5%20C0.7%20659.8%200.5%20658.7%200.6%20646.5%20C0.6%20636.5%201.2%20631.4%202.9%20624.5%20C5.4%20614.7%2013.3%20597.4%2020.0%20587.0%20C35.0%20564.0%2062.9%20536.1%2097.4%20509.7%20C110.7%20499.5%20112.3%20498.4%20130.4%20485.7%20C137.3%20480.9%20143.2%20476.5%20143.5%20475.9%20C144.3%20474.7%20149.7%20453.6%20151.0%20446.5%20C158.5%20407.8%20159.0%20374.2%20152.5%20354.5%20C149.8%20346.4%20148.3%20343.7%20144.3%20339.6%20C133.4%20328.6%20113.4%20326.0%2091.2%20332.9%20C83.6%20335.2%2074.3%20341.6%2065.5%20350.4%20C54.7%20361.3%2048.6%20369.2%2041.7%20381.2%20C38.9%20386.1%2036.3%20390.3%2035.9%20390.5%20C35.1%20391.1%2021.0%20387.0%2019.4%20385.8%20C18.2%20384.9%2018.3%20384.2%2022.1%20373.5%20C28.1%20356.3%2037.3%20336.7%2046.1%20322.0%20C48.9%20317.3%2052.0%20312.1%2053.0%20310.4%20C57.1%20303.3%2068.7%20287.4%2073.9%20281.7%20C88.5%20265.7%20100.3%20257.2%20116.5%20251.0%20C126.4%20247.1%20146.6%20246.2%20155.1%20249.2%20C166.4%20253.3%20175.4%20260.9%20179.8%20270.2%20C184.9%20281.1%20189.3%20299.8%20191.1%20317.9%20C193.0%20336.6%20190.8%20371.3%20186.0%20399.9%20C183.8%20412.4%20183.2%20415.3%20179.4%20430.5%20C176.9%20440.1%20176.4%20442.2%20173.9%20450.8%20C172.0%20457.6%20171.8%20459.0%20172.6%20459.0%20C173.4%20459.0%20177.6%20456.6%20192.8%20447.9%20C194.5%20446.8%20197.5%20445.2%20199.2%20444.1%20C201.0%20443.1%20209.2%20438.3%20217.5%20433.5%20C225.8%20428.7%20233.9%20424.0%20235.5%20423.0%20C237.1%20422.0%20245.2%20417.3%20253.5%20412.5%20C261.8%20407.7%20270.0%20402.9%20271.8%20401.9%20C273.5%20400.8%20276.5%20399.2%20278.2%20398.1%20C280.0%20397.1%20288.2%20392.3%20296.5%20387.5%20C304.8%20382.7%20312.9%20377.9%20314.5%20377.0%20C316.1%20376.0%20319.0%20374.4%20320.7%20373.4%20C323.5%20371.8%20324.8%20369.5%20329.6%20357.6%20C353.1%20298.8%20381.1%20262.1%20411.5%20250.4%20C417.6%20248.0%20420.0%20247.7%20430.0%20247.6%20C441.3%20247.5%20443.0%20247.8%20451.8%20251.7%20C462.8%20256.6%20466.3%20269.4%20462.4%20291.5%20C458.7%20312.8%20447.6%20336.9%20433.1%20355.0%20C409.5%20384.5%20392.2%20400.0%20353.4%20426.0%20C333.1%20439.7%20331.0%20441.4%20330.0%20444.8%20C328.3%20450.5%20325.9%20458.8%20324.1%20465.0%20C322.6%20470.7%20315.0%20499.9%20312.9%20508.0%20C306.8%20532.7%20305.2%20559.0%20309.1%20571.1%20C315.8%20591.9%20333.7%20603.9%20358.0%20604.0%20C375.8%20604.0%20392.8%20596.1%20405.4%20581.8%20C414.8%20571.2%20426.6%20552.1%20431.0%20540.4%20C432.1%20537.5%20432.1%20537.5%20440.5%20540.7%20C448.8%20543.8%20448.8%20543.8%20445.9%20553.5%20C432.8%20597.7%20420.2%20622.3%20396.0%20650.4%20C394.6%20652.0%20389.6%20656.5%20384.9%20660.5%20C357.2%20683.7%20318.4%20688.5%20298.1%20671.4%20C288.1%20662.9%20279.4%20643.5%20276.9%20624.3%20C274.3%20603.7%20280.1%20539.5%20287.6%20507.2%20C292.6%20485.6%20297.1%20469.2%20300.5%20460.8%20C300.9%20459.7%20300.8%20459.0%20300.0%20459.0%20C298.9%20459.0%20278.5%20471.0%20230.0%20500.0%20C210.5%20511.7%20188.0%20525.1%20185.5%20526.4%20C174.6%20532.5%20144.0%20551.3%20142.9%20552.7%20C142.0%20553.7%20139.6%20558.8%20137.5%20564.0%20C123.4%20599.0%2098.6%20639.7%2080.8%20657.2%20C67.4%20670.3%2052.3%20678.3%2035.8%20681.0%20C28.6%20682.1%2025.6%20682.2%2022.0%20681.1%20Z%22%2F%3E%20%3Cpath%20d%3D%22M679.0%20681.4%20C640.7%20678.0%20615.2%20668.4%20589.1%20647.7%20C580.6%20640.9%20565.4%20624.0%20558.3%20613.2%20C538.3%20583.1%20529.9%20550.4%20531.3%20507.7%20C532.3%20478.5%20536.3%20456.1%20545.2%20429.6%20C549.2%20417.7%20550.8%20413.7%20558.1%20398.4%20C568.6%20376.2%20588.5%20347.0%20607.5%20326.0%20C610.2%20322.9%20614.3%20318.4%20616.5%20316.0%20C636.8%20293.3%20673.3%20269.1%20701.5%20259.5%20C712.2%20255.9%20721.4%20253.3%20728.5%20252.0%20C731.2%20251.5%20737.5%20250.4%20742.5%20249.5%20C748.7%20248.3%20757.6%20247.8%20771.5%20247.7%20C793.4%20247.6%20801.1%20248.8%20816.0%20255.0%20C834.6%20262.7%20852.4%20280.1%20864.1%20302.0%20C867.8%20308.9%20872.7%20320.5%20874.1%20325.5%20C878.0%20340.3%20879.2%20346.0%20880.5%20355.4%20C881.3%20361.5%20882.0%20369.1%20882.0%20372.4%20C882.1%20386.3%20883.8%20383.2%20895.0%20350.0%20C896.6%20345.3%20900.9%20333.0%20904.5%20322.5%20C908.2%20312.0%20912.0%20301.0%20913.0%20298.0%20C918.2%20282.7%20926.9%20257.9%20927.5%20257.0%20C928.3%20255.7%201001.0%20255.6%201001.0%20257.0%20C1001.0%20257.5%201000.5%20259.2%20999.9%20260.7%20C999.3%20262.2%20998.4%20264.4%20998.0%20265.5%20C997.6%20266.6%20996.8%20268.6%20996.2%20270.0%20C995.6%20271.4%20989.5%20287.1%20982.5%20305.0%20C975.5%20322.9%20969.4%20338.6%20968.8%20340.0%20C968.2%20341.4%20967.4%20343.4%20966.9%20344.5%20C966.5%20345.6%20957.1%20369.7%20946.0%20398.0%20C934.9%20426.3%20925.4%20450.5%20924.9%20451.8%20C924.4%20453.0%20923.6%20455.0%20923.1%20456.2%20C922.6%20457.5%20916.5%20473.1%20909.5%20491.0%20C902.5%20508.9%20896.4%20524.5%20895.9%20525.8%20C888.2%20544.6%20887.9%20545.7%20888.5%20553.8%20C890.5%20578.7%20901.2%20603.3%20914.3%20612.8%20C922.0%20618.4%20926.7%20620.3%20937.3%20622.0%20C943.4%20623.0%20946.6%20623.0%20952.8%20622.1%20C967.0%20619.8%20973.0%20617.0%20981.8%20608.6%20C986.4%20604.3%20999.0%20587.3%20999.0%20585.5%20C999.0%20585.2%20999.7%20583.8%201000.6%20582.5%20L1002.2%20580.1%20L1008.8%20583.5%20C1018.8%20588.6%201018.3%20587.9%201016.6%20594.1%20C1008.4%20625.5%20989.4%20656.8%20970.4%20670.0%20C959.4%20677.7%20947.1%20681.4%20932.5%20681.4%20C916.9%20681.5%20907.7%20678.0%20896.4%20667.7%20C883.3%20655.7%20874.6%20637.4%20869.2%20610.0%20C868.6%20607.0%20867.6%20602.2%20867.1%20599.5%20C866.5%20596.8%20865.8%20589.2%20865.4%20582.8%20C864.7%20570.5%20863.6%20568.2%20861.1%20573.7%20C859.7%20576.7%20849.1%20593.2%20848.1%20594.0%20C847.7%20594.3%20846.3%20596.1%20845.0%20598.0%20C842.6%20601.4%20841.7%20602.5%20833.6%20611.9%20C827.6%20618.9%20810.3%20635.6%20802.5%20642.0%20C785.7%20655.7%20765.4%20667.0%20747.5%20672.8%20C724.9%20680.1%20699.8%20683.2%20679.0%20681.4%20Z%20M709.8%20657.0%20C726.6%20653.6%20737.1%20649.2%20751.5%20639.6%20C761.3%20633.1%20777.9%20617.6%20787.0%20606.5%20C799.6%20591.0%20815.4%20564.4%20822.0%20547.5%20C823.3%20544.2%20824.6%20541.0%20825.0%20540.5%20C827.0%20537.7%20841.3%20497.4%20844.6%20485.3%20C845.5%20482.1%20846.6%20477.9%20847.2%20476.0%20C847.7%20474.1%20848.6%20470.5%20849.2%20468.0%20C849.7%20465.5%20850.6%20461.7%20851.1%20459.5%20C862.6%20409.7%20862.4%20351.7%20850.8%20322.0%20C842.1%20299.7%20830.4%20284.4%20816.7%20277.6%20C788.3%20263.4%20748.0%20268.4%20718.0%20289.8%20C710.1%20295.4%20693.5%20311.9%20685.7%20321.6%20C671.3%20339.9%20655.5%20366.9%20648.0%20386.0%20C646.8%20389.0%20645.2%20393.1%20644.3%20395.0%20C641.5%20401.6%20641.1%20402.5%20636.2%20416.0%20C631.7%20428.4%20625.5%20447.7%20622.8%20457.5%20C622.3%20459.7%20621.4%20462.6%20621.0%20464.0%20C619.0%20470.2%20614.6%20491.3%20612.6%20504.0%20C608.3%20530.8%20607.5%20561.2%20610.5%20578.5%20C612.3%20588.8%20616.6%20603.3%20620.0%20610.7%20C621.1%20613.1%20622.0%20615.2%20622.0%20615.5%20C622.0%20616.6%20630.3%20629.7%20634.2%20634.8%20C642.0%20644.8%20655.4%20653.1%20670.0%20656.9%20C680.4%20659.6%20697.1%20659.6%20709.8%20657.0%20Z%22%2F%3E%20%3Cpath%20d%3D%22M1371.5%20681.4%20C1370.4%20681.2%201367.5%20680.4%201365.0%20679.8%20C1347.4%20675.5%201332.4%20658.8%201324.2%20634.5%20C1320.9%20624.5%201317.6%20603.5%201314.9%20575.0%20C1313.0%20555.2%201314.5%20445.9%201317.6%20379.8%20C1318.3%20364.0%201317.9%20361.9%201315.0%20365.2%20C1313.8%20366.6%201295.2%20395.6%201288.7%20406.0%20C1286.5%20409.6%201280.4%20419.2%201275.0%20427.5%20C1251.1%20464.5%201243.5%20476.4%201243.1%20477.4%20C1242.9%20478.0%201237.1%20486.9%201230.3%20497.3%20C1223.6%20507.6%201218.0%20516.3%201218.0%20516.5%20C1218.0%20516.7%201213.0%20524.7%201206.8%20534.2%20C1195.5%20551.7%201180.9%20574.6%201159.8%20607.5%20C1135.3%20645.8%201122.6%20665.6%201120.4%20669.2%20L1118.0%20673.0%20L1075.9%20673.0%20C1042.6%20673.0%201033.9%20672.7%201034.3%20671.8%20C1034.5%20671.1%201048.4%20649.8%201065.0%20624.5%20C1081.7%20599.2%201098.6%20573.5%201102.5%20567.5%20C1106.5%20561.5%201158.4%20482.5%201217.9%20392.1%20L1326.0%20227.8%20L1326.0%20180.6%20C1326.0%20134.1%201325.4%20122.8%201322.1%20106.2%20C1319.4%2092.9%201311.6%2084.8%201296.5%2079.8%20C1294.0%2079.0%201287.3%2078.5%201278.5%2078.5%20C1266.5%2078.5%201263.5%2078.8%201257.6%2080.8%20C1249.4%2083.6%201241.2%2088.7%201235.2%2095.0%20C1230.0%20100.4%201215.5%20119.6%201211.6%20126.2%20C1207.2%20133.8%201207.4%20133.8%201195.5%20129.0%20C1189.5%20126.6%201185.0%20124.2%201185.0%20123.4%20C1185.0%20122.7%201185.5%20120.8%201186.1%20119.3%20C1186.7%20117.8%201187.6%20115.6%201188.0%20114.5%20C1191.6%20105.7%201193.6%20101.3%201201.7%2085.0%20C1218.5%2051.3%201225.1%2040.9%201239.0%2025.6%20C1243.3%2020.9%201255.2%2011.1%201260.0%208.4%20C1277.4%20-1.6%201302.7%20-2.9%201321.0%205.3%20C1333.9%2011.1%201344.0%2025.5%201348.9%2045.0%20C1355.0%2069.5%201355.5%2075.3%201355.5%20120.5%20C1355.4%20143.6%201354.9%20178.7%201354.2%20198.5%20C1353.5%20218.3%201352.5%20247.8%201352.0%20264.0%20C1349.6%20334.3%201348.9%20355.1%201348.0%20381.0%20C1345.9%20437.7%201345.0%20462.1%201343.9%20484.1%20C1341.7%20531.6%201348.3%20574.1%201360.9%20592.3%20C1368.5%20603.4%201380.4%20609.0%201396.5%20609.0%20C1410.1%20609.0%201421.3%20605.3%201430.7%20597.8%20C1436.8%20593.0%201445.9%20580.5%201451.5%20569.2%20C1454.2%20563.9%201456.7%20559.0%201457.2%20558.4%20C1457.8%20557.6%201460.1%20558.1%201465.3%20560.4%20C1469.2%20562.1%201473.1%20563.9%201473.8%20564.4%20C1475.2%20565.2%201474.9%20569.6%201473.1%20575.0%20C1472.6%20576.4%201471.7%20579.5%201471.0%20582.0%20C1466.7%20597.1%201464.7%20602.2%201456.9%20618.5%20C1444.6%20643.9%201433.7%20659.1%201422.0%20667.1%20C1420.1%20668.4%201418.0%20669.9%201417.4%20670.5%20C1415.3%20672.5%201403.4%20678.1%201398.0%20679.5%20C1392.4%20681.1%201375.1%20682.3%201371.5%20681.4%20Z%22%2F%3E%20%3Cpath%20d%3D%22M1672.1%20681.0%20C1657.2%20679.4%201632.4%20673.6%201625.0%20670.0%20C1624.2%20669.6%201620.3%20667.8%201616.5%20666.0%20C1600.1%20658.3%201578.3%20641.0%201567.9%20627.3%20C1565.5%20624.1%201563.3%20621.3%201563.0%20621.0%20C1562.7%20620.7%201560.9%20617.8%201558.9%20614.5%20C1549.1%20598.4%201544.3%20585.1%201540.3%20564.0%20C1538.4%20553.4%201538.1%20517.1%201539.9%20506.0%20C1542.6%20489.8%201543.2%20486.2%201545.2%20478.0%20C1549.2%20461.3%201554.8%20445.0%201562.1%20429.2%20C1564.3%20424.6%201566.0%20420.6%201566.0%20420.4%20C1566.0%20419.8%201580.2%20395.6%201583.9%20390.0%20C1596.0%20371.6%201611.0%20353.7%201631.0%20333.7%20C1649.6%20315.2%201656.9%20308.8%201672.0%20297.8%20C1708.4%20271.4%201745.2%20256.4%201792.5%20248.8%20C1804.3%20246.9%201842.2%20247.2%201853.0%20249.3%20C1876.5%20253.8%201885.4%20256.7%201902.2%20265.1%20C1937.7%20283.0%201961.2%20312.6%201970.3%20351.0%20C1973.5%20364.4%201974.4%20373.0%201974.4%20390.5%20C1974.4%20414.1%201971.9%20430.5%201964.0%20458.5%20C1960.2%20472.1%201949.9%20495.9%201940.4%20513.0%20C1935.7%20521.5%201923.2%20540.5%201916.1%20550.0%20C1900.2%20571.2%201869.5%20603.4%201850.5%20618.6%20C1841.4%20625.9%201815.9%20644.0%201814.7%20644.0%20C1814.4%20644.0%201811.2%20645.9%201807.4%20648.1%20C1796.7%20654.6%201775.9%20664.5%201766.1%20667.6%20C1763.6%20668.4%201760.6%20669.5%201759.5%20669.9%20C1758.4%20670.4%201755.5%20671.3%201753.0%20672.0%20C1750.5%20672.7%201747.4%20673.6%201746.0%20674.0%20C1743.6%20674.8%201738.3%20676.1%201731.5%20677.5%20C1715.7%20681.0%201687.5%20682.6%201672.1%20681.0%20Z%20M1718.7%20657.6%20C1742.0%20653.4%201762.5%20642.9%201783.6%20624.2%20C1801.7%20608.0%201817.2%20589.1%201832.0%20565.0%20C1836.4%20557.9%201854.0%20523.1%201854.0%20521.5%20C1854.0%20521.3%201855.3%20518.1%201857.0%20514.5%20C1858.7%20510.9%201860.0%20507.7%201860.0%20507.5%20C1860.0%20507.2%201860.8%20505.1%201861.9%20502.7%20C1862.9%20500.4%201864.7%20495.9%201865.9%20492.8%20C1867.0%20489.6%201868.9%20484.6%201870.0%20481.8%20C1880.5%20454.0%201888.2%20420.9%201891.5%20389.0%20C1893.8%20366.5%201893.1%20348.5%201889.1%20329.0%20C1885.9%20313.8%201878.6%20297.7%201871.1%20289.6%20C1866.0%20284.1%201855.0%20277.5%201845.5%20274.2%20C1830.7%20269.0%201802.8%20268.1%201786.0%20272.1%20C1770.7%20275.8%201754.5%20283.4%201742.2%20292.8%20C1727.7%20303.9%201707.1%20325.7%201694.0%20343.8%20C1675.7%20369.0%201653.1%20416.2%201639.3%20458.0%20C1622.7%20508.5%201616.5%20559.8%201623.1%20593.0%20C1630.0%20627.8%201648.4%20649.2%201678.1%20657.0%20C1687.3%20659.4%201706.8%20659.6%201718.7%20657.6%20Z%20M1805.7%20199.2%20C1805.4%20198.8%201807.3%20195.7%201809.9%20192.3%20C1812.4%20188.9%201816.7%20183.1%201819.4%20179.3%20C1824.4%20172.5%201830.2%20164.6%201840.3%20150.8%20C1843.2%20146.8%201849.4%20138.3%201854.0%20132.0%20C1858.6%20125.7%201866.2%20115.3%201870.8%20109.0%20C1884.8%2090.1%201886.2%2088.1%201897.6%2072.5%20C1903.6%2064.2%201909.8%2055.7%201911.5%2053.5%20C1913.1%2051.2%201916.5%2046.6%201919.0%2043.1%20C1924.7%2035.3%201932.5%2031.0%201941.3%2031.0%20C1957.6%2031.0%201970.8%2046.9%201966.9%2061.9%20C1965.6%2067.2%201962.5%2071.4%201957.4%2075.2%20C1955.7%2076.5%201932.3%2099.1%201905.4%20125.6%20C1878.5%20152.0%201850.4%20179.6%201843.0%20186.8%20L1829.5%20199.9%20L1817.8%20200.0%20C1811.4%20200.0%201805.9%20199.7%201805.7%20199.2%20Z%22%2F%3E%20%3C%2Fsvg%3E") no-repeat center / contain; } /* 33cqi puts good at 82% of the width of the box and fills 90% of its height, so it carries the same weight as the Greek without outgrowing it. The nudge up is because a line box centres the em, not the ink. */ .mark::after{ content:'good'; position:absolute;inset:0; display:grid;place-items:center; font-family:var(--display);font-weight:400;line-height:1; color:currentColor;opacity:0; font-size:clamp(2rem,12vw,13rem); font-size:33cqi; transform:translateY(-10.5%); } .mark.in,.in .mark{opacity:1;transform:none} /* Once the script has both words in a buffer it takes the section over with a canvas and the pair pixelate into each other. Until then, and for anyone the script never reaches, the crossfade below still runs. */ .mark canvas{position:absolute;inset:0;width:100%;height:100%;display:block} .mark-live::before,.mark-live::after{display:none} /* The two words change in the same quarter second and on exactly the same frames, so it reads as one switch rather than one word leaving and another arriving. Linear, because easing both makes them dip together at the midpoint and the whole thing goes momentarily see through. */ @keyframes kalo-out{0%,44%{opacity:1} 50%,94%{opacity:0} 100%{opacity:1}} @keyframes good-in { 0%,44%{opacity:0} 50%,94%{opacity:1} 100%{opacity:0}} .mark.in::before,.in .mark::before{animation:kalo-out 4.3s linear 1s infinite} .mark.in::after, .in .mark::after {animation:good-in 4.3s linear 1s infinite} @media(prefers-reduced-motion:reduce){ .mark.in::before,.in .mark::before{animation:none;opacity:1} .mark.in::after,.in .mark::after{animation:none;display:none} } .mark-sm{width:min(440px,62%)} /* the same artwork, oversized and nearly invisible */ .ghost{position:relative;overflow:hidden} .ghost::before{ content:'';position:absolute;right:-6%;bottom:-14%;z-index:0; width:clamp(520px,88vw,1320px);aspect-ratio:1975 / 682; background-color:var(--cream);opacity:.04; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221975%22%20height%3D%22682%22%20viewBox%3D%220%200%201975%20682%22%20fill%3D%22%23000%22%3E%20%3Cpath%20d%3D%22M22.0%20681.1%20C14.4%20678.8%207.6%20672.7%203.2%20664.5%20C0.7%20659.8%200.5%20658.7%200.6%20646.5%20C0.6%20636.5%201.2%20631.4%202.9%20624.5%20C5.4%20614.7%2013.3%20597.4%2020.0%20587.0%20C35.0%20564.0%2062.9%20536.1%2097.4%20509.7%20C110.7%20499.5%20112.3%20498.4%20130.4%20485.7%20C137.3%20480.9%20143.2%20476.5%20143.5%20475.9%20C144.3%20474.7%20149.7%20453.6%20151.0%20446.5%20C158.5%20407.8%20159.0%20374.2%20152.5%20354.5%20C149.8%20346.4%20148.3%20343.7%20144.3%20339.6%20C133.4%20328.6%20113.4%20326.0%2091.2%20332.9%20C83.6%20335.2%2074.3%20341.6%2065.5%20350.4%20C54.7%20361.3%2048.6%20369.2%2041.7%20381.2%20C38.9%20386.1%2036.3%20390.3%2035.9%20390.5%20C35.1%20391.1%2021.0%20387.0%2019.4%20385.8%20C18.2%20384.9%2018.3%20384.2%2022.1%20373.5%20C28.1%20356.3%2037.3%20336.7%2046.1%20322.0%20C48.9%20317.3%2052.0%20312.1%2053.0%20310.4%20C57.1%20303.3%2068.7%20287.4%2073.9%20281.7%20C88.5%20265.7%20100.3%20257.2%20116.5%20251.0%20C126.4%20247.1%20146.6%20246.2%20155.1%20249.2%20C166.4%20253.3%20175.4%20260.9%20179.8%20270.2%20C184.9%20281.1%20189.3%20299.8%20191.1%20317.9%20C193.0%20336.6%20190.8%20371.3%20186.0%20399.9%20C183.8%20412.4%20183.2%20415.3%20179.4%20430.5%20C176.9%20440.1%20176.4%20442.2%20173.9%20450.8%20C172.0%20457.6%20171.8%20459.0%20172.6%20459.0%20C173.4%20459.0%20177.6%20456.6%20192.8%20447.9%20C194.5%20446.8%20197.5%20445.2%20199.2%20444.1%20C201.0%20443.1%20209.2%20438.3%20217.5%20433.5%20C225.8%20428.7%20233.9%20424.0%20235.5%20423.0%20C237.1%20422.0%20245.2%20417.3%20253.5%20412.5%20C261.8%20407.7%20270.0%20402.9%20271.8%20401.9%20C273.5%20400.8%20276.5%20399.2%20278.2%20398.1%20C280.0%20397.1%20288.2%20392.3%20296.5%20387.5%20C304.8%20382.7%20312.9%20377.9%20314.5%20377.0%20C316.1%20376.0%20319.0%20374.4%20320.7%20373.4%20C323.5%20371.8%20324.8%20369.5%20329.6%20357.6%20C353.1%20298.8%20381.1%20262.1%20411.5%20250.4%20C417.6%20248.0%20420.0%20247.7%20430.0%20247.6%20C441.3%20247.5%20443.0%20247.8%20451.8%20251.7%20C462.8%20256.6%20466.3%20269.4%20462.4%20291.5%20C458.7%20312.8%20447.6%20336.9%20433.1%20355.0%20C409.5%20384.5%20392.2%20400.0%20353.4%20426.0%20C333.1%20439.7%20331.0%20441.4%20330.0%20444.8%20C328.3%20450.5%20325.9%20458.8%20324.1%20465.0%20C322.6%20470.7%20315.0%20499.9%20312.9%20508.0%20C306.8%20532.7%20305.2%20559.0%20309.1%20571.1%20C315.8%20591.9%20333.7%20603.9%20358.0%20604.0%20C375.8%20604.0%20392.8%20596.1%20405.4%20581.8%20C414.8%20571.2%20426.6%20552.1%20431.0%20540.4%20C432.1%20537.5%20432.1%20537.5%20440.5%20540.7%20C448.8%20543.8%20448.8%20543.8%20445.9%20553.5%20C432.8%20597.7%20420.2%20622.3%20396.0%20650.4%20C394.6%20652.0%20389.6%20656.5%20384.9%20660.5%20C357.2%20683.7%20318.4%20688.5%20298.1%20671.4%20C288.1%20662.9%20279.4%20643.5%20276.9%20624.3%20C274.3%20603.7%20280.1%20539.5%20287.6%20507.2%20C292.6%20485.6%20297.1%20469.2%20300.5%20460.8%20C300.9%20459.7%20300.8%20459.0%20300.0%20459.0%20C298.9%20459.0%20278.5%20471.0%20230.0%20500.0%20C210.5%20511.7%20188.0%20525.1%20185.5%20526.4%20C174.6%20532.5%20144.0%20551.3%20142.9%20552.7%20C142.0%20553.7%20139.6%20558.8%20137.5%20564.0%20C123.4%20599.0%2098.6%20639.7%2080.8%20657.2%20C67.4%20670.3%2052.3%20678.3%2035.8%20681.0%20C28.6%20682.1%2025.6%20682.2%2022.0%20681.1%20Z%22%2F%3E%20%3Cpath%20d%3D%22M679.0%20681.4%20C640.7%20678.0%20615.2%20668.4%20589.1%20647.7%20C580.6%20640.9%20565.4%20624.0%20558.3%20613.2%20C538.3%20583.1%20529.9%20550.4%20531.3%20507.7%20C532.3%20478.5%20536.3%20456.1%20545.2%20429.6%20C549.2%20417.7%20550.8%20413.7%20558.1%20398.4%20C568.6%20376.2%20588.5%20347.0%20607.5%20326.0%20C610.2%20322.9%20614.3%20318.4%20616.5%20316.0%20C636.8%20293.3%20673.3%20269.1%20701.5%20259.5%20C712.2%20255.9%20721.4%20253.3%20728.5%20252.0%20C731.2%20251.5%20737.5%20250.4%20742.5%20249.5%20C748.7%20248.3%20757.6%20247.8%20771.5%20247.7%20C793.4%20247.6%20801.1%20248.8%20816.0%20255.0%20C834.6%20262.7%20852.4%20280.1%20864.1%20302.0%20C867.8%20308.9%20872.7%20320.5%20874.1%20325.5%20C878.0%20340.3%20879.2%20346.0%20880.5%20355.4%20C881.3%20361.5%20882.0%20369.1%20882.0%20372.4%20C882.1%20386.3%20883.8%20383.2%20895.0%20350.0%20C896.6%20345.3%20900.9%20333.0%20904.5%20322.5%20C908.2%20312.0%20912.0%20301.0%20913.0%20298.0%20C918.2%20282.7%20926.9%20257.9%20927.5%20257.0%20C928.3%20255.7%201001.0%20255.6%201001.0%20257.0%20C1001.0%20257.5%201000.5%20259.2%20999.9%20260.7%20C999.3%20262.2%20998.4%20264.4%20998.0%20265.5%20C997.6%20266.6%20996.8%20268.6%20996.2%20270.0%20C995.6%20271.4%20989.5%20287.1%20982.5%20305.0%20C975.5%20322.9%20969.4%20338.6%20968.8%20340.0%20C968.2%20341.4%20967.4%20343.4%20966.9%20344.5%20C966.5%20345.6%20957.1%20369.7%20946.0%20398.0%20C934.9%20426.3%20925.4%20450.5%20924.9%20451.8%20C924.4%20453.0%20923.6%20455.0%20923.1%20456.2%20C922.6%20457.5%20916.5%20473.1%20909.5%20491.0%20C902.5%20508.9%20896.4%20524.5%20895.9%20525.8%20C888.2%20544.6%20887.9%20545.7%20888.5%20553.8%20C890.5%20578.7%20901.2%20603.3%20914.3%20612.8%20C922.0%20618.4%20926.7%20620.3%20937.3%20622.0%20C943.4%20623.0%20946.6%20623.0%20952.8%20622.1%20C967.0%20619.8%20973.0%20617.0%20981.8%20608.6%20C986.4%20604.3%20999.0%20587.3%20999.0%20585.5%20C999.0%20585.2%20999.7%20583.8%201000.6%20582.5%20L1002.2%20580.1%20L1008.8%20583.5%20C1018.8%20588.6%201018.3%20587.9%201016.6%20594.1%20C1008.4%20625.5%20989.4%20656.8%20970.4%20670.0%20C959.4%20677.7%20947.1%20681.4%20932.5%20681.4%20C916.9%20681.5%20907.7%20678.0%20896.4%20667.7%20C883.3%20655.7%20874.6%20637.4%20869.2%20610.0%20C868.6%20607.0%20867.6%20602.2%20867.1%20599.5%20C866.5%20596.8%20865.8%20589.2%20865.4%20582.8%20C864.7%20570.5%20863.6%20568.2%20861.1%20573.7%20C859.7%20576.7%20849.1%20593.2%20848.1%20594.0%20C847.7%20594.3%20846.3%20596.1%20845.0%20598.0%20C842.6%20601.4%20841.7%20602.5%20833.6%20611.9%20C827.6%20618.9%20810.3%20635.6%20802.5%20642.0%20C785.7%20655.7%20765.4%20667.0%20747.5%20672.8%20C724.9%20680.1%20699.8%20683.2%20679.0%20681.4%20Z%20M709.8%20657.0%20C726.6%20653.6%20737.1%20649.2%20751.5%20639.6%20C761.3%20633.1%20777.9%20617.6%20787.0%20606.5%20C799.6%20591.0%20815.4%20564.4%20822.0%20547.5%20C823.3%20544.2%20824.6%20541.0%20825.0%20540.5%20C827.0%20537.7%20841.3%20497.4%20844.6%20485.3%20C845.5%20482.1%20846.6%20477.9%20847.2%20476.0%20C847.7%20474.1%20848.6%20470.5%20849.2%20468.0%20C849.7%20465.5%20850.6%20461.7%20851.1%20459.5%20C862.6%20409.7%20862.4%20351.7%20850.8%20322.0%20C842.1%20299.7%20830.4%20284.4%20816.7%20277.6%20C788.3%20263.4%20748.0%20268.4%20718.0%20289.8%20C710.1%20295.4%20693.5%20311.9%20685.7%20321.6%20C671.3%20339.9%20655.5%20366.9%20648.0%20386.0%20C646.8%20389.0%20645.2%20393.1%20644.3%20395.0%20C641.5%20401.6%20641.1%20402.5%20636.2%20416.0%20C631.7%20428.4%20625.5%20447.7%20622.8%20457.5%20C622.3%20459.7%20621.4%20462.6%20621.0%20464.0%20C619.0%20470.2%20614.6%20491.3%20612.6%20504.0%20C608.3%20530.8%20607.5%20561.2%20610.5%20578.5%20C612.3%20588.8%20616.6%20603.3%20620.0%20610.7%20C621.1%20613.1%20622.0%20615.2%20622.0%20615.5%20C622.0%20616.6%20630.3%20629.7%20634.2%20634.8%20C642.0%20644.8%20655.4%20653.1%20670.0%20656.9%20C680.4%20659.6%20697.1%20659.6%20709.8%20657.0%20Z%22%2F%3E%20%3Cpath%20d%3D%22M1371.5%20681.4%20C1370.4%20681.2%201367.5%20680.4%201365.0%20679.8%20C1347.4%20675.5%201332.4%20658.8%201324.2%20634.5%20C1320.9%20624.5%201317.6%20603.5%201314.9%20575.0%20C1313.0%20555.2%201314.5%20445.9%201317.6%20379.8%20C1318.3%20364.0%201317.9%20361.9%201315.0%20365.2%20C1313.8%20366.6%201295.2%20395.6%201288.7%20406.0%20C1286.5%20409.6%201280.4%20419.2%201275.0%20427.5%20C1251.1%20464.5%201243.5%20476.4%201243.1%20477.4%20C1242.9%20478.0%201237.1%20486.9%201230.3%20497.3%20C1223.6%20507.6%201218.0%20516.3%201218.0%20516.5%20C1218.0%20516.7%201213.0%20524.7%201206.8%20534.2%20C1195.5%20551.7%201180.9%20574.6%201159.8%20607.5%20C1135.3%20645.8%201122.6%20665.6%201120.4%20669.2%20L1118.0%20673.0%20L1075.9%20673.0%20C1042.6%20673.0%201033.9%20672.7%201034.3%20671.8%20C1034.5%20671.1%201048.4%20649.8%201065.0%20624.5%20C1081.7%20599.2%201098.6%20573.5%201102.5%20567.5%20C1106.5%20561.5%201158.4%20482.5%201217.9%20392.1%20L1326.0%20227.8%20L1326.0%20180.6%20C1326.0%20134.1%201325.4%20122.8%201322.1%20106.2%20C1319.4%2092.9%201311.6%2084.8%201296.5%2079.8%20C1294.0%2079.0%201287.3%2078.5%201278.5%2078.5%20C1266.5%2078.5%201263.5%2078.8%201257.6%2080.8%20C1249.4%2083.6%201241.2%2088.7%201235.2%2095.0%20C1230.0%20100.4%201215.5%20119.6%201211.6%20126.2%20C1207.2%20133.8%201207.4%20133.8%201195.5%20129.0%20C1189.5%20126.6%201185.0%20124.2%201185.0%20123.4%20C1185.0%20122.7%201185.5%20120.8%201186.1%20119.3%20C1186.7%20117.8%201187.6%20115.6%201188.0%20114.5%20C1191.6%20105.7%201193.6%20101.3%201201.7%2085.0%20C1218.5%2051.3%201225.1%2040.9%201239.0%2025.6%20C1243.3%2020.9%201255.2%2011.1%201260.0%208.4%20C1277.4%20-1.6%201302.7%20-2.9%201321.0%205.3%20C1333.9%2011.1%201344.0%2025.5%201348.9%2045.0%20C1355.0%2069.5%201355.5%2075.3%201355.5%20120.5%20C1355.4%20143.6%201354.9%20178.7%201354.2%20198.5%20C1353.5%20218.3%201352.5%20247.8%201352.0%20264.0%20C1349.6%20334.3%201348.9%20355.1%201348.0%20381.0%20C1345.9%20437.7%201345.0%20462.1%201343.9%20484.1%20C1341.7%20531.6%201348.3%20574.1%201360.9%20592.3%20C1368.5%20603.4%201380.4%20609.0%201396.5%20609.0%20C1410.1%20609.0%201421.3%20605.3%201430.7%20597.8%20C1436.8%20593.0%201445.9%20580.5%201451.5%20569.2%20C1454.2%20563.9%201456.7%20559.0%201457.2%20558.4%20C1457.8%20557.6%201460.1%20558.1%201465.3%20560.4%20C1469.2%20562.1%201473.1%20563.9%201473.8%20564.4%20C1475.2%20565.2%201474.9%20569.6%201473.1%20575.0%20C1472.6%20576.4%201471.7%20579.5%201471.0%20582.0%20C1466.7%20597.1%201464.7%20602.2%201456.9%20618.5%20C1444.6%20643.9%201433.7%20659.1%201422.0%20667.1%20C1420.1%20668.4%201418.0%20669.9%201417.4%20670.5%20C1415.3%20672.5%201403.4%20678.1%201398.0%20679.5%20C1392.4%20681.1%201375.1%20682.3%201371.5%20681.4%20Z%22%2F%3E%20%3Cpath%20d%3D%22M1672.1%20681.0%20C1657.2%20679.4%201632.4%20673.6%201625.0%20670.0%20C1624.2%20669.6%201620.3%20667.8%201616.5%20666.0%20C1600.1%20658.3%201578.3%20641.0%201567.9%20627.3%20C1565.5%20624.1%201563.3%20621.3%201563.0%20621.0%20C1562.7%20620.7%201560.9%20617.8%201558.9%20614.5%20C1549.1%20598.4%201544.3%20585.1%201540.3%20564.0%20C1538.4%20553.4%201538.1%20517.1%201539.9%20506.0%20C1542.6%20489.8%201543.2%20486.2%201545.2%20478.0%20C1549.2%20461.3%201554.8%20445.0%201562.1%20429.2%20C1564.3%20424.6%201566.0%20420.6%201566.0%20420.4%20C1566.0%20419.8%201580.2%20395.6%201583.9%20390.0%20C1596.0%20371.6%201611.0%20353.7%201631.0%20333.7%20C1649.6%20315.2%201656.9%20308.8%201672.0%20297.8%20C1708.4%20271.4%201745.2%20256.4%201792.5%20248.8%20C1804.3%20246.9%201842.2%20247.2%201853.0%20249.3%20C1876.5%20253.8%201885.4%20256.7%201902.2%20265.1%20C1937.7%20283.0%201961.2%20312.6%201970.3%20351.0%20C1973.5%20364.4%201974.4%20373.0%201974.4%20390.5%20C1974.4%20414.1%201971.9%20430.5%201964.0%20458.5%20C1960.2%20472.1%201949.9%20495.9%201940.4%20513.0%20C1935.7%20521.5%201923.2%20540.5%201916.1%20550.0%20C1900.2%20571.2%201869.5%20603.4%201850.5%20618.6%20C1841.4%20625.9%201815.9%20644.0%201814.7%20644.0%20C1814.4%20644.0%201811.2%20645.9%201807.4%20648.1%20C1796.7%20654.6%201775.9%20664.5%201766.1%20667.6%20C1763.6%20668.4%201760.6%20669.5%201759.5%20669.9%20C1758.4%20670.4%201755.5%20671.3%201753.0%20672.0%20C1750.5%20672.7%201747.4%20673.6%201746.0%20674.0%20C1743.6%20674.8%201738.3%20676.1%201731.5%20677.5%20C1715.7%20681.0%201687.5%20682.6%201672.1%20681.0%20Z%20M1718.7%20657.6%20C1742.0%20653.4%201762.5%20642.9%201783.6%20624.2%20C1801.7%20608.0%201817.2%20589.1%201832.0%20565.0%20C1836.4%20557.9%201854.0%20523.1%201854.0%20521.5%20C1854.0%20521.3%201855.3%20518.1%201857.0%20514.5%20C1858.7%20510.9%201860.0%20507.7%201860.0%20507.5%20C1860.0%20507.2%201860.8%20505.1%201861.9%20502.7%20C1862.9%20500.4%201864.7%20495.9%201865.9%20492.8%20C1867.0%20489.6%201868.9%20484.6%201870.0%20481.8%20C1880.5%20454.0%201888.2%20420.9%201891.5%20389.0%20C1893.8%20366.5%201893.1%20348.5%201889.1%20329.0%20C1885.9%20313.8%201878.6%20297.7%201871.1%20289.6%20C1866.0%20284.1%201855.0%20277.5%201845.5%20274.2%20C1830.7%20269.0%201802.8%20268.1%201786.0%20272.1%20C1770.7%20275.8%201754.5%20283.4%201742.2%20292.8%20C1727.7%20303.9%201707.1%20325.7%201694.0%20343.8%20C1675.7%20369.0%201653.1%20416.2%201639.3%20458.0%20C1622.7%20508.5%201616.5%20559.8%201623.1%20593.0%20C1630.0%20627.8%201648.4%20649.2%201678.1%20657.0%20C1687.3%20659.4%201706.8%20659.6%201718.7%20657.6%20Z%20M1805.7%20199.2%20C1805.4%20198.8%201807.3%20195.7%201809.9%20192.3%20C1812.4%20188.9%201816.7%20183.1%201819.4%20179.3%20C1824.4%20172.5%201830.2%20164.6%201840.3%20150.8%20C1843.2%20146.8%201849.4%20138.3%201854.0%20132.0%20C1858.6%20125.7%201866.2%20115.3%201870.8%20109.0%20C1884.8%2090.1%201886.2%2088.1%201897.6%2072.5%20C1903.6%2064.2%201909.8%2055.7%201911.5%2053.5%20C1913.1%2051.2%201916.5%2046.6%201919.0%2043.1%20C1924.7%2035.3%201932.5%2031.0%201941.3%2031.0%20C1957.6%2031.0%201970.8%2046.9%201966.9%2061.9%20C1965.6%2067.2%201962.5%2071.4%201957.4%2075.2%20C1955.7%2076.5%201932.3%2099.1%201905.4%20125.6%20C1878.5%20152.0%201850.4%20179.6%201843.0%20186.8%20L1829.5%20199.9%20L1817.8%20200.0%20C1811.4%20200.0%201805.9%20199.7%201805.7%20199.2%20Z%22%2F%3E%20%3C%2Fsvg%3E") no-repeat center / contain; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221975%22%20height%3D%22682%22%20viewBox%3D%220%200%201975%20682%22%20fill%3D%22%23000%22%3E%20%3Cpath%20d%3D%22M22.0%20681.1%20C14.4%20678.8%207.6%20672.7%203.2%20664.5%20C0.7%20659.8%200.5%20658.7%200.6%20646.5%20C0.6%20636.5%201.2%20631.4%202.9%20624.5%20C5.4%20614.7%2013.3%20597.4%2020.0%20587.0%20C35.0%20564.0%2062.9%20536.1%2097.4%20509.7%20C110.7%20499.5%20112.3%20498.4%20130.4%20485.7%20C137.3%20480.9%20143.2%20476.5%20143.5%20475.9%20C144.3%20474.7%20149.7%20453.6%20151.0%20446.5%20C158.5%20407.8%20159.0%20374.2%20152.5%20354.5%20C149.8%20346.4%20148.3%20343.7%20144.3%20339.6%20C133.4%20328.6%20113.4%20326.0%2091.2%20332.9%20C83.6%20335.2%2074.3%20341.6%2065.5%20350.4%20C54.7%20361.3%2048.6%20369.2%2041.7%20381.2%20C38.9%20386.1%2036.3%20390.3%2035.9%20390.5%20C35.1%20391.1%2021.0%20387.0%2019.4%20385.8%20C18.2%20384.9%2018.3%20384.2%2022.1%20373.5%20C28.1%20356.3%2037.3%20336.7%2046.1%20322.0%20C48.9%20317.3%2052.0%20312.1%2053.0%20310.4%20C57.1%20303.3%2068.7%20287.4%2073.9%20281.7%20C88.5%20265.7%20100.3%20257.2%20116.5%20251.0%20C126.4%20247.1%20146.6%20246.2%20155.1%20249.2%20C166.4%20253.3%20175.4%20260.9%20179.8%20270.2%20C184.9%20281.1%20189.3%20299.8%20191.1%20317.9%20C193.0%20336.6%20190.8%20371.3%20186.0%20399.9%20C183.8%20412.4%20183.2%20415.3%20179.4%20430.5%20C176.9%20440.1%20176.4%20442.2%20173.9%20450.8%20C172.0%20457.6%20171.8%20459.0%20172.6%20459.0%20C173.4%20459.0%20177.6%20456.6%20192.8%20447.9%20C194.5%20446.8%20197.5%20445.2%20199.2%20444.1%20C201.0%20443.1%20209.2%20438.3%20217.5%20433.5%20C225.8%20428.7%20233.9%20424.0%20235.5%20423.0%20C237.1%20422.0%20245.2%20417.3%20253.5%20412.5%20C261.8%20407.7%20270.0%20402.9%20271.8%20401.9%20C273.5%20400.8%20276.5%20399.2%20278.2%20398.1%20C280.0%20397.1%20288.2%20392.3%20296.5%20387.5%20C304.8%20382.7%20312.9%20377.9%20314.5%20377.0%20C316.1%20376.0%20319.0%20374.4%20320.7%20373.4%20C323.5%20371.8%20324.8%20369.5%20329.6%20357.6%20C353.1%20298.8%20381.1%20262.1%20411.5%20250.4%20C417.6%20248.0%20420.0%20247.7%20430.0%20247.6%20C441.3%20247.5%20443.0%20247.8%20451.8%20251.7%20C462.8%20256.6%20466.3%20269.4%20462.4%20291.5%20C458.7%20312.8%20447.6%20336.9%20433.1%20355.0%20C409.5%20384.5%20392.2%20400.0%20353.4%20426.0%20C333.1%20439.7%20331.0%20441.4%20330.0%20444.8%20C328.3%20450.5%20325.9%20458.8%20324.1%20465.0%20C322.6%20470.7%20315.0%20499.9%20312.9%20508.0%20C306.8%20532.7%20305.2%20559.0%20309.1%20571.1%20C315.8%20591.9%20333.7%20603.9%20358.0%20604.0%20C375.8%20604.0%20392.8%20596.1%20405.4%20581.8%20C414.8%20571.2%20426.6%20552.1%20431.0%20540.4%20C432.1%20537.5%20432.1%20537.5%20440.5%20540.7%20C448.8%20543.8%20448.8%20543.8%20445.9%20553.5%20C432.8%20597.7%20420.2%20622.3%20396.0%20650.4%20C394.6%20652.0%20389.6%20656.5%20384.9%20660.5%20C357.2%20683.7%20318.4%20688.5%20298.1%20671.4%20C288.1%20662.9%20279.4%20643.5%20276.9%20624.3%20C274.3%20603.7%20280.1%20539.5%20287.6%20507.2%20C292.6%20485.6%20297.1%20469.2%20300.5%20460.8%20C300.9%20459.7%20300.8%20459.0%20300.0%20459.0%20C298.9%20459.0%20278.5%20471.0%20230.0%20500.0%20C210.5%20511.7%20188.0%20525.1%20185.5%20526.4%20C174.6%20532.5%20144.0%20551.3%20142.9%20552.7%20C142.0%20553.7%20139.6%20558.8%20137.5%20564.0%20C123.4%20599.0%2098.6%20639.7%2080.8%20657.2%20C67.4%20670.3%2052.3%20678.3%2035.8%20681.0%20C28.6%20682.1%2025.6%20682.2%2022.0%20681.1%20Z%22%2F%3E%20%3Cpath%20d%3D%22M679.0%20681.4%20C640.7%20678.0%20615.2%20668.4%20589.1%20647.7%20C580.6%20640.9%20565.4%20624.0%20558.3%20613.2%20C538.3%20583.1%20529.9%20550.4%20531.3%20507.7%20C532.3%20478.5%20536.3%20456.1%20545.2%20429.6%20C549.2%20417.7%20550.8%20413.7%20558.1%20398.4%20C568.6%20376.2%20588.5%20347.0%20607.5%20326.0%20C610.2%20322.9%20614.3%20318.4%20616.5%20316.0%20C636.8%20293.3%20673.3%20269.1%20701.5%20259.5%20C712.2%20255.9%20721.4%20253.3%20728.5%20252.0%20C731.2%20251.5%20737.5%20250.4%20742.5%20249.5%20C748.7%20248.3%20757.6%20247.8%20771.5%20247.7%20C793.4%20247.6%20801.1%20248.8%20816.0%20255.0%20C834.6%20262.7%20852.4%20280.1%20864.1%20302.0%20C867.8%20308.9%20872.7%20320.5%20874.1%20325.5%20C878.0%20340.3%20879.2%20346.0%20880.5%20355.4%20C881.3%20361.5%20882.0%20369.1%20882.0%20372.4%20C882.1%20386.3%20883.8%20383.2%20895.0%20350.0%20C896.6%20345.3%20900.9%20333.0%20904.5%20322.5%20C908.2%20312.0%20912.0%20301.0%20913.0%20298.0%20C918.2%20282.7%20926.9%20257.9%20927.5%20257.0%20C928.3%20255.7%201001.0%20255.6%201001.0%20257.0%20C1001.0%20257.5%201000.5%20259.2%20999.9%20260.7%20C999.3%20262.2%20998.4%20264.4%20998.0%20265.5%20C997.6%20266.6%20996.8%20268.6%20996.2%20270.0%20C995.6%20271.4%20989.5%20287.1%20982.5%20305.0%20C975.5%20322.9%20969.4%20338.6%20968.8%20340.0%20C968.2%20341.4%20967.4%20343.4%20966.9%20344.5%20C966.5%20345.6%20957.1%20369.7%20946.0%20398.0%20C934.9%20426.3%20925.4%20450.5%20924.9%20451.8%20C924.4%20453.0%20923.6%20455.0%20923.1%20456.2%20C922.6%20457.5%20916.5%20473.1%20909.5%20491.0%20C902.5%20508.9%20896.4%20524.5%20895.9%20525.8%20C888.2%20544.6%20887.9%20545.7%20888.5%20553.8%20C890.5%20578.7%20901.2%20603.3%20914.3%20612.8%20C922.0%20618.4%20926.7%20620.3%20937.3%20622.0%20C943.4%20623.0%20946.6%20623.0%20952.8%20622.1%20C967.0%20619.8%20973.0%20617.0%20981.8%20608.6%20C986.4%20604.3%20999.0%20587.3%20999.0%20585.5%20C999.0%20585.2%20999.7%20583.8%201000.6%20582.5%20L1002.2%20580.1%20L1008.8%20583.5%20C1018.8%20588.6%201018.3%20587.9%201016.6%20594.1%20C1008.4%20625.5%20989.4%20656.8%20970.4%20670.0%20C959.4%20677.7%20947.1%20681.4%20932.5%20681.4%20C916.9%20681.5%20907.7%20678.0%20896.4%20667.7%20C883.3%20655.7%20874.6%20637.4%20869.2%20610.0%20C868.6%20607.0%20867.6%20602.2%20867.1%20599.5%20C866.5%20596.8%20865.8%20589.2%20865.4%20582.8%20C864.7%20570.5%20863.6%20568.2%20861.1%20573.7%20C859.7%20576.7%20849.1%20593.2%20848.1%20594.0%20C847.7%20594.3%20846.3%20596.1%20845.0%20598.0%20C842.6%20601.4%20841.7%20602.5%20833.6%20611.9%20C827.6%20618.9%20810.3%20635.6%20802.5%20642.0%20C785.7%20655.7%20765.4%20667.0%20747.5%20672.8%20C724.9%20680.1%20699.8%20683.2%20679.0%20681.4%20Z%20M709.8%20657.0%20C726.6%20653.6%20737.1%20649.2%20751.5%20639.6%20C761.3%20633.1%20777.9%20617.6%20787.0%20606.5%20C799.6%20591.0%20815.4%20564.4%20822.0%20547.5%20C823.3%20544.2%20824.6%20541.0%20825.0%20540.5%20C827.0%20537.7%20841.3%20497.4%20844.6%20485.3%20C845.5%20482.1%20846.6%20477.9%20847.2%20476.0%20C847.7%20474.1%20848.6%20470.5%20849.2%20468.0%20C849.7%20465.5%20850.6%20461.7%20851.1%20459.5%20C862.6%20409.7%20862.4%20351.7%20850.8%20322.0%20C842.1%20299.7%20830.4%20284.4%20816.7%20277.6%20C788.3%20263.4%20748.0%20268.4%20718.0%20289.8%20C710.1%20295.4%20693.5%20311.9%20685.7%20321.6%20C671.3%20339.9%20655.5%20366.9%20648.0%20386.0%20C646.8%20389.0%20645.2%20393.1%20644.3%20395.0%20C641.5%20401.6%20641.1%20402.5%20636.2%20416.0%20C631.7%20428.4%20625.5%20447.7%20622.8%20457.5%20C622.3%20459.7%20621.4%20462.6%20621.0%20464.0%20C619.0%20470.2%20614.6%20491.3%20612.6%20504.0%20C608.3%20530.8%20607.5%20561.2%20610.5%20578.5%20C612.3%20588.8%20616.6%20603.3%20620.0%20610.7%20C621.1%20613.1%20622.0%20615.2%20622.0%20615.5%20C622.0%20616.6%20630.3%20629.7%20634.2%20634.8%20C642.0%20644.8%20655.4%20653.1%20670.0%20656.9%20C680.4%20659.6%20697.1%20659.6%20709.8%20657.0%20Z%22%2F%3E%20%3Cpath%20d%3D%22M1371.5%20681.4%20C1370.4%20681.2%201367.5%20680.4%201365.0%20679.8%20C1347.4%20675.5%201332.4%20658.8%201324.2%20634.5%20C1320.9%20624.5%201317.6%20603.5%201314.9%20575.0%20C1313.0%20555.2%201314.5%20445.9%201317.6%20379.8%20C1318.3%20364.0%201317.9%20361.9%201315.0%20365.2%20C1313.8%20366.6%201295.2%20395.6%201288.7%20406.0%20C1286.5%20409.6%201280.4%20419.2%201275.0%20427.5%20C1251.1%20464.5%201243.5%20476.4%201243.1%20477.4%20C1242.9%20478.0%201237.1%20486.9%201230.3%20497.3%20C1223.6%20507.6%201218.0%20516.3%201218.0%20516.5%20C1218.0%20516.7%201213.0%20524.7%201206.8%20534.2%20C1195.5%20551.7%201180.9%20574.6%201159.8%20607.5%20C1135.3%20645.8%201122.6%20665.6%201120.4%20669.2%20L1118.0%20673.0%20L1075.9%20673.0%20C1042.6%20673.0%201033.9%20672.7%201034.3%20671.8%20C1034.5%20671.1%201048.4%20649.8%201065.0%20624.5%20C1081.7%20599.2%201098.6%20573.5%201102.5%20567.5%20C1106.5%20561.5%201158.4%20482.5%201217.9%20392.1%20L1326.0%20227.8%20L1326.0%20180.6%20C1326.0%20134.1%201325.4%20122.8%201322.1%20106.2%20C1319.4%2092.9%201311.6%2084.8%201296.5%2079.8%20C1294.0%2079.0%201287.3%2078.5%201278.5%2078.5%20C1266.5%2078.5%201263.5%2078.8%201257.6%2080.8%20C1249.4%2083.6%201241.2%2088.7%201235.2%2095.0%20C1230.0%20100.4%201215.5%20119.6%201211.6%20126.2%20C1207.2%20133.8%201207.4%20133.8%201195.5%20129.0%20C1189.5%20126.6%201185.0%20124.2%201185.0%20123.4%20C1185.0%20122.7%201185.5%20120.8%201186.1%20119.3%20C1186.7%20117.8%201187.6%20115.6%201188.0%20114.5%20C1191.6%20105.7%201193.6%20101.3%201201.7%2085.0%20C1218.5%2051.3%201225.1%2040.9%201239.0%2025.6%20C1243.3%2020.9%201255.2%2011.1%201260.0%208.4%20C1277.4%20-1.6%201302.7%20-2.9%201321.0%205.3%20C1333.9%2011.1%201344.0%2025.5%201348.9%2045.0%20C1355.0%2069.5%201355.5%2075.3%201355.5%20120.5%20C1355.4%20143.6%201354.9%20178.7%201354.2%20198.5%20C1353.5%20218.3%201352.5%20247.8%201352.0%20264.0%20C1349.6%20334.3%201348.9%20355.1%201348.0%20381.0%20C1345.9%20437.7%201345.0%20462.1%201343.9%20484.1%20C1341.7%20531.6%201348.3%20574.1%201360.9%20592.3%20C1368.5%20603.4%201380.4%20609.0%201396.5%20609.0%20C1410.1%20609.0%201421.3%20605.3%201430.7%20597.8%20C1436.8%20593.0%201445.9%20580.5%201451.5%20569.2%20C1454.2%20563.9%201456.7%20559.0%201457.2%20558.4%20C1457.8%20557.6%201460.1%20558.1%201465.3%20560.4%20C1469.2%20562.1%201473.1%20563.9%201473.8%20564.4%20C1475.2%20565.2%201474.9%20569.6%201473.1%20575.0%20C1472.6%20576.4%201471.7%20579.5%201471.0%20582.0%20C1466.7%20597.1%201464.7%20602.2%201456.9%20618.5%20C1444.6%20643.9%201433.7%20659.1%201422.0%20667.1%20C1420.1%20668.4%201418.0%20669.9%201417.4%20670.5%20C1415.3%20672.5%201403.4%20678.1%201398.0%20679.5%20C1392.4%20681.1%201375.1%20682.3%201371.5%20681.4%20Z%22%2F%3E%20%3Cpath%20d%3D%22M1672.1%20681.0%20C1657.2%20679.4%201632.4%20673.6%201625.0%20670.0%20C1624.2%20669.6%201620.3%20667.8%201616.5%20666.0%20C1600.1%20658.3%201578.3%20641.0%201567.9%20627.3%20C1565.5%20624.1%201563.3%20621.3%201563.0%20621.0%20C1562.7%20620.7%201560.9%20617.8%201558.9%20614.5%20C1549.1%20598.4%201544.3%20585.1%201540.3%20564.0%20C1538.4%20553.4%201538.1%20517.1%201539.9%20506.0%20C1542.6%20489.8%201543.2%20486.2%201545.2%20478.0%20C1549.2%20461.3%201554.8%20445.0%201562.1%20429.2%20C1564.3%20424.6%201566.0%20420.6%201566.0%20420.4%20C1566.0%20419.8%201580.2%20395.6%201583.9%20390.0%20C1596.0%20371.6%201611.0%20353.7%201631.0%20333.7%20C1649.6%20315.2%201656.9%20308.8%201672.0%20297.8%20C1708.4%20271.4%201745.2%20256.4%201792.5%20248.8%20C1804.3%20246.9%201842.2%20247.2%201853.0%20249.3%20C1876.5%20253.8%201885.4%20256.7%201902.2%20265.1%20C1937.7%20283.0%201961.2%20312.6%201970.3%20351.0%20C1973.5%20364.4%201974.4%20373.0%201974.4%20390.5%20C1974.4%20414.1%201971.9%20430.5%201964.0%20458.5%20C1960.2%20472.1%201949.9%20495.9%201940.4%20513.0%20C1935.7%20521.5%201923.2%20540.5%201916.1%20550.0%20C1900.2%20571.2%201869.5%20603.4%201850.5%20618.6%20C1841.4%20625.9%201815.9%20644.0%201814.7%20644.0%20C1814.4%20644.0%201811.2%20645.9%201807.4%20648.1%20C1796.7%20654.6%201775.9%20664.5%201766.1%20667.6%20C1763.6%20668.4%201760.6%20669.5%201759.5%20669.9%20C1758.4%20670.4%201755.5%20671.3%201753.0%20672.0%20C1750.5%20672.7%201747.4%20673.6%201746.0%20674.0%20C1743.6%20674.8%201738.3%20676.1%201731.5%20677.5%20C1715.7%20681.0%201687.5%20682.6%201672.1%20681.0%20Z%20M1718.7%20657.6%20C1742.0%20653.4%201762.5%20642.9%201783.6%20624.2%20C1801.7%20608.0%201817.2%20589.1%201832.0%20565.0%20C1836.4%20557.9%201854.0%20523.1%201854.0%20521.5%20C1854.0%20521.3%201855.3%20518.1%201857.0%20514.5%20C1858.7%20510.9%201860.0%20507.7%201860.0%20507.5%20C1860.0%20507.2%201860.8%20505.1%201861.9%20502.7%20C1862.9%20500.4%201864.7%20495.9%201865.9%20492.8%20C1867.0%20489.6%201868.9%20484.6%201870.0%20481.8%20C1880.5%20454.0%201888.2%20420.9%201891.5%20389.0%20C1893.8%20366.5%201893.1%20348.5%201889.1%20329.0%20C1885.9%20313.8%201878.6%20297.7%201871.1%20289.6%20C1866.0%20284.1%201855.0%20277.5%201845.5%20274.2%20C1830.7%20269.0%201802.8%20268.1%201786.0%20272.1%20C1770.7%20275.8%201754.5%20283.4%201742.2%20292.8%20C1727.7%20303.9%201707.1%20325.7%201694.0%20343.8%20C1675.7%20369.0%201653.1%20416.2%201639.3%20458.0%20C1622.7%20508.5%201616.5%20559.8%201623.1%20593.0%20C1630.0%20627.8%201648.4%20649.2%201678.1%20657.0%20C1687.3%20659.4%201706.8%20659.6%201718.7%20657.6%20Z%20M1805.7%20199.2%20C1805.4%20198.8%201807.3%20195.7%201809.9%20192.3%20C1812.4%20188.9%201816.7%20183.1%201819.4%20179.3%20C1824.4%20172.5%201830.2%20164.6%201840.3%20150.8%20C1843.2%20146.8%201849.4%20138.3%201854.0%20132.0%20C1858.6%20125.7%201866.2%20115.3%201870.8%20109.0%20C1884.8%2090.1%201886.2%2088.1%201897.6%2072.5%20C1903.6%2064.2%201909.8%2055.7%201911.5%2053.5%20C1913.1%2051.2%201916.5%2046.6%201919.0%2043.1%20C1924.7%2035.3%201932.5%2031.0%201941.3%2031.0%20C1957.6%2031.0%201970.8%2046.9%201966.9%2061.9%20C1965.6%2067.2%201962.5%2071.4%201957.4%2075.2%20C1955.7%2076.5%201932.3%2099.1%201905.4%20125.6%20C1878.5%20152.0%201850.4%20179.6%201843.0%20186.8%20L1829.5%20199.9%20L1817.8%20200.0%20C1811.4%20200.0%201805.9%20199.7%201805.7%20199.2%20Z%22%2F%3E%20%3C%2Fsvg%3E") no-repeat center / contain; pointer-events:none; } .ghost > *{position:relative;z-index:1} /* ---------- Panels that invert ---------- */ .bone{background:var(--cream);color:var(--mahogany)} .bone .label{color:var(--coral)} /* Display type keeps the true coral on cream, because at that size the deeper shade reads brown. Only small text steps down, where the extra contrast is actually needed to stay legible. */ .bone .coral,.bone .haus{color:var(--coral)} .bone .read .coral,.bone .read .haus,.bone .read-sm .coral, .bone .row-m .coral,.bone .fig-m .coral{color:var(--coral)} .bone .label-quiet{color:var(--mahogany);opacity:.5} .bone .rule,.bone .rows,.bone .row,.bone .act{border-color:var(--rule-dark)} .bone .plate .veil{background:var(--cream)} .bone .act-solid:hover{background:var(--coral);border-color:var(--coral);color:var(--cream)} .bone .ghost::before{background-color:var(--mahogany);opacity:.055} /* on cream the mark is the darker mahogany the brand board uses, not the page mahogany, which reads muddy against this much light ground */ .bone .mark{color:var(--mahogany)} /* ---------- Footer ---------- */ .foot{padding:clamp(60px,9vh,120px) 0 clamp(26px,4vh,44px);border-top:1px solid var(--rule)} .foot-grid{display:grid;grid-template-columns:1fr auto;gap:clamp(32px,6vw,90px);align-items:start} .foot-cols{display:flex;gap:clamp(32px,5vw,80px);flex-wrap:wrap} .foot h4{ font-family:var(--small);font-weight:600;font-size:.82rem;letter-spacing:.2em;text-transform:uppercase; color:var(--coral);margin:0 0 1.2em; } .foot a{display:block;font-size:1.08rem;opacity:.7;margin-bottom:.72em;transition:opacity .4s,color .4s} .foot a:hover{opacity:1;color:var(--coral)} .foot-base{ margin-top:clamp(44px,7vh,90px);padding-top:22px;border-top:1px solid var(--rule); display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;opacity:.46; } @media(max-width:760px){.foot-grid{grid-template-columns:1fr}} /* ---------- The city, drawn ---------- 207 paths fade in in sequence while a coral pen sweeps left to right, then the CityCat runs upriver and disappears under the bridge. The frame takes its height from the drawing's own ratio, so nothing is ever cropped at any width. */ /* The drawing only occupies x 340 to 1940 of its 2280 wide canvas, so a third of the frame was empty margin at every width. The canvas is pulled wider than the frame and the empty sides are let to overflow, which crops the drawing to its own edges and runs it right out to the sides of the page. 2280 / 1600 = 1.425, and the left margin lands at 340 / 1600. */ .skyline-frame{ position:relative;width:100%; aspect-ratio:1600 / 948; overflow:hidden; /* the ferry vanishes at the near bank */ } /* max-width has to be released or the global svg clamp pulls the canvas straight back to the width of the frame */ .skyline-svg{display:block;width:142.5%;max-width:none;margin-left:-21.25%;height:100%;overflow:visible} /* the whole drawing is now 42% larger on screen, so the strokes are eased back to hold the same apparent weight as before */ .skyline-svg path{ fill:none;stroke:var(--cream);stroke-width:2; opacity:0;transition:opacity .45s ease-out; } .plate.in .skyline-svg path,.in .skyline-svg path{opacity:1} /* The pen that used to lead the sweep is gone. It came to rest against the right hand edge and simply sat there as a coral dot, and the lines draw themselves in sequence anyway, so it was doing nothing but leaving a mark. */ .skyline-pen{display:none} /* all 18 ferry paths share one origin so the hull stays rigid */ .skyline-svg .ferry{ transform-box:view-box; transform-origin:924px 858px; will-change:transform,opacity; } .plate.in .skyline-svg .ferry,.in .skyline-svg .ferry{ animation:ferry-upriver 15s linear 2.9s infinite; } /* starts and ends exactly where it is drawn, so it sets off rather than snapping into place when the loop comes round */ @keyframes ferry-upriver{ 0% {transform:translate(0,0) scale(1); opacity:1} 54% {transform:translate(202px,-131px) scale(0.87);opacity:1} 70% {transform:translate(269px,-174px) scale(0.79);opacity:0} 71% {transform:translate(-125px, 81px) scale(1.19);opacity:0} 84% {transform:translate(-71px, 46px) scale(1.11);opacity:1} 100% {transform:translate(0,0) scale(1); opacity:1} } /* on a phone the whole drawing is small enough that the strokes turn to hairlines, so they are given some weight back */ @media(max-width:820px){ .skyline-svg path{stroke-width:3.6} } /* the wipe would hide the drawing, so this plate does without one */ .skyline-frame ~ .veil,.plate:has(.skyline-frame) .veil{display:none} @media(prefers-reduced-motion:reduce){ .skyline-svg path{opacity:1;transition:none} .skyline-pen{display:none} .plate.in .skyline-svg .ferry,.in .skyline-svg .ferry{animation:none;opacity:1} } /* ---------- The cursor is the ó ---------- Only on a real pointer. Touch and coarse pointers keep the system cursor and never load any of this. */ /* ============================================================ ROUNDED Every enclosed shape on the site is now a pill, a circle or a generously rounded panel. Nothing keeps a hard corner except the drawings themselves, which are artwork rather than containers. ============================================================ */ :root{ --round-lg:clamp(20px,2.4vw,36px); /* panels and images */ --round-pill:999px; /* anything that reads as a control */ } /* controls */ /* the solid ones are pills. the bare underline links have no box to round, and :not() keeps this rule from clobbering the pill above */ .act:not(.act-solid){border-radius:0} .act-solid{ border-radius:var(--round-pill); padding:1.25em 2.6em; } /* the two actions on the cover are the main event, so they are set larger than the quieter links further down a page */ .cover .act{ font-size:clamp(.92rem,1.05vw,1.08rem); letter-spacing:.18em; } .cover .act-solid{padding:1.35em 3em} .side-tab{border-radius:50%} .say-nav button{border-radius:50%} .nav-toggle{border-radius:50%} /* panels */ .said.is-slider{border-radius:var(--round-lg)} /* the directory runs the full height of the screen at both sizes, and a rounded corner on a full height panel reads as a mistake */ .nav-links{border-radius:0} .cal{border-radius:var(--round-lg);overflow:hidden} .q{border-radius:0} /* imagery. the full bleed skyline stays square, since rounding an edge to edge drawing just looks like a mistake */ .plate{border-radius:var(--round-lg)} .plate img,.plate video{border-radius:inherit;overflow:hidden} /* the animated drawings. an image, so nothing can refuse to play it */ .drawn{display:block;width:100%;height:auto} .plate .veil{border-radius:inherit} .bleed > .plate-full,.bleed > .plate-full img,.skyline-frame{border-radius:0} .plate-cap{padding-inline:clamp(4px,.6vw,10px)} /* the credit under the portrait. set as a small card rather than a caption, because a name, a title, a phone number and an email are something you act on rather than something you read past. */ .card{margin-top:clamp(16px,1.8vw,24px);padding-inline:clamp(4px,.6vw,10px);text-align:left} .card-n{ margin:0;font-family:var(--small);font-weight:600; font-size:clamp(.8rem,.9vw,.92rem);letter-spacing:.2em;text-transform:uppercase; color:var(--coral); } .bone .card-n{color:var(--coral)} .card-c{display:flex;flex-wrap:wrap;gap:.3em 1.6em;margin:.85em 0 0} .card-c a{ font-family:var(--small);font-weight:400; font-size:clamp(1.02rem,1.12vw,1.18rem);letter-spacing:.01em; opacity:.82;transition:opacity .3s var(--ease),color .3s var(--ease); border-bottom:1px solid transparent; } .card-c a:hover{opacity:1;color:var(--coral);border-bottom-color:currentColor} .bone .card-c a:hover{color:var(--coral)} /* the coral rule across the figures follows the same softening */ .figures > *{border-radius:0} /* ============================================================ PHONES Tested against the two things that actually break: a 390px iPhone and a mid range Android on a slow connection. The rules below cap the type, stop anything spilling sideways, make every tap target big enough, and take the expensive effects off small screens. ============================================================ */ /* nothing may cause a sideways scroll, ever */ html,body{overflow-x:hidden;max-width:100%} img,video,svg,iframe{max-width:100%;height:auto} @media(max-width:760px){ /* The statement is set on vw, which at 390px was still producing lines that outran the screen on the longer headings. Capped, and the measure opened up so it breaks sooner. */ .statement{font-size:clamp(2.1rem,9.4vw,3.1rem);line-height:1.0;letter-spacing:-.008em} .statement-md{font-size:clamp(1.85rem,7.6vw,2.5rem);line-height:1.08} .cover-statement{max-width:none} .lede{font-size:clamp(1.5rem,6.4vw,2.1rem);max-width:none} .read{font-size:clamp(1.14rem,4.4vw,1.34rem);max-width:none} .read-lg{font-size:clamp(1.28rem,5vw,1.6rem);max-width:none} .read-sm{font-size:clamp(1.04rem,4vw,1.18rem);max-width:none} .label{font-size:.76rem;letter-spacing:.18em} /* breathing room comes down, or the page becomes a scroll marathon */ :root{--band:clamp(64px,11vh,110px)} /* the cover no longer needs to fill the screen once the type is capped */ .cover{min-height:88svh;padding-block:clamp(96px,16vh,140px) clamp(28px,5vh,48px)} .cover-foot{gap:22px} /* every tap target gets to 48px, the accessible minimum */ .act{padding-block:.8em;min-height:48px;display:inline-flex;align-items:center} .act-solid{width:100%;justify-content:center;text-align:center} .say-nav button{width:48px;height:48px} .nav-links a{padding-block:.5em} /* the archive rows stack rather than squeezing three columns */ .row{padding-block:22px} .row-t{font-size:clamp(1.3rem,5.6vw,1.7rem)} .row-m{font-size:1.02rem;max-width:none} .row-data{font-size:1.2rem} .figures{grid-template-columns:1fr;gap:34px} .fig-n{font-size:clamp(2.4rem,11vw,3.4rem)} /* the quote card keeps its rounding but loses the heavy padding */ .said.is-slider{padding:24px 20px} .said.is-slider::after{font-size:180px;bottom:-.3em;opacity:.07} .say blockquote{font-size:clamp(1.06rem,4.4vw,1.3rem);max-width:none} .say{padding-block:20px} /* the booking widget needs real height on a phone */ .cal{min-height:820px} /* the mark and the watermark come down so they do not dominate */ .mark{width:min(360px,72%)} .mark-sm{width:min(300px,64%)} .ghost::before{width:min(560px,120vw);opacity:.05} /* expensive effects off: blur behind the nav is the single most costly thing on a mid range Android */ .nav.stuck{backdrop-filter:none;background:var(--mahogany)} /* 207 separate opacity transitions is too much for a cheap GPU, so on a phone the whole drawing fades up as one layer instead, which the compositor handles for free. The CityCat still runs. */ .skyline-svg path{opacity:1;transition:none} .skyline-pen{display:none} .plate .veil{display:none} } /* very small screens, and the older Androids that report 360px */ @media(max-width:400px){ :root{--gut:18px} .statement{font-size:2.05rem} .statement-md{font-size:1.8rem} .said.is-slider::after{display:none} } /* landscape phones: the cover was taller than the screen */ @media(max-height:520px) and (orientation:landscape){ .cover{min-height:auto;padding-block:110px 40px} } /* ---------- Motion ---------- */ .rise{opacity:0;transform:translateY(26px);transition:opacity 1.1s var(--slow),transform 1.1s var(--slow)} .rise.in{opacity:1;transform:none} /* a card in a strip comes in from the side it travels from, rather than up off the floor like everything else, so the reveal agrees with the direction the thing actually moves in */ .reel-item.rise{transform:translate(26px,14px)} .reel-item.rise.in{transform:none} .rail{position:fixed;top:0;left:0;height:1px;width:100%;z-index:90;transform:scaleX(0);transform-origin:0 50%;background:var(--coral);pointer-events:none} /* typed lines: the characters are in the DOM, they simply fade on */ .tw{opacity:0;transition:opacity .1s linear} .tw.on{opacity:1} .tw.cur{box-shadow:1px 0 0 0 var(--coral)} .typed .tw{opacity:1} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .rise,.mark .kl{opacity:1;transform:none;transition:none} .plate .veil{display:none} .tw{opacity:1} .rail{display:none} } /* the class the script sets on phones and low powered devices */ html.thrifty .skyline-svg path{opacity:1;transition:none} html.thrifty .skyline-pen{display:none} html.thrifty .skyline-frame{opacity:0;transition:opacity 1.1s var(--ease)} html.thrifty .plate.in .skyline-frame,html.thrifty .in .skyline-frame{opacity:1} /* the ferry is one transform, so it is cheap enough to keep on a phone */ html.thrifty .skyline-svg .ferry{will-change:auto} html.thrifty .plate.in .skyline-svg .ferry,html.thrifty .in .skyline-svg .ferry{ animation:ferry-upriver 15s linear 1.6s infinite; } html.thrifty .plate .veil{display:none} html.thrifty .rise{transition-duration:.5s} /* ---------- The legal page ---------- The only page on the site that is mostly words. Set narrow, with the roman numeral labels doing the navigating. */ .legal{max-width:70ch} .legal .label{margin-top:clamp(44px,5vw,72px)} .legal .label:first-of-type{margin-top:0} .legal .read{max-width:none} .legal .read + .read{margin-top:.9em} .legal-intro{ font-size:clamp(1.5rem,2vw,2rem);line-height:1.45;opacity:.95; margin-bottom:clamp(24px,3vw,44px); } .legal .brief-list{margin-top:1.1em} .legal .brief-list li{font-size:clamp(1.14rem,1.3vw,1.34rem);opacity:.86} .legal a{text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px} .legal-date{ margin-top:clamp(48px,6vw,80px);padding-top:22px; border-top:1px solid var(--rule);opacity:.5; } /* a clause that must stay on one line, and is allowed to break only when the screen genuinely cannot hold it */ .nowrap{white-space:nowrap} @media(max-width:560px){ .nowrap{white-space:normal} } /* a label that carries a roman numeral reads in lower case throughout */ .label.label-lc,.fig-l.label-lc,.plate-cap.label-lc{text-transform:none;letter-spacing:.14em} /* ═══════════════════════════════════════════════════════════════ THE SUBURB PAGES Six pages, one shape. The charts are inline SVG rather than a library, so they are part of the document, print, and need no script to appear. Bars are drawn from the published figures, and the only arithmetic anywhere is the bar length. ═══════════════════════════════════════════════════════════════ */ /* the breadcrumb back up to Where we buy, living inside a .label */ .sub-up{color:inherit;text-decoration:underline;text-underline-offset:.26em;text-decoration-thickness:1px;opacity:.78} .sub-up:hover{opacity:1;color:var(--coral)} .bone .sub-up:hover{color:var(--coral)} /* ---------- Charts ---------- */ .sub-charts{ display:grid;grid-template-columns:repeat(2,1fr); gap:clamp(32px,4vw,64px); margin-top:clamp(52px,6vw,88px); } .sub-charts.one{grid-template-columns:1fr;max-width:760px} @media(max-width:860px){ .sub-charts{grid-template-columns:1fr} } .sub-chart{margin:0} .sub-chart-t{ font-family:var(--small); font-size:clamp(.82rem,.92vw,.95rem); letter-spacing:.1em;text-transform:uppercase; opacity:.62;margin-bottom:1.5em;line-height:1.4; } .sub-chart-svg{width:100%;height:auto;display:block;overflow:visible} .sub-bar{fill:currentColor;opacity:.22} .sub-bar.me{fill:var(--coral);opacity:1} .bone .sub-bar.me{fill:var(--coral)} .sub-bar-l,.sub-bar-v{ font-family:var(--small);font-size:13px; fill:currentColor;opacity:.6; } .sub-bar-l.me,.sub-bar-v.me{opacity:1;font-weight:600} .sub-bar-v{letter-spacing:.01em} .sub-chart-s{ font-family:var(--small);font-size:.84rem;line-height:1.5; opacity:.5;margin:1.4em 0 0;max-width:46ch; } /* ---------- The detail rows under the figures ---------- */ .sub-detail{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,3.4vw,52px); margin-top:clamp(52px,6vw,84px); padding-top:clamp(36px,4vw,56px); border-top:1px solid var(--rule); } .bone .sub-detail{border-top-color:var(--rule-dark)} .sub-detail .read{font-size:clamp(1.02rem,1.1vw,1.16rem);max-width:42ch;margin-top:.5em;opacity:.84} @media(max-width:700px){ .sub-detail{grid-template-columns:1fr} } /* ---------- The flood panel ---------- Boxed because it is the one section on the page where the honest answer is "we cannot tell you from here", and that deserves to look deliberate rather than buried. */ .sub-flood{ margin-top:clamp(52px,6vw,88px); padding:clamp(28px,3.4vw,48px); border:1px solid var(--rule-dark); border-left:2px solid var(--coral); border-radius:var(--round-lg,4px); max-width:74ch; } .band:not(.bone) .sub-flood{border-color:var(--rule);border-left-color:var(--coral)} .sub-flood .read{max-width:none} .sub-note{ font-family:var(--small);font-size:.95rem;line-height:1.6; margin-top:clamp(28px,3vw,40px);padding-left:1.1em; border-left:2px solid var(--coral); opacity:.74;max-width:56ch; } .band:not(.bone) .sub-note{border-left-color:var(--coral)} /* ---------- The other five ---------- */ .sub-grid{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(36px,5vw,96px); } @media(max-width:760px){ .sub-grid{grid-template-columns:1fr} } /* An index, not a card wall. Name leads, count underneath in coral, median set right against it, hairline the full width of the row. */ .sub-row{ display:grid; /* name takes the slack, the two figure columns are fixed so they line up down the page and can be read as a column rather than hunted for */ grid-template-columns:minmax(0,1fr) 3.4em minmax(7.2em,8.4em); align-items:baseline; column-gap:clamp(14px,1.8vw,30px); padding:clamp(9px,1vw,14px) 0; text-decoration:none;color:inherit; transition:color .35s var(--ease); } .sub-row-head{ font-family:var(--small);font-weight:600;font-size:.66rem; letter-spacing:.2em;text-transform:uppercase; color:var(--coral);opacity:.75; padding-bottom:clamp(10px,1.2vw,16px);pointer-events:none; } .sub-row-head span:nth-child(2),.sub-row-head span:nth-child(3){text-align:right} .sub-row-n{ font-family:var(--display);font-weight:700; font-size:clamp(1.12rem,1.32vw,1.34rem);line-height:1.2; letter-spacing:-.008em; } .sub-row:hover .sub-row-n{color:var(--coral)} .sub-row-c{ font-family:var(--small);font-weight:600; font-size:.92rem;text-align:right; font-variant-numeric:tabular-nums; color:var(--coral); } .sub-row-m{ font-family:var(--text); font-size:clamp(.95rem,1.02vw,1.06rem); text-align:right;opacity:.62;white-space:nowrap; font-variant-numeric:tabular-nums; } .sub-row-m i{font-style:italic;opacity:.8} .sub-row-go{display:none} @media(max-width:560px){ .sub-row{grid-template-columns:minmax(0,1fr) 2.6em minmax(6.4em,7.4em); column-gap:10px;padding:clamp(8px,2vw,12px) 0} .sub-row-n{font-size:1.06rem} .sub-row-m{font-size:.9rem} } .sub-row-m{font-size:.95rem} } /* a pin on the footprint map that opens onto a suburb page reads as a link, so it gets the cursor and a touch more weight */ .fp-o.has-page{cursor:pointer} /* the cue on a pin that opens a page. It sits on its own line so the suburb and the count stay readable at a glance. */ .fp-lab em{ display:block;font-family:var(--small);font-style:normal; font-size:.86em;letter-spacing:.1em;color:var(--coral); margin-top:.3em; } /* the ó set inline in a sentence, so the instruction on the map note shows you the thing it is asking you to tap */ .fp-o-inline{font-family:var(--display);color:var(--coral);font-size:1.15em;line-height:0} .bone .fp-o-inline{color:var(--coral)} .fp-note a{color:inherit;text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px} .fp-note a:hover{color:var(--coral)} /* On a phone the chart is scaled down to about seven tenths, which took the 13px labels under 10px and made the benchmark row unreadable. The type is set in SVG user units, so it has to be sized up to come back out at the same reading size. */ @media(max-width:700px){ .sub-bar-l,.sub-bar-v{font-size:19px} .sub-chart-t{font-size:.92rem} } /* The suburb cards sit mid page now, under the ranking chart, rather than in the slot just before the closing. Keeps the page from ending on a grid of links, and stops the running order matching anyone else's. */ .sub-patch{ margin-top:clamp(56px,6.5vw,96px); padding-top:clamp(36px,4vw,56px); border-top:1px solid var(--rule); } .bone .sub-patch{border-top-color:var(--rule-dark)} .sub-patch .sub-grid{margin-top:clamp(26px,3vw,40px)} /* ---------- What is coming ---------- A pipeline list where the stage is the loudest thing on each row. The tag colours run from committed to speculative on purpose: a buyer should be able to skim the column and see which of these are real. */ .pipe{list-style:none;margin:clamp(44px,5vw,72px) 0 0;padding:0;display:grid;gap:clamp(20px,2.4vw,34px)} .pipe-item{ padding:clamp(22px,2.6vw,34px) clamp(22px,2.6vw,34px) clamp(20px,2.4vw,30px); border:1px solid var(--rule);border-radius:var(--round-lg,4px); max-width:72ch; } .bone .pipe-item{border-color:var(--rule-dark)} .pipe-tag{ display:inline-block;font-family:var(--small); font-size:.72rem;letter-spacing:.14em;text-transform:uppercase; padding:.42em .85em;border-radius:var(--round-pill,999px); margin-bottom:1.1em; } /* under construction: committed, so it carries the full coral */ .pipe-building{background:var(--coral);color:var(--cream)} /* already in force */ .pipe-adopted{background:var(--mahogany);color:var(--cream)} .bone .pipe-adopted{background:var(--mahogany);color:var(--cream)} /* approved but nobody has broken ground */ .pipe-approved{border:1px solid currentColor;opacity:.75} /* closing soon, so it is actionable */ .pipe-consult{background:var(--coral);color:var(--mahogany)} /* nobody has approved this. Deliberately the quietest thing on the row. */ .pipe-proposed{border:1px dashed currentColor;opacity:.5} .pipe-t{ font-family:var(--display);font-size:clamp(1.22rem,1.5vw,1.52rem); line-height:1.2;margin:0 0 .5em; } .pipe-m{ font-size:clamp(1.02rem,1.1vw,1.16rem);line-height:1.6; margin:0;opacity:.86;max-width:none; } .pipe-s{font-family:var(--small);font-size:.84rem;margin:1.1em 0 0;opacity:.56} .pipe-s a{color:inherit;text-decoration:underline;text-underline-offset:.22em} .pipe-s a:hover{color:var(--coral)} .bone .pipe-s a:hover{color:var(--coral)} .pipe-foot{ margin-top:clamp(40px,4.5vw,64px);padding-left:1.1em; border-left:2px solid var(--coral);max-width:66ch;opacity:.8; } .band:not(.bone) .pipe-foot{border-left-color:var(--coral)} /* ---------- The suburb list, in sections ---------- Forty eight cards in one grid is a wall. Grouped the way the city actually divides, each block carries its own count so the depth reads at a glance. */ .sub-sec + .sub-sec{margin-top:clamp(44px,5vw,76px)} .sub-sec-t{ font-family:var(--small); font-size:clamp(.96rem,1.1vw,1.12rem); letter-spacing:.16em;text-transform:uppercase; margin:0 0 clamp(18px,2vw,28px); padding-bottom:.7em;border-bottom:1px solid var(--rule); display:flex;justify-content:space-between;align-items:baseline;gap:1.5em;flex-wrap:wrap; } .bone .sub-sec-t{border-bottom-color:var(--rule-dark)} .sub-sec-t span{ font-size:.78em;letter-spacing:.1em;text-transform:none;opacity:.5; } .sub-sec .sub-grid{margin-top:0} /* the first section header needs the same air as the ones between blocks */ .sub-sec:first-of-type{margin-top:clamp(44px,5vw,72px)} /* ---------- Inline emphasis ---------- Editors Note belongs on a statement tail, where the contrast against Black Mango is deliberate. Inside a paragraph its smaller x-height and lighter stroke read as a different font rather than as emphasis, so running text takes Newsreader's own italic instead. */ .read em,.read-sm em,.read-lg em,.pipe-m em,.reel-m em,p em{ font-family:var(--text);font-weight:500;font-style:italic;color:var(--coral); } .band:not(.bone) .read em,.band:not(.bone) .read-sm em, .band:not(.bone) .read-lg em,.band:not(.bone) p em{color:var(--coral)} /* a statement em is never caught by the rule above */ .statement em{color:var(--coral)} .bone .statement em{color:var(--coral)} /* ---------- No widows ---------- A single word stranded on the last line looks like a mistake, and at this measure it happens often. text-wrap:pretty asks the browser to rebalance the closing lines of a paragraph so the last line is never one short word. Headings already use balance, which evens every line rather than only the tail, and is right for two and three line statements. Supported in current Chrome, Safari and Firefox. Where it is not, the text simply wraps as it does today, so there is nothing to fall back to. */ .read,.read-lg,.read-sm,.lede,.note,.plate-cap,.fp-note,.pipe-m,.reel-m, .sub-chart-s,.why,.legal .read,.say blockquote,p{ text-wrap:pretty; } .statement,.stmt,.sub-sec-t,.pipe-t,.sub-row-n{ text-wrap:balance; } /* ---------- The drawn arrow ---------- Replaces the ▸ glyph. The stroke is dashed out to its own length and the offset animated back to zero, which is what makes a line look drawn rather than revealed. The head starts a beat after the shaft so the hand reads as going somewhere and then turning back. */ .reel-mark{overflow:visible} .arrow-svg{ display:block;width:42px;height:16px;overflow:visible; transition:transform .5s var(--ease); } .arrow-svg path{ stroke-dasharray:var(--len,46); stroke-dashoffset:var(--len,46); } .reel-mark.drawn .a-shaft{animation:draw-line .62s var(--slow) forwards} .reel-mark.drawn .a-head {animation:draw-line .3s var(--slow) .5s forwards} .reel-mark.drawn .a-head2{animation:draw-line .3s var(--slow) .56s forwards} @keyframes draw-line{to{stroke-dashoffset:0}} /* the shaft is longer than the two head strokes, so they get their own length */ .a-shaft{--len:34} .a-head,.a-head2{--len:11} /* the card nudges its arrow along on hover, which is the only hint that the reel moves sideways */ .reel-item:hover .arrow-svg,.reel-card:hover .arrow-svg{transform:translateX(5px)} /* no observer, or the person asked for less motion: just show it */ html.arrows-still .arrow-svg path{stroke-dashoffset:0} @media(prefers-reduced-motion:reduce){ .arrow-svg path{stroke-dashoffset:0;animation:none} .arrow-svg{transition:none} } /* ---------- Black Mango at small sizes ---------- The guideline says the display face never goes below about 1.5rem, and five rules were breaking it at weight 400. At that size its hairlines fall under a pixel, and cream on mahogany is the worst case for it: the thin strokes simply drop out. These are card titles rather than statements, so they take the bold cut and a slightly larger floor. Bold has roughly twice the stroke, which is what makes the difference, not the extra tenth of a rem. */ .pipe-t{ font-weight:700; font-size:clamp(1.34rem,1.6vw,1.62rem); letter-spacing:-.004em;line-height:1.24; } /* the record rows and the FAQ summaries sit just under the floor too */ .row-data{font-weight:700;letter-spacing:-.004em} .q summary{font-weight:700;letter-spacing:-.004em} /* light on dark thins a hairline further, so the display face gets a touch of optical weight back wherever it sits on the mahogany ground */ .band:not(.bone) .pipe-t, .band:not(.bone) .sub-row-n{-webkit-font-smoothing:antialiased} /* ---------- Source notes ---------- A note belongs to the thing it describes, so it sits inside that block rather than in a band of its own. Set quiet, indented off a rule, and never wider than the copy it qualifies. */ .reel-src{ font-family:var(--small);font-size:.86rem;line-height:1.6; margin:clamp(26px,3vw,40px) var(--gut) 0; padding-top:16px;border-top:1px solid var(--rule); max-width:72ch;opacity:.62; } .bone .reel-src{border-top-color:var(--rule-dark)} /* ---------- Reel furniture ---------- A reel is a scannable component, not prose. Its card titles run to two words and its card bodies to three, so they take the label face: Trueno reads cleaner at that length and tells you at a glance that this block is to be scanned rather than read. The intro above a reel goes with them. Prose outside a reel stays in Newsreader. The dividing line is length: reel copy has a median of three words, body copy has thirty five. */ /* Reading text reads in Newsreader, in every section without exception. How we can help was the only block on the home page still in Trueno, which is what made it look like a different site beside Our patch. */ .reel-t,.reel-sub{font-family:var(--small)} .reel-t{font-weight:600;letter-spacing:.01em} .reel-m,.reel-words .reel-m,.reel-card .reel-m,.reel-lead .read-sm{ font-family:var(--text);font-weight:400;line-height:1.58;letter-spacing:0; } /* everything inside a card hangs off the same left edge: the rule, the label, the drawn arrow and the copy. No optical indents. */ .reel-item,.reel-card{text-align:left} .reel-t,.reel-m,.reel-sub,.reel-mark,.reel-card .reel-n{margin-left:0;padding-left:0} .reel-mark .arrow-svg{margin-left:0} /* the suburb name is the thing you are clicking, so it leads the card and the count sits under it rather than beside it in weight */ /* a source note sits inside the shell, so it needs no gutter of its own, but it does need real air above it or it reads as part of the figures */ .shell > .reel-src,.shell-narrow > .reel-src{ margin:clamp(44px,5vw,72px) 0 0; padding-top:clamp(20px,2.2vw,28px); } /* ---------- Coral on cream ---------- Display type takes the brand coral. At three rem and up the letterforms carry it, and it is the colour on the brand board. Small text keeps the deeper shade: #ff5e5e on cream measures 2.59:1, which is unreadable for anyone at a caption size. One colour, two jobs, split by size. */ .bone .statement em,.bone .stmt em,.bone .lede{color:var(--coral)} /* ---------- 06 · the record ---------------------------------------- Not a grid of six identical cells. One figure carries the section the way the Instagram posts do: a dominant number in Black Mango, the claim beside it as a coral Editor's Note italic, and the rest of the evidence demoted to a quiet row underneath with a single hairline above it rather than one per cell. */ .rec{display:block} .rec-lead{ display:flex;align-items:flex-end;gap:clamp(24px,3.4vw,56px); flex-wrap:wrap; padding-bottom:clamp(52px,6.5vw,96px); } .rec-big{ font-family:var(--display);font-weight:400; font-size:clamp(5.2rem,13vw,12rem); line-height:.82;letter-spacing:-.03em;margin:0; color:var(--cream); } .rec-big .fig-u{font-size:.34em;letter-spacing:0} .rec-say{padding-bottom:clamp(8px,1vw,18px);max-width:30ch} .rec-say .fig-l{margin:0 0 .5em} .rec-m{ font-family:var(--accent);font-style:italic;font-weight:500; font-size:clamp(1.5rem,2.5vw,2.3rem); line-height:1.24;letter-spacing:-.005em;margin:0; color:var(--coral); } .rec-rest{ display:block; border-top:1px solid rgba(243,238,230,.16); padding-top:clamp(10px,1.2vw,18px); } .rec-rest .fig-n{font-size:clamp(1.9rem,3vw,2.7rem);margin:0 0 .4em} .rec-rest .fig-l{margin-top:.5em} .rec-rest .fig-m{font-size:clamp(1.02rem,1.1vw,1.14rem);opacity:.62;max-width:46ch} .bone .rec-big{color:var(--mahogany)} .bone .rec-m{color:var(--coral)} .bone .rec-rest{border-top-color:rgba(118,6,33,.16)} @media(max-width:700px){ .rec-lead{display:block;padding-bottom:clamp(40px,8vw,56px)} .rec-say{margin-top:clamp(16px,4vw,24px);max-width:none} .rec-rest{gap:clamp(30px,7vw,40px) clamp(24px,5vw,36px)} } /* ---------- Black Mango carries more weight when it is small -------- The suburb cards on Our patch are the reference: bold cut, tight tracking, the number line in coral underneath. Anywhere the display face lands under about 1.7rem it now takes the bold, because at that size the regular's hairlines thin out to nothing on mahogany. */ .reel-t,.rec-rest .fig-n,.fig-n,.sub-sec-t,.fp-n,.say-n{ letter-spacing:-.004em; } .reel-card .reel-t{font-family:var(--display);font-weight:700; font-size:clamp(1.3rem,1.6vw,1.6rem);line-height:1.22; letter-spacing:-.004em;text-transform:none;} .reel-data .reel-card .reel-t{margin-bottom:.1em} /* the privacy link moved into the base bar, where .foot a's block display pushed it onto a line of its own */ .foot-base a{display:inline;margin:0;opacity:.7} .foot-base a:hover{opacity:1;color:var(--coral)} /* record lead: one coral, not two */ /* The eyebrow and the italic were both coral, side by side. The italic is the one carrying the idea, so the eyebrow steps back and lets it. */ .rec-say .fig-l{color:var(--cream);opacity:.52} .bone .rec-say .fig-l{color:var(--mahogany);opacity:.52} /* footer lede: statement face, editorial tail */ /* Black Mango carries the statement, Editor's Note italic takes the tail in coral. Same device as the covers, so the footer closes the way the pages open. */ .foot-lede{ font-family:var(--display);font-weight:400;font-style:normal; font-size:clamp(1.9rem,2.9vw,2.7rem);line-height:1.12; letter-spacing:-.016em;opacity:1; } .foot-lede em{ font-family:var(--accent);font-weight:400;font-style:italic; letter-spacing:-.01em;color:var(--coral); } /* cover: the break lands between sentences, never inside one */ /* Five of the ten covers were wrapping mid sentence and orphaning a fragment on a line of its own: 'You found' / 'it.' / 'We bid on it.' The cause was a ch cap narrower than the first sentence. The tail is always a second sentence set in the accent italic, so it takes its own line by rule and each sentence wraps inside its own measure. */ .cover-statement{max-width:26ch} .cover-statement em{display:block} @media(max-width:700px){.cover-statement{max-width:none}} /* ---------- the stepped list ---------- Five equal columns with a hairline over each was the tell: it is the shape a grid takes when nobody decided anything. A process is a sequence, not a row, so it reads down the page like a contents list. The numeral holds the left edge, the step name carries the display face, and the paragraph has room to say something worth reading. */ .stepped{list-style:none;margin:0;padding:0} .step{ display:grid; /* three columns, not two. The old shape pinned 58 characters of text to the left edge and left four hundred pixels of dead colour to the right of every row. The title now holds its own column and the prose runs in the widest one, so the row reads across the page the way a contents spread does. */ grid-template-columns:clamp(40px,3.4vw,58px) minmax(190px,0.9fr) minmax(0,1.6fr); gap:clamp(18px,2.6vw,48px); padding:clamp(38px,4.4vw,68px) 0; border-top:1px solid var(--rule); align-items:start; } .step:first-child{border-top:0;padding-top:0} .step-n{ font-family:var(--small);font-weight:600; font-size:.82rem;letter-spacing:.2em;text-transform:uppercase; color:var(--coral);margin:0;padding-top:.55em; } .step-t{ font-family:var(--display);font-weight:700; font-size:clamp(1.46rem,2.1vw,1.95rem); line-height:1.16;letter-spacing:-.012em; margin:0;padding-top:.06em; } .step .read{max-width:50ch} .step .read + .read{margin-top:.85em} .bone .step{border-top-color:var(--rule-dark)} /* the heading sat a long way above the row underneath it */ .sec-head{margin-bottom:clamp(40px,4.6vw,72px)} @media(max-width:1000px){ .step{grid-template-columns:clamp(40px,4vw,58px) minmax(0,1fr);gap:clamp(16px,2.4vw,32px)} .step-t{margin-bottom:clamp(12px,1.6vw,18px)} .step > div:last-child{grid-column:2} } @media(max-width:700px){ .step{grid-template-columns:1fr;gap:clamp(10px,2vw,14px);padding:clamp(30px,7vw,44px) 0} .step-n{padding-top:0} .step-t{margin-bottom:.5em} .step > div:last-child{grid-column:1} .step .read{max-width:none} } /* ---------- the drawing, as a section of its own ---------- Six sections of unbroken type is what made these pages feel endless. One drawing, given the full measure and a caption, resets the eye and gives the page a middle. */ .plate-band{margin:0} .plate-band img{width:100%;height:auto;display:block;aspect-ratio:21 / 9;object-fit:cover} .plate-band figcaption{ font-family:var(--text);font-style:italic;font-weight:400; font-size:clamp(1.02rem,1.1vw,1.16rem); opacity:.72;margin-top:clamp(16px,1.8vw,26px);max-width:46ch; } @media(max-width:700px){.plate-band img{aspect-ratio:3 / 2}} /* a line worth stopping on, set as a statement rather than as prose */ .pull{ font-family:var(--display);font-weight:400; font-size:clamp(1.6rem,2.5vw,2.3rem); line-height:1.22;letter-spacing:-.014em; max-width:34ch;margin:0;text-wrap:pretty; } .pull em{font-family:var(--accent);font-style:italic;color:var(--coral)} .bone .pull em{color:var(--coral)} .pull-by{ font-family:var(--small);font-weight:600;font-size:.78rem; letter-spacing:.2em;text-transform:uppercase;color:var(--coral); margin:clamp(20px,2.2vw,30px) 0 0; } /* who-it-suits rows carry no title, so the prose takes both columns */ .step-wide{grid-template-columns:clamp(40px,3.4vw,58px) minmax(0,1fr)} .step-wide .step-body .read{max-width:72ch} @media(max-width:700px){.step-wide{grid-template-columns:1fr}} /* ---------- photography ---------- These pages argue for judgement and relationships, and until now there was no face anywhere on them. A portrait holds its own column with the statement beside it, rather than running as a banner, because a banner crop of a portrait frame throws away the subject. */ .photo{margin:0;position:relative} .photo img{width:100%;height:auto;display:block;aspect-ratio:4 / 5;object-fit:cover} .photo figcaption{ font-family:var(--small);font-weight:400; font-size:.82rem;letter-spacing:.02em; opacity:.6;margin-top:clamp(14px,1.4vw,20px);max-width:34ch; } .photo-say{align-self:end;padding-bottom:clamp(6px,1vw,20px)} .photo-say .statement-sm{margin-bottom:clamp(20px,2.4vw,34px)} @media(max-width:860px){ .photo img{aspect-ratio:3 / 2} .photo-say{padding-bottom:0;margin-top:clamp(24px,4vw,40px)} } /* pull and photo: the label and the statement stop floating */ /* The pull label was aligned to the bottom of a tall column, which left it hanging in the middle of nothing. It belongs at the top of its column, level with the first line of the statement, the way a standfirst does. */ .pull-by{align-self:start !important;padding-top:.45em;margin-top:0} /* The photo statement was bottom aligned against a 4:5 frame, which pushed it most of a column below the top of the picture. */ .photo-say{align-self:center;padding-bottom:0} @media(max-width:860px){.photo-say{align-self:start}} /* Leaflet ships its own palette. It is not ours. */ .leaflet-control-zoom a, .leaflet-control-zoom a:hover{ background:var(--cream);color:var(--mahogany); border-color:rgba(118,6,33,.2); } .leaflet-control-zoom a:hover{background:var(--coral);color:var(--cream)} .leaflet-control-attribution{ background:rgba(243,238,230,.86) !important; color:var(--mahogany) !important; font-family:var(--small);font-size:.68rem; } .leaflet-control-attribution a{color:var(--mahogany) !important;text-decoration:underline} .leaflet-control-attribution a:hover{color:var(--coral) !important} /* the flag Leaflet draws into its attribution strip is not part of the brand */ .leaflet-attribution-flag{display:none !important} /* the record's secondary figures are the same index */ .rec-rest > *{ display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); grid-template-areas:"n l" "n note"; align-items:baseline; column-gap:clamp(24px,3.4vw,64px); padding:clamp(20px,2.2vw,30px) 0; border-bottom:1px solid rgba(243,238,230,.16); } .rec-rest > *:last-child{border-bottom:0} .rec-rest .fig-n{grid-area:n} .rec-rest .fig-l{grid-area:l;margin:0} .rec-rest .fig-m{grid-area:note;margin:.7em 0 0} @media(max-width:620px){ .rec-rest > *{grid-template-columns:1fr;grid-template-areas:"n" "l" "note"} .rec-rest .fig-l{margin-top:.5em} .rec-rest .fig-m{margin-top:.8em} } /* phone: tap targets reach the 44px minimum */ /* Measured at 390 and 320: the nav links and the wordmark were 29px tall. Apple and Google both put the minimum at 44. The padding is vertical only, so nothing moves on the page, the hit area just grows to meet the thumb. */ @media(max-width:760px){ .nav-links a{padding-block:calc((44px - 1.4em) / 2);min-height:44px;display:flex;align-items:center} .wordmark{padding-block:8px} .nav-toggle,.nav-close,.side-tab{min-width:44px;min-height:44px} .foot a{padding-block:6px} } /* ---------- buttons, drawn rather than stroked ---------- The CSS border is dropped once the script has put a drawn outline in, so there is never both. If the script does not run, the border stays and the button looks exactly as it did before. */ .act-drawn{border:0 !important;position:relative} .act-sketch{ position:absolute;inset:0;width:100%;height:100%; pointer-events:none;overflow:visible; } .act-sketch path{transition:stroke-dashoffset 1s var(--slow)} .act-drawn:hover .act-sketch path{transition-duration:.75s} @media(prefers-reduced-motion:reduce){ .act-sketch path{transition:none} } /* ═══ no rules ═══ ══════════════════════════════════════════ Every hairline on the site, off. The two rule colours go transparent, which switches off roughly twenty declarations at once without moving anything: the borders still occupy their 1px, so no layout shifts and nothing can collide. The handful of rules written as literal rgba rather than through the variables are turned off individually underneath. Space does the separating now, so the row padding opens up. A list separated by air rather than by lines is the quieter, more editorial version of the same thing, and it is the opposite of the default bordered-table look. */ :root{ --rule:transparent; --rule-dark:transparent; } /* written as literal colours, so the variables do not reach them */ .rec-rest, .rec-rest > *, .figures > *, .figures > *:last-child, .said, .qs,.q, .rows,.row, .reel-card, .step, .sub-row, .foot,.foot-base, .act, .nav-foot, .leaflet-control-zoom a{ border-color:transparent !important; } /* the coral hairline that drew itself in above each figure goes with them */ .figures > *::before{display:none} /* ---- and now the space that replaces them ---- */ .figures > *{padding:clamp(26px,3vw,40px) 0} .rec-rest > *{padding:clamp(26px,3vw,40px) 0} /* .sub-row sets its own padding in the index rules above */ .step{padding:clamp(34px,3.6vw,56px) 0} .q{padding-block:clamp(6px,.8vw,12px)} .said{padding-block:clamp(10px,1.4vw,20px)} .reel-card{padding-top:clamp(24px,2.6vw,38px)} /* the text button loses its underline, so the arrow carries the affordance */ .act{padding-bottom:.35em} .act:not(.act-solid):not(.act-ghost):hover{color:var(--coral)} /* ═══ after the rules came off ═══ ═════════════════════════════════ Two layouts were relying on a hairline to hold them together, and fell apart the moment the lines went. Fixed by proximity instead, which is what should have been doing the work anyway. */ /* 1. The step row was three separate columns: a tiny numeral, a title stranded in the middle, and the prose a long way right of it. The numeral and the title now sit together in one column and the prose runs beside them, both aligned to the same top edge. */ .step{ grid-template-columns:minmax(150px,.8fr) minmax(0,1.9fr) !important; /* the third row is empty and absorbs the leftover height. Without it the title's row stretches to match the prose and the title drifts half a screen below its own numeral, which is exactly what it was doing. */ grid-template-areas:"n body" "t body" ". body" !important; grid-template-rows:auto auto 1fr !important; column-gap:clamp(28px,3.6vw,64px) !important; row-gap:0 !important; align-items:start !important; } .step-n{grid-area:n;padding-top:0;margin-bottom:.7em} .step-t{grid-area:t;align-self:start} .step-body{grid-area:body} .step .read{max-width:60ch} .step-wide{ grid-template-columns:minmax(0,1fr) !important; grid-template-areas:"n" "body" !important; grid-template-rows:auto auto !important; } .step-wide .step-body .read{max-width:70ch} @media(max-width:820px){ .step{grid-template-columns:minmax(0,1fr) !important; grid-template-areas:"n" "t" "body" !important; row-gap:0} .step-t{margin-bottom:.6em} .step .read{max-width:none} } /* 2. The statement beside a photograph was centred against a tall frame, so with the picture off to one side it read as floating in nothing. It now starts at the top of the picture. */ .photo-say{align-self:start !important;padding-top:clamp(0px,1vw,10px)} @media(max-width:860px){.photo-say{padding-top:0}} /* the index is two real columns, each with its own heading */ .sub-grid{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(36px,5vw,96px);align-items:start; } .sub-col{display:block} @media(max-width:760px){ .sub-grid{grid-template-columns:1fr;row-gap:clamp(20px,4vw,34px)} .sub-col + .sub-col .sub-row-head{display:none} } /* ═══ the figure index, tightened ═══ ══════════════════════════ Same fault as the suburb list: the value sat in a column almost twice as wide as the longest number and the label floated out at 581px with seven hundred pixels of nothing after it. The value column is now sized to the widest figure in the set and right aligned, so the numbers form a clean edge, and the label sits immediately beside it. */ .figures > *, .rec-rest > *{ /* a fixed column, not max-content: each row is its own grid, so max-content sized every row independently and the values stepped in and out instead of forming a column. */ /* 340px, because the widest figure on the site is Chandler's $3,650,000 at 327px. Anything narrower and the long medians overflow left and run into their own label, which is what they were doing. */ grid-template-columns:clamp(132px,24vw,340px) minmax(0,1fr) !important; grid-template-areas:"n l" "n note" !important; column-gap:clamp(22px,2.6vw,46px) !important; padding:clamp(14px,1.5vw,20px) 0 !important; align-items:baseline !important; } .figures .fig-n, .rec-rest .fig-n{text-align:right;font-variant-numeric:tabular-nums} .figures .fig-l, .rec-rest .fig-l{margin:0 !important;align-self:baseline} .figures .fig-m, .rec-rest .fig-m{margin:.5em 0 0 !important;max-width:54ch} @media(max-width:620px){ .figures > *, .rec-rest > *{ grid-template-columns:minmax(0,1fr) !important; grid-template-areas:"n" "l" "note" !important; padding:clamp(12px,3vw,16px) 0 !important; } .figures .fig-n,.rec-rest .fig-n{text-align:left} .figures .fig-l,.rec-rest .fig-l{margin-top:.35em !important} } /* ═══ the record, as statements ═══ ═════════════════════════════ Five numbers right aligned in a fixed column gave a ragged left edge and left "8" stranded a long way from its own label. They are not a table, so they are not set as one. Each is a line of type in the device the rest of the site uses: the figure in Black Mango, the phrase after it in coral Editor's Note italic, reading as a sentence. */ .rec-rest{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(40px,5vw,96px);row-gap:clamp(28px,3vw,44px); border:0 !important;padding-top:clamp(34px,4vw,60px)} .rec-rest > *{display:block !important;padding:0 !important;border:0 !important} .rec-line{ margin:0;line-height:1.08; font-family:var(--accent);font-style:italic;font-weight:400; font-size:clamp(1.5rem,2.1vw,2rem); color:var(--coral); } .rec-fig{ font-family:var(--display);font-style:normal;font-weight:400; font-size:1.9em;letter-spacing:-.02em;color:var(--cream); margin-right:.12em; } .rec-fig .fig-u{font-size:.5em;letter-spacing:0} .rec-note{ font-family:var(--text);font-size:clamp(1rem,1.08vw,1.1rem); line-height:1.6;opacity:.6;margin:.75em 0 0;max-width:38ch; } .bone .rec-line{color:var(--coral)} .bone .rec-fig{color:var(--mahogany)} @media(max-width:760px){ .rec-rest{grid-template-columns:1fr;row-gap:clamp(26px,6vw,36px)} .rec-note{max-width:none} } /* ---- the step row: the title column was mostly empty ---- 373px of column for a title like "The brief", which pushed the prose most of a screen away from its own heading. Narrowed to fit the words. */ .step{grid-template-columns:clamp(132px,15vw,210px) minmax(0,1fr) !important; column-gap:clamp(24px,2.6vw,44px) !important} .step-wide{grid-template-columns:minmax(0,1fr) !important} @media(max-width:820px){ .step{grid-template-columns:minmax(0,1fr) !important} } /* ═══ the entry ═══ ═══════════════════════════════════════ Barlow's pattern, in this brand's own type and colour: a solid ground, a counter climbing in the corner, and the wordmark rising from the bottom edge as it goes. It is injected by a one line script in the head, so with JavaScript off it never appears at all and the page is simply the page. It runs once per session and only on the home page. */ html.kh-entry,html.kh-entry body{overflow:hidden} .kh-entry-screen{ position:fixed;inset:0;z-index:9999; background:var(--mahogany);color:var(--cream); display:flex;flex-direction:column;justify-content:center; padding:clamp(20px,5vw,64px); overflow:hidden; transition:transform 1.4s cubic-bezier(.62,0,.2,1); will-change:transform; } .kh-entry-screen.go{transform:translateY(-101%)} .kh-entry-mid{ flex:1;position:relative; display:flex;align-items:center;justify-content:center; } .kh-entry-mid > *{position:absolute;margin:0;text-align:center} /* One easing for the whole sequence. The mark used to land on a spring with a 1.5 overshoot, which is a bounce rather than a fall. */ .kh-entry-o, .kh-entry-say, .kh-entry-say span, .kh-entry-logo{ transition-timing-function:cubic-bezier(.16,1,.3,1); } /* 1 · the mark falls in, then travels. It is never hidden and never swapped: one element the whole way through. */ .kh-entry-o{ font-family:var(--display);font-weight:400;color:var(--coral); font-size:clamp(5rem,15vw,13rem); /* line-height 1 on the mark and on both of its targets, so a matching box height means a matching glyph size. With different line heights the boxes agreed while the letters plainly did not. */ line-height:1; opacity:0;transform:translateY(-.62em); transition:opacity .95s,transform 1.35s; transform-origin:0 0;z-index:3; } .kh-entry-screen.lift .kh-entry-o{opacity:1;transform:none;transition-delay:.3s} /* the ó the mark is aiming at is a slot only, so two never show at once. every other ó in the phrase stays visible and coral, which is the point. */ .kh-entry-say i,.kh-logo-n i{ display:inline-block;line-height:1;vertical-align:baseline;color:var(--coral); } #khTargetO,#khLogoO{visibility:hidden} /* the mark leaves the phrase for the wordmark, so the phrase gets its own ó back before it fades, rather than reading 'a kal find.' on the way out */ .kh-entry-screen.s4 #khTargetO{visibility:visible} .kh-entry-screen.measuring .kh-entry-say, .kh-entry-screen.measuring .kh-entry-logo{opacity:1;visibility:hidden} /* 2 · the phrase arrives around it */ .kh-entry-say{ font-family:var(--display);font-weight:400; font-size:clamp(2rem,7.4vw,6.2rem); line-height:1.06;letter-spacing:-.022em;color:var(--cream); opacity:0;pointer-events:none; } .kh-entry-say span{display:block} .kh-entry-say i{font-style:normal} .kh-entry-say b{font-weight:inherit;opacity:0;transition:opacity .85s} .kh-entry-screen.s3 .kh-entry-say{opacity:1} .kh-entry-screen.s3 .kh-entry-say b{opacity:1;transition-delay:.5s} .kh-l2{opacity:0} .kh-entry-screen.s3 .kh-l2{opacity:1;transition:opacity .9s;transition-delay:.95s} .kh-entry-screen.s4 .kh-entry-say{opacity:0;transition:opacity .5s ease} /* 3 · and the wordmark takes shape around it in the same way */ .kh-entry-logo{opacity:0;text-align:left;transition:opacity .9s} .kh-entry-screen.s5 .kh-entry-logo{opacity:1;transition-delay:.45s} .kh-logo-n{ font-family:var(--display);font-weight:400;color:var(--cream); font-size:clamp(2.4rem,8vw,6.6rem);line-height:1;letter-spacing:-.024em;margin:0; } .kh-logo-n i{font-style:normal} .kh-logo-n b{font-weight:inherit} .kh-logo-s{ font-family:var(--accent);font-weight:400;font-style:normal; color:var(--coral);font-size:clamp(.9rem,2.5vw,2rem); letter-spacing:.012em;margin:.26em 0 0;text-align:left; } .kh-entry-foot{min-height:1px} @media(prefers-reduced-motion:reduce){ .kh-entry-screen,.kh-entry-o,.kh-entry-say,.kh-entry-say span,.kh-entry-logo{transition:none} } /* ═══ readable ═══ ═══════════════════════════════════════════ Measured across six pages, 417 elements failed WCAG contrast. The cause is one number: coral #ff5e5e reads 2.59:1 on cream and 3.86:1 on mahogany, where small text needs 4.5. No amount of sizing fixes that. So coral stops carrying small text. It keeps every display-size job, where it is emphasis rather than information, and the labels, counts and captions move to cream on mahogany and mahogany on cream, which run 10.9:1 and 9.4:1. Still three colours. */ .label, .fig-l, .step-n, .sub-row-c, .sub-row-head, .reel-sub, .rec-rest .fig-l, .sub-chart-s, .fp-lab, .pull-by{ color:var(--cream) !important; } .bone .label, .bone .fig-l, .bone .step-n, .bone .sub-row-c, .bone .sub-row-head, .bone .reel-sub, .bone .sub-chart-s, .bone .pull-by{ color:var(--mahogany) !important; } /* the wordmark sub is the logo, and the logo is drawn in coral */ .wordmark .sub{color:var(--coral) !important} /* Body copy was being dimmed with opacity on top of a colour that was already doing its job. Every reduction under .8 came off. */ .read,.read-lg,.read-sm,.lede,.fig-m,.rec-note,.reel-m,.step .read, .sub-row-m,.note,.plate-cap,.fp-note,.pipe-m,.say blockquote,.a{ opacity:1; } .reel-src,.sub-note,.photo figcaption,.plate-band figcaption{opacity:.82} .sub-row-m{opacity:.78} .fig-m,.rec-note{opacity:.78} /* the second pass: the ones the first sweep missed */ .leg-n,.nav-foot a,.nav-foot-c,.foot a,.foot h4,.say-meta,.q summary{ color:var(--cream) !important;opacity:1 !important; } .bone .leg-n,.bone .say-meta,.bone .q summary{color:var(--mahogany) !important} .nav-foot-c{opacity:.72 !important} /* the suburb markers on the map sit on a pale map tile, so they take the mahogany rather than the coral they had */ .fp-o{color:var(--mahogany);text-shadow:0 1px 0 var(--cream),0 0 7px var(--cream)} .fp-o:hover,.fp-o:focus-visible{color:var(--coral)} /* a card title is a link and needs to read as text, not as an accent */ .reel-t{color:var(--cream)} .bone .reel-t{color:var(--mahogany)} .reel-card:hover .reel-t{color:var(--coral)} /* Inline links were coral inside running text, which is 2.59:1 on cream. A link inside a paragraph has to be readable first and coloured second, so it takes the text colour with an underline and turns coral on hover. */ a.coral,.read a,.read-sm a,.sub-flood a,.a a,.legal a{ color:inherit !important; text-decoration:underline; text-underline-offset:.22em; text-decoration-thickness:1px; text-decoration-color:var(--coral); transition:color .3s var(--ease); } a.coral:hover,.read a:hover,.read-sm a:hover,.sub-flood a:hover,.legal a:hover{ color:var(--coral) !important; } /* the nav drawer sits on cream, and the section counts were coral on it */ .nav-links a{color:var(--mahogany) !important} .nav-links a:hover,.nav-links a[aria-current]{color:var(--coral) !important} .sub-sec-t span{color:var(--cream) !important;opacity:.78} .bone .sub-sec-t span{color:var(--mahogany) !important} .sub-chart-s{color:var(--cream) !important;opacity:.76} .bone .sub-chart-s{color:var(--mahogany) !important} /* last sweep */ .nav-links a{color:var(--mahogany) !important} .act,.act .arrow{color:inherit !important} .act:hover,.act:hover .arrow{color:var(--coral) !important} .say-count{color:var(--cream) !important;opacity:.8} .bone .say-count{color:var(--mahogany) !important} /* "haus" inside running text was coral at 23px, which is body size */ .read .haus,.read-sm .haus,.lede .haus,p .haus{color:inherit} .statement .haus,.stmt .haus,h1 .haus,h2 .haus{color:var(--coral)} .read-sm{opacity:1} .bone .read-sm{color:var(--mahogany)} /* the current page's nav item was coral on cream, 2.59:1. It is marked by weight and a rule instead, which does not depend on colour at all. */ .nav-links a[aria-current]{ color:var(--mahogany) !important;opacity:1 !important;font-weight:700; text-decoration:underline;text-underline-offset:.3em; text-decoration-color:var(--coral);text-decoration-thickness:1.5px; } .nav-links a:hover{color:var(--coral) !important} /* more specific than the blanket rule above it, so it wins */ .reel-lead .read-sm,.split-aside .read-sm{opacity:1} /* an inline style of opacity:.62 on a testimonial standfirst, and the coral "haus" sitting inside running text rather than in a heading */ .grid12 > .read-sm{opacity:1 !important} .read .haus,.read-sm .haus,.read-lg .haus,p.read .haus{color:inherit !important} /* the ó is coral in the wordmark, as it is drawn */ /* the logo: kaló haus all in one colour, only 'buyers agency' in coral */ .wordmark .o,.kh-logo-n i{color:inherit} /* The wordmark is a logotype, which contrast rules exempt, and it is drawn with the descriptor in coral. The readability sweep had swept it up with the ordinary labels. */ .kh-logo-s{color:var(--coral) !important} /* ═══ the homepage, read one section at a time ═══════════════════════════ Six text sizes instead of forty six. The hero keeps its full size; what changes is everything in between, which had drifted into forty odd near-identical steps and read as busy. Bands lose a third of their air so a section resolves inside one screen. Scoped to body.home: no other page moves, and deleting this block restores exactly what was here before. */ body{ --band:clamp(72px,9vh,112px); --t-display:clamp(2rem,3.35vw,3rem); --t-sub:clamp(1.3rem,1.95vw,1.75rem); --t-lead:clamp(1.06rem,1.46vw,1.31rem); --t-body:clamp(.98rem,1.18vw,1.06rem); } /* one size for every section heading, whichever variant it was written as */ body .statement-md, body .statement-sm, body .rec-fig{font-size:var(--t-display);line-height:1.03;letter-spacing:-.016em} /* one size for the sentence that follows a heading */ body .lede, body .read-lg, body .rec-m{font-size:var(--t-sub);line-height:1.32} body .lede{max-width:26ch} body .read-lg{max-width:42ch} /* one size for reading text, one for the small print under it */ body .read, body blockquote{font-size:var(--t-lead);line-height:1.56;max-width:54ch} body .read-sm, body .plate-cap, body .reel-m, body .rec-note{font-size:var(--t-body);line-height:1.6} body .sec-head{margin-bottom:clamp(26px,2.8vw,44px)} /* the record statements: the figure leads, its descriptor follows at reading size rather than competing with it */ body .rec-line{font-size:var(--t-lead);line-height:1.2} body .rec-line em{font-size:1em} /* a card title is reading size, not a third heading size */ body .reel-t{font-size:var(--t-lead);line-height:1.2} body .nav a{font-size:var(--t-body)} /* and every small label, link and caption is one size, not eleven */ body .label, body .fig-l, body h4, body .reel-src, body .say-count, body .arrow, body .nav-foot-c, body .foot a, body .nav-foot a, body .nav-close{font-size:.8125rem} /* a photograph is allowed to be wide and short. The closing one runs to the measure of the page rather than full bleed, so it reads as a plate and not as a banner. */ /* every photograph here is shot portrait, so a wide crop takes the heads off. These two sit at the proportion they were taken at. */ .plate-say{max-width:clamp(260px,26vw,380px)} .plate-say img{aspect-ratio:4/5;object-fit:cover;object-position:50% 42%;width:100%;display:block} /* the portrait beside the words keeps its own proportion and stays a companion to the text rather than swallowing the band */ .plate.c-1-6 img,.photo-fig img{aspect-ratio:4/5;object-fit:cover;object-position:50% 40%;width:100%;display:block} .plate.c-1-6{max-width:clamp(240px,24vw,340px)} /* a pair of buttons is a row with air in it. This had no rule at all, so the second one sat flush against the first. */ .acts{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,1.7vw,24px)} @media (max-width:640px){.acts{gap:12px}.acts .act-solid{width:auto}} /* ═══ the same six sizes on the inside pages ═══════════════════════════ The suburb, market and service pages carried their own near-duplicate steps. These map them onto the scale the rest of the site now uses. */ .fig-n,.reel-n{font-size:var(--t-display);line-height:1.03;letter-spacing:-.016em} .pipe-t,.reel-t,blockquote{font-size:var(--t-lead);line-height:1.3} .pipe-m,.reel-m,.sub-row-n,.read-sm{font-size:var(--t-body);line-height:1.56} .sub-row-m,.sub-row-c,.sub-note,.pipe-tag,.reel-sub, .sub-chart-t,.sub-chart-s,.sub-up,.reel-src,.say-count{font-size:.8125rem} /* three selectors carried more weight than the scale and kept their own size: the card titles, the card copy and the pulled quote */ .reel-card .reel-t{font-size:var(--t-lead)} .reel-card .reel-m,.reel-words .reel-m{font-size:var(--t-body)} .say blockquote{font-size:var(--t-lead)} /* ═══ coral, where a band had gone flat ═══════════════════════════════ A few sections were reading as one wash of colour: a table of suburbs, a caption under a drawing, the column headings above a list. The accent goes on the thing you scan for, never on the body text. */ /* the count is the figure you scan a suburb index for, and the original note in this file says it was always meant to be coral. The contrast pass put an !important on top of it, so this puts it back. On cream it stays mahogany, because coral on cream does not carry. */ .sub-row-c{color:var(--coral) !important} .bone .sub-row-c{color:var(--mahogany) !important} .sub-row-head span:not(:first-child){color:var(--coral) !important} .bone .sub-row-head span:not(:first-child){color:var(--mahogany) !important} .sub-chart-t,.reel-sub,.pipe-tag{color:var(--coral)} .plate-cap{color:var(--coral);opacity:.85;font-style:italic} .bone .plate-cap{color:var(--coral);opacity:1} .sub-row-n em,.fig-l{color:var(--coral)} .sub-note strong,.read em,.read-sm em{color:var(--coral)} /* the suburb index ran two columns and left a third of the page empty. A third column fills it and takes a screen off the page. */ @media(min-width:1180px){ .sub-grid{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(28px,3vw,56px)} } /* The measured gap under the wordmark was only 8px; the rest of it was the empty space a line box carries below a word with no descenders, plus the space above the descriptor's cap height. Boxes cannot see that, so this closes it optically instead. */ .kh-logo-n{margin-bottom:-.17em} .kh-logo-s{margin-top:.04em} /* ═══ the enquiry form ═══════════════════════════════════════════════════ Three colours only. A field is a line you type on rather than a box, which keeps it in the same language as the rest of the site. */ .kh-form{display:grid;gap:clamp(20px,2.4vw,30px);max-width:640px} .kh-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px)} @media(max-width:560px){.kh-pair{grid-template-columns:1fr}} .kh-field{display:grid;gap:.5em} .kh-field label{ font-family:var(--small);font-weight:600;font-size:.75rem; letter-spacing:.2em;text-transform:uppercase;color:var(--coral); } .bone .kh-field label{color:var(--mahogany)} .kh-opt{opacity:.55;letter-spacing:.14em} .kh-field input,.kh-field select,.kh-field textarea{ font-family:var(--text);font-size:var(--t-body);font-weight:400; color:inherit;background:transparent; border:0;border-bottom:1px solid currentColor; border-radius:0;padding:.55em 0;width:100%; -webkit-appearance:none;appearance:none; transition:border-color .4s var(--ease),opacity .4s var(--ease); opacity:.72; } .kh-field textarea{resize:vertical;min-height:5.4em;line-height:1.55} .kh-field select{cursor:pointer} /* the arrow has to be drawn, because appearance:none removes the native one */ .kh-field select{ background-image:linear-gradient(45deg,transparent 50%,currentColor 50%), linear-gradient(135deg,currentColor 50%,transparent 50%); background-position:calc(100% - 9px) calc(50% + 1px),calc(100% - 4px) calc(50% + 1px); background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:26px; } .kh-field select option{color:var(--mahogany);background:var(--cream)} .kh-field input:focus,.kh-field select:focus,.kh-field textarea:focus{ outline:none;border-color:var(--coral);opacity:1; } .kh-field input::placeholder,.kh-field textarea::placeholder{color:inherit;opacity:.45;font-style:italic} .kh-field .invalid,.kh-field input.invalid,.kh-field select.invalid,.kh-field textarea.invalid{border-color:var(--coral);opacity:1} /* the honeypot is for robots, so it is gone for everybody else */ .kh-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .kh-send{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,1.8vw,24px);margin-top:clamp(4px,1vw,12px)} .kh-form button{font-family:var(--small);background:none;cursor:pointer;color:inherit} .kh-msg{margin:0;font-family:var(--text);font-size:var(--t-body);opacity:0;max-width:34ch;line-height:1.5} .kh-msg.on{opacity:.9} .kh-msg.bad{color:var(--coral);opacity:1} .kh-form.sent{opacity:.55;pointer-events:none} /* ═══ the ó cursor ═══════════════════════════════════════════════════════ The mark leads in open space and over anything clickable. Over text and form fields it stands down, and the native I-beam comes back, which is what it failed to do the first time round. */ @media (hover:hover) and (pointer:fine){ html.has-o,html.has-o body{cursor:none} html.has-o a,html.has-o button,html.has-o [role="button"],html.has-o summary{cursor:none} html.has-o p,html.has-o li,html.has-o blockquote,html.has-o figcaption, html.has-o td,html.has-o th,html.has-o label, html.has-o h1,html.has-o h2,html.has-o h3,html.has-o h4{cursor:auto} html.has-o input,html.has-o textarea,html.has-o select{cursor:auto} html.has-o select{cursor:pointer} .o-cursor{ position:fixed;top:0;left:0;z-index:120;pointer-events:none; font-family:var(--display);font-weight:400; font-size:26px;line-height:1;color:var(--cream); transform:translate3d(-50%,-50%,0);opacity:0; will-change:transform; transition:color .45s var(--ease),opacity .28s var(--ease); } .o-cursor .glyph{display:block;transform:scale(1);transition:transform .5s var(--slow)} .o-cursor.ready{opacity:1} /* over anything clickable it swells and turns coral */ .o-cursor.live{color:var(--coral)} .o-cursor.live .glyph{transform:scale(2.05)} /* on the cream panels it flips to mahogany so it never disappears */ .o-cursor.on-bone{color:var(--mahogany)} .o-cursor.on-bone.live{color:var(--coral)} /* and over anything you are reading or typing into, it gets out of the way */ .o-cursor.aside{opacity:0} } /* a middle column, for an aside that belongs near its heading rather than pinned to the right edge. It starts at 7 rather than 6: the heading beside it runs to column 6, and an overlap of even one column pushed the aside onto a row of its own, which is where the gap was coming from. */ .c-7-10{grid-column:7 / span 4} @media(max-width:860px){.c-7-10{grid-column:1 / -1}} /* the note field was taller than it needed to be, which left a gap under the placeholder, and the drag handle sat in the corner looking untidy */ .kh-field textarea{min-height:3.6em;resize:none} /* ═══ what a search engine reads in the header ═══════════════════════════ Google was printing "kaló hausbuyers agency ≡ ó" in the snippet, because the descriptor ran straight on from the name with nothing between them, and because the hamburger and the side tab were real characters in the page rather than marks. The separator below is read but not seen, and the two marks are drawn in CSS, which is not scraped. */ .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0; } .nav-toggle::before{ content:'';display:block;width:19px;height:2px;background:currentColor; box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor;margin:0 auto; } @media(min-width:761px){ /* the ó on the side strip, drawn rather than typed */ .side-tab::after{ content:'\00f3';position:absolute;left:50%;top:50%; transform:translate(-50%,-50%); font-family:var(--display);font-weight:400;line-height:1; font-size:clamp(1.7rem,2.4vw,2.6rem); color:var(--coral); transition:opacity .4s var(--ease); } .side-tab:hover::after{opacity:.72} } /* and the close mark, set in CSS rather than typed, for the same reason. It keeps the bracketed form it already had, just in one pseudo element instead of two with a real character sitting between them. */ .nav-close::before{content:'[ \00d7 ]';margin:0;opacity:.55} .nav-close::after{content:none}