@font-face{font-family:"Caslon Display";src:url(fonts/LibreCaslonDisplay.woff2);font-display:swap}
@font-face{font-family:"Caslon Text";src:url(fonts/LibreCaslonText.woff2);font-display:swap}
@font-face{font-family:"Caslon Text";src:url(fonts/LibreCaslonText-Italic.woff2);font-style:italic;font-display:swap}
@font-face{font-family:Jost;src:url(fonts/Jost.woff2);font-weight:400 600;font-display:swap}

/* Charcoal and ivory with Caslon throughout. Gold is the secondary colour: the name, the "and" in every heading,
   the button and the arrow. Green (sage) takes links; brown (tan) takes captions and labels. Four grounds own
   whole sections: charcoal, racing green, deep sea and umber. */
:root{--sage:#9cc4a4;--tan:#c9a27e;--sea:#0f1d24;--umber:#2a1b11;--disc:#a88a47;--coal:#131313;--graphite:#1c1c1b;--ivory:#e8e1d0;--gold:#bfa05a;--hair:#bfa05a66;--cognac:#5a3a22;--green:#17281f;
  --display:"Caslon Display","Caslon Text",Georgia,serif;--text:"Caslon Text",Georgia,serif}
*{box-sizing:border-box}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
html{font:17px/1.7 var(--text);background:var(--coal);color:var(--ivory);color-scheme:dark;scrollbar-color:#bfa05a80 var(--coal)}
::selection{background:var(--gold);color:var(--coal)}
.skip{position:absolute;left:1rem;top:-4rem;z-index:9;padding:.5rem .9rem;background:var(--gold);color:var(--coal)}
.skip:focus{top:1rem}
body{margin:0;overflow-x:clip}
a{color:var(--sage);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:var(--ivory)}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.label{font:500 .7rem/1.5 Jost,"Gill Sans",sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}

.hero{position:relative;display:grid;place-items:start center;height:100svh;min-height:32rem;overflow:hidden}
.hero canvas{position:absolute;inset:0;width:100%;height:100%}
/* the name and its line arrive once the dive is over, in the top half; the arms and the sea bed keep the bottom */
.hero-text{position:relative;text-align:center;margin-top:11svh;padding:1.5rem 2rem;transition:opacity 1.6s;
  background:radial-gradient(closest-side,#131313f2 68%,#13131300 100%)}
h1{font:400 min(6.2vw,max(5.4rem,9.6svh))/1.1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin:0;white-space:nowrap}
h1::after{content:"";display:block;width:4.5rem;border-top:1px solid var(--gold);margin:1.3rem auto}
.tagline{font-style:italic;font-size:clamp(1.05rem,1.7vw,max(1.35rem,2.4svh));margin:0}
.again{position:absolute;right:1rem;bottom:1rem;padding:.45rem .9rem;background:#131313cc;border:1px solid var(--hair);cursor:pointer;transition:opacity .6s}
.tagline{transition:opacity 1.6s;text-wrap:balance}
.no-name .hero-text{opacity:0}
.no-line .tagline,.no-line .again{opacity:0;pointer-events:none}
/* no edge under the hero: its last fifth fades into the page's own colour, and the first section has no rule */
.hero::after{content:"";position:absolute;inset:auto 0 0;height:24%;background:linear-gradient(#13131300,#131313 92%);pointer-events:none}
.again{z-index:1}
/* the way down: a gold disc with a white arrow, once the arms have gone and the water is looping */
.more{position:absolute;left:50%;bottom:1.6rem;z-index:1;width:3.2rem;height:3.2rem;margin-left:-1.6rem;border-radius:50%;
  background:var(--disc);display:grid;place-items:center;transition:opacity .8s,visibility .8s,transform .2s}
.more svg{width:1.35rem;height:1.35rem}
.more:hover{transform:translateY(3px)}
.no-more .more{opacity:0;visibility:hidden}


/* ---- the page under the hero ----
   Five rooms of one house, each furnished differently, the words swapping sides from room to room: tech and finance
   is all type (words left); games is prints laid on the green baize (words right); places and pages is a spread of
   prints and one framed Escher on the table (words left); above and below is its words on a gold line, two views beneath;
   notes and queries is the form beside a full-height portrait (words left).
   Spacing runs on a 4px step: .25 .5 .75 1 1.5 2 3 4.5rem. */
main{--edge:clamp(1.25rem,5vw,5.5rem);--side:max(var(--edge),calc((100vw - 1600px)/2));--gut:clamp(1rem,2vw,2rem);--pad:clamp(3rem,5.5vw,4.5rem);overflow-x:clip}
section{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);padding:var(--pad) var(--side);align-items:start}
h2{font:400 clamp(2.7rem,6.4vw,5.6rem)/.98 var(--display);letter-spacing:-.012em;margin:0 0 1.5rem;text-wrap:balance}
h2 em{font:italic 400 .56em var(--text);letter-spacing:0;color:var(--gold);margin:0 .06em}
p{margin:0 0 1rem;max-width:34rem;text-wrap:pretty}
.tagline{max-width:none}
.say{font-size:1.08rem}
.hi{color:var(--gold)}
figure{margin:0;min-width:0}
figure img{display:block;width:100%;height:auto}
.copy>:last-child{margin-bottom:0}

/* tech and finance: type only. The heading with the craft line as its standfirst, what the work is in two book
   columns, the side project as a postscript; the three roles stand to the right like names on a register */
.work{padding-top:clamp(1rem,3vw,2.5rem)}
.work h2{grid-column:1/9;grid-row:1;margin-bottom:.75rem}
.craft{grid-column:1/8;grid-row:2;font:italic 400 clamp(1.2rem,1.75vw,1.5rem)/1.4 var(--text);color:var(--sage);margin:0 0 2rem;max-width:none}
.trade{grid-column:1/8;grid-row:3;columns:2;column-gap:var(--gut)}
.trade p{break-inside:avoid;max-width:none}
.trade p:first-child::first-line{font-variant:small-caps;letter-spacing:.04em}
.side{grid-column:1/8;grid-row:4;margin:1rem 0 0;padding-top:1rem;border-top:1px solid #bfa05a40;max-width:none;font-size:.9rem;line-height:1.6;color:#e8e1d0b3;font-style:italic}
.roles{grid-column:9/13;grid-row:1/5;align-self:center;list-style:none;margin:0;padding:.25rem 0 .25rem clamp(1.25rem,2.2vw,2.25rem);border-left:1px solid var(--hair)}
.roles li+li{margin-top:1.75rem}
.roles b{display:block;font:400 clamp(1.45rem,2.1vw,1.9rem)/1.12 var(--display);color:var(--ivory)}
.roles span{display:block;margin-top:.4rem;font:500 .7rem/1.5 Jost,"Gill Sans",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--tan)}

/* games, on racing green as on a card table: the three games are prints with cream mounts, laid down by hand, each
   with its name written on the mount; the cream edge and an offset shadow are what make the layering read on a dark
   ground. The words to the right */
.games{background:var(--green)}
.games .copy{grid-column:8/13;grid-row:1;align-self:center;padding-left:clamp(0rem,1.5vw,1.5rem)}
.now{font:400 clamp(1.25rem,1.8vw,1.55rem)/1.35 var(--display);color:var(--sage);max-width:24ch;margin-top:1.5rem}
/* laid in a small grid rather than pinned, so a caption that wraps pushes the next print down instead of under it */
.table{grid-column:1/8;grid-row:1;display:grid;grid-template-columns:62% 38%;align-items:center;margin-left:calc(-.4*var(--edge))}
.card{position:relative;z-index:var(--z);transform:rotate(var(--r));
  background:#ece4d3;padding:clamp(5px,.55vw,8px) clamp(5px,.55vw,8px) 0;
  box-shadow:0 .2rem .35rem #0008,0 1.1rem 2.2rem -.6rem #000c}
.card img{aspect-ratio:16/9;object-fit:cover}
.card figcaption{padding:.55rem .25rem .7rem;font:italic .82rem/1.35 var(--text);color:#4d3c2b}
.card figcaption b{display:block;font:400 1.22rem/1.15 var(--display);font-style:normal;color:#1d1a15;margin-bottom:.1rem}
.we{grid-column:1;grid-row:1/3;--r:-1.4deg;--z:1}
.we figcaption{padding-right:10%}   /* clear of the two prints laid over its right edge */
.rtb{grid-column:2;grid-row:1;align-self:end;width:118%;margin-left:-18%;--r:1.6deg;--z:2}
.fs{grid-column:2;grid-row:2;align-self:start;width:108%;margin:.75rem 0 0 -8%;--r:-.7deg;--z:3}

/* places and pages: the words to the left; to the right, one spread laid out on the table. Prints of the places in
   the same cream stock and shadow as the games' cards, each turned a little, overlapping by about a quarter; among
   them the Escher, in a gallery's cream mount and slim black frame, its credit written on the mount. Every piece is
   placed by position inside one box of fixed proportions, so the arrangement holds at every width */
.places{padding-block:clamp(2.5rem,4.5vw,3.5rem);align-items:center}
.places .copy{grid-column:1/5;grid-row:1}
.places .say{font-size:clamp(1.08rem,1.45vw,1.3rem);line-height:1.55}
.spread{grid-column:5/13;grid-row:1;position:relative;aspect-ratio:100/52;margin-right:calc(-.4*var(--side))}
.spread>figure{position:absolute;left:var(--x);top:var(--y);width:var(--w);z-index:var(--z,1);transform:rotate(var(--r,0deg))}
.snap{background:#ece4d3;padding:clamp(4px,.5vw,7px);box-shadow:0 .2rem .35rem #0008,0 1.1rem 2.2rem -.6rem #000c}
.sinai{--x:0%;--y:4.6%;--w:44%;--r:-1.2deg;--z:1}
.phi{--x:38%;--y:0%;--w:40%;--r:1.4deg;--z:2}
.guernsey{--x:80%;--y:11.5%;--w:18%;--r:2.4deg;--z:3}
.hakone{--x:1%;--y:30%;--w:18%;--r:1.8deg;--z:2}
.arch{--x:17%;--y:58%;--w:17%;--r:-2deg;--z:3}
.framed{--x:35.5%;--y:41%;--w:17%;--r:-.6deg;--z:3}
.shelves{--x:51%;--y:49%;--w:18%;--r:2deg;--z:4}
.balcony{--x:70%;--y:37%;--w:16.5%;--r:-5deg;--z:5}
/* hung, not thrown: a cream mount, a slim black frame, a gold line round the picture, and the credit on the mount */
.framed{background:#ece4d3;padding:clamp(.5rem,1.1vw,1rem) clamp(.5rem,1.1vw,1rem) 0;border:clamp(3px,.35vw,5px) solid #0c0b0a;
  box-shadow:0 .5rem .7rem -.2rem #0009,0 1.6rem 2.6rem -.8rem #000c}
.framed img{aspect-ratio:3/4;object-fit:cover;outline:1px solid #bfa05a99;outline-offset:3px}
.framed figcaption{padding:.55rem 0 .6rem;text-align:center;font:italic clamp(.62rem,.75vw,.78rem)/1.3 var(--text);color:#4d3c2b}
.framed figcaption b{display:block;font:500 clamp(.5rem,.55vw,.6rem)/1.5 Jost,"Gill Sans",sans-serif;letter-spacing:.18em;text-transform:uppercase;font-style:normal;color:#5d4b38}

/* above and below, on deep sea: the words first, the paragraph to the left and the title to the right, both standing
   on one gold line; under it, the two views from either licence side by side, running to the foot of the section */
/* the photographs end the same distance from the section's foot as they stand apart from each other */
.dive{background:var(--sea);padding:var(--pad) var(--side) .5rem;row-gap:0;align-items:end}
.dive h2{grid-column:7/13;grid-row:1;margin:0;text-align:right}
.dive .say{grid-column:1/7;grid-row:1;margin:0;font-size:clamp(1.08rem,1.45vw,1.3rem);line-height:1.55}
.dive .band{grid-column:1/-1;grid-row:2;display:flex;gap:.5rem;height:min(26vw,44svh);min-height:11rem;
  margin:clamp(1.75rem,3vw,2.75rem) calc(-1*var(--side)) 0;padding-top:.5rem;border-top:1px solid var(--gold)}
.dive .band img{width:100%;height:100%;object-fit:cover}
.dive .dunes{flex:1 1 0;min-width:0}
.dive .dunes img{object-position:50% 70%}
.dive .diver{flex:none;height:100%;aspect-ratio:5/4}

/* notes and queries, on umber: the ask, the form and the way out down the left; the portrait fills the right of the
   section, top to bottom, to the page's own edge */
.write{background:var(--umber);padding-bottom:1.5rem;row-gap:1.5rem}
.write .portrait{position:absolute;top:0;right:0;bottom:0;width:34%}
.write .portrait img{width:100%;height:100%;object-fit:cover;object-position:58% 40%}
.ask{grid-column:1/8}
.ask h2{margin-bottom:1rem}
.ask p{margin:0}
form{grid-column:1/8;display:grid;grid-template-columns:1fr 1fr;gap:1.25rem 1.5rem}
.full{grid-column:1/-1}
label{display:grid;gap:.25rem;font:500 .74rem/1.5 Jost,"Gill Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--tan)}
input,textarea{font:400 1.05rem/1.5 var(--text);letter-spacing:0;text-transform:none;color:var(--ivory);caret-color:var(--gold);background:#0000;border:0;border-bottom:1px solid #c9a27e80;padding:.45rem .1rem;width:100%;border-radius:0}
textarea{resize:vertical}
input:hover,textarea:hover,input:focus,textarea:focus{border-bottom-color:var(--tan)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem}
.actions button{font:400 1.3rem/1 var(--display);padding:.9rem 1.8rem;background:var(--gold);color:var(--coal);border:0;cursor:pointer;
  box-shadow:0 .2rem .4rem #0006,0 .9rem 1.6rem -.7rem #000c;transition:background-color .15s,transform .15s}
.actions button:hover{background:var(--ivory);transform:translateY(-1px)}
/* the way out, a quiet second button: a gold hairline, the mark and the name */
.pill{display:inline-flex;align-items:center;gap:.55rem;padding:.8rem 1.25rem;border:1px solid #bfa05a99;color:var(--ivory);text-decoration:none;
  font:500 .76rem/1 Jost,"Gill Sans",sans-serif;letter-spacing:.18em;text-transform:uppercase;transition:background-color .15s,border-color .15s}
.pill svg{width:1rem;height:1rem;color:var(--gold)}
.pill:hover{background:#bfa05a1f;border-color:var(--gold);color:var(--ivory)}
/* the form's answer, under the buttons; the bots' field kept off screen */
.state{margin:0;min-height:0;font-style:italic;color:var(--sage)}
.state:empty{display:none}
.state.bad{color:#e6a598}
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-turnstile:empty{display:none}
button[disabled]{opacity:.6;cursor:progress}
.fine{font-size:.82rem;color:#e8e1d0b3;margin:-.25rem 0 0}
footer{grid-column:1/8;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.25rem;font-size:.82rem;color:#e8e1d0b3;margin-top:.75rem;padding-top:1rem;border-top:1px solid #c9a27e33}
footer nav{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;margin-left:auto}
footer nav a{display:inline-flex;align-items:center;gap:.35rem;color:var(--ivory);text-decoration:none;padding-bottom:.2rem;
  font:500 .7rem/1.4 Jost,"Gill Sans",sans-serif;letter-spacing:.18em;text-transform:uppercase;
  background:linear-gradient(var(--gold),var(--gold)) 0 100%/30% 1px no-repeat;transition:background-size .25s,color .15s}
footer nav a:hover{color:var(--gold);background-size:100% 1px}
footer nav svg{width:.8rem;height:.8rem;color:var(--gold)}
.seal{width:3.1rem;margin:0;color:var(--gold)}
.seal text{font:400 24px var(--display);fill:currentColor;letter-spacing:.06em}
.seal circle[fill]{fill:var(--umber)}

/* the page for a missing address: one quiet screen, the heading in the house pattern, the way back to the surface */
.lost{min-height:100svh;display:grid;align-content:center;justify-items:start;gap:1.25rem;max-width:44rem;margin:0 auto;padding:2rem clamp(1.25rem,5vw,3rem)}
.lost h1{font:400 clamp(2.7rem,7vw,5.2rem)/1 var(--display);letter-spacing:-.012em;text-transform:none;color:var(--ivory);white-space:normal;margin:0}
.lost h1::after{display:none}
.lost h1 em{font:italic 400 .56em var(--text);letter-spacing:0;color:var(--gold);margin:0 .06em}
.lost p{margin:0;font-size:1.08rem;color:#e8e1d0cc}
.lost .pill{margin-top:.75rem}

/* the privacy page: one dense column */
.policy{max-width:44rem;margin:0 auto;padding:clamp(2rem,5vw,3.5rem) 1.4rem 3rem;font-size:.95rem;line-height:1.6}
.policy h1{font:400 clamp(2.6rem,7vw,4rem)/1 var(--display);letter-spacing:0;text-transform:none;color:var(--ivory);white-space:normal;margin:.8rem 0 .4rem}
.policy h1::after{display:none}
.policy h2{font:400 1.4rem/1.2 var(--display);letter-spacing:0;margin:1.6rem 0 .3rem}
.policy p,.policy ul{max-width:none;margin:0 0 .6rem}
.policy ul{padding-left:1.1rem}
.policy .home{font-size:.85rem}
.policy .dated{color:var(--tan);font-style:italic}

/* tablets: the same rooms, re-hung for a narrower wall */
@media(min-width:45.01rem) and (max-width:64rem){
  .work h2,.craft,.trade,.side{grid-column:1/9}
  .trade{columns:1}
  .roles{grid-column:9/13}
  .roles li+li{margin-top:1.25rem}
  .games .copy{grid-column:3/13;grid-row:1;padding:0}
  .table{grid-column:1/13;grid-row:2;margin:2.5rem calc(-.5*var(--edge)) 0}
  .write .portrait{width:32%}
  .ask,form,footer{grid-column:1/9}
  form{grid-template-columns:1fr}
}
/* phones: one file down the page, the words always first */
@media(max-width:45rem){
  h1{font-size:10.5vw;white-space:normal}
  .hero-text{margin-top:6svh}
  section>*{grid-column:1/-1!important;grid-row:auto!important}
  .roles{margin-top:.5rem}
  .roles li+li{margin-top:1rem}
  .craft{margin:1.5rem 0 1.25rem}
  .trade{columns:1}
  .games .copy{padding:0;margin-bottom:2rem}
  /* the prints in a loose pile, each one's foot laid over the head of the next */
  .table{grid-template-columns:1fr;margin:0}
  .we,.rtb,.fs{grid-column:1;grid-row:auto}
  .we{width:92%;--z:3}
  .we figcaption{padding-right:.25rem}
  .rtb{width:86%;--z:2;margin:-.75rem 0 0 auto}
  .fs{width:88%;--z:1;margin:-.75rem 0 0 3%}
  .write{padding-top:0}
  .write .portrait{position:static;width:auto;margin:0 calc(-1*var(--side)) 1rem;aspect-ratio:4/3}
  .write .portrait img{object-position:60% 35%}
  form{grid-template-columns:1fr}
  footer nav{margin-left:0}
}

/* places and pages, above and below: tablets and phones */
@media(min-width:45.01rem) and (max-width:64rem){
  .places .copy{grid-column:1/10}
  .spread{grid-column:1/13;grid-row:2;margin:1.5rem 0 0}
  .dive h2{grid-column:1/13;grid-row:1}
  .dive .say{grid-column:1/10;grid-row:2;margin-top:1rem}
  .dive .band{grid-row:3}
}
@media(max-width:45rem){
  .places .copy{margin-bottom:2rem}
  .spread{aspect-ratio:100/141;margin:0}
  .sinai{--x:0%;--y:0%;--w:72%}
  .phi{--x:30%;--y:12.8%;--w:68%}
  .guernsey{--x:2%;--y:19.9%;--w:34%;--r:-2deg}
  .hakone{--x:66%;--y:35.5%;--w:30%;--r:2.2deg}
  .arch{--x:6%;--y:42.6%;--w:32%;--r:-1.6deg}
  .framed{--x:40%;--y:58%;--w:32%;--r:-.8deg}
  .shelves{--x:2%;--y:74%;--w:34%}
  .balcony{--x:71%;--y:72%;--w:27%;--r:-5deg}
  .dive>h2{grid-row:1!important;text-align:left;margin-bottom:1rem}
  .dive>.say{grid-row:2!important}
  .dive>.band{grid-row:3!important;height:auto;min-height:0}
  .dive .dunes,.dive .diver{flex:1 1 0;height:auto;aspect-ratio:5/6}
}