:root{
  /* layout */
  --gutter:clamp(22px,5.5vw,104px);
  --edge:clamp(20px,3vw,44px);
  --colL:minmax(0,.8fr);
  --colR:minmax(0,1.55fr);
  --colgap:clamp(16px,5vw,84px);
  --display:clamp(4rem,15vw,13rem);
  --measure:66ch;

  /* palette — day (default) */
  --paper:#FBFAF8;
  --ink:#191714;
  --ink-2:#26221E;
  --grey:#7A7671;
  --hair:#E4E1DC;
  --halo-a:rgba(25,23,20,.055);
  --halo-b:rgba(25,23,20,.016);
  --horizon:rgba(25,23,20,.12);
  --mark-shadow:
    0 1px 0 rgba(255,255,255,1),
    0 -1px 1px rgba(25,23,20,.10),
    0 4px 9px rgba(25,23,20,.055);
  color-scheme:light;
}

/* dawn */
:root[data-theme="dawn"]{
  --paper:#FBF6F2;
  --ink:#201D19;
  --ink-2:#2A241E;
  --grey:#847B74;
  --hair:#EBE3DC;
  --halo-a:rgba(230,160,130,.13);
  --halo-b:rgba(170,160,205,.05);
  --horizon:rgba(70,45,40,.11);
  --mark-shadow:
    0 1px 0 rgba(255,255,255,.95),
    0 -1px 1px rgba(40,30,25,.08),
    0 4px 10px rgba(60,40,35,.05);
  color-scheme:light;
}

/* day */
:root[data-theme="day"]{ color-scheme:light; }

/* sunset */
:root[data-theme="sunset"]{
  --paper:#F5EADF;
  --ink:#241A13;
  --ink-2:#30241A;
  --grey:#7F6F60;
  --hair:#E6D7C7;
  --halo-a:rgba(206,108,56,.16);
  --halo-b:rgba(150,72,92,.05);
  --horizon:rgba(80,45,25,.14);
  --mark-shadow:
    0 1px 0 rgba(255,250,244,.85),
    0 -1px 1px rgba(70,35,15,.10),
    0 6px 14px rgba(90,45,20,.07);
  color-scheme:light;
}

/* night */
:root[data-theme="night"]{
  --paper:#151310;
  --ink:#ECE7DF;
  --ink-2:#F1ECE4;
  --grey:#9A9188;
  --hair:#2C2824;
  --halo-a:rgba(255,208,150,.06);
  --halo-b:rgba(150,170,220,.02);
  --horizon:rgba(236,231,223,.13);
  --mark-shadow:
    0 1px 0 rgba(255,255,255,.04),
    0 2px 24px rgba(0,0,0,.5);
  color-scheme:dark;
}

/* Before the clock script runs (or with no JS), honour the OS setting. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme]){
    --paper:#151310;
    --ink:#ECE7DF;
    --ink-2:#F1ECE4;
    --grey:#9A9188;
    --hair:#2C2824;
    --halo-a:rgba(255,208,150,.06);
    --halo-b:rgba(150,170,220,.02);
    --horizon:rgba(236,231,223,.13);
    --mark-shadow:
      0 1px 0 rgba(255,255,255,.04),
      0 2px 24px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  font-size:17px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background-color 900ms ease,color 900ms ease;
}

.wrap{max-width:1160px;margin:0 auto;padding:0 var(--gutter);}

/* skip link */

.skip{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:20;
  background:var(--ink);
  color:var(--paper);
  padding:10px 16px;
  border-radius:2px;
  font-size:.875rem;
}
.skip:focus{left:var(--edge);top:var(--edge);}

/* links */

a{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--hair);
  padding-bottom:2px;
  transition:border-color 500ms ease;
}
a:hover{border-bottom-color:var(--ink);}
a:focus-visible{outline:1px solid var(--ink);outline-offset:5px;border-radius:1px;}

/* fixed corner marks (home) */

.edge{
  position:fixed;
  z-index:6;
  font-size:.75rem;
  line-height:1;
  letter-spacing:.02em;
  color:var(--grey);
  opacity:0;
  animation:fade 2200ms ease 2000ms forwards;
}
.edge.tl{top:var(--edge);left:var(--edge);}
.edge.tr{top:var(--edge);right:var(--edge);}
.edge.bl{bottom:var(--edge);left:var(--edge);}

@keyframes fade{to{opacity:1;}}

/* hero */

.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:14vh var(--gutter) 12vh;
}

.halo{
  position:absolute;
  z-index:0;
  pointer-events:none;
  top:50%;left:50%;
  width:min(1400px,150vw);
  height:min(620px,64vh);
  transform:translate(-50%,-52%);
  background:radial-gradient(60% 54% at 50% 46%,var(--halo-a),var(--halo-b) 48%,transparent 78%);
  filter:blur(80px);
  opacity:0;
  animation:fade 3200ms ease 700ms forwards;
}

.plinth{
  position:relative;
  z-index:1;
  display:inline-block;
  opacity:0;
  animation:focusin 3000ms cubic-bezier(.18,.7,.16,1) 200ms forwards;
}

@keyframes focusin{
  from{opacity:0;filter:blur(20px);transform:scale(1.03);}
  to{opacity:1;filter:blur(0);transform:none;}
}

.mark,.mirror{
  margin:0;
  font-family:"Newsreader",Georgia,serif;
  font-weight:200;
  font-size:var(--display);
  line-height:1;
  letter-spacing:.022em;
  text-indent:.022em;
  white-space:nowrap;
}

.mark--sm{font-size:clamp(3rem,10vw,7rem);letter-spacing:.05em;}

.mark{
  display:block;
  padding-bottom:.09em;
  color:var(--ink-2);
  text-shadow:var(--mark-shadow);
}

.mirror{
  position:absolute;
  top:100%;left:0;right:0;
  color:var(--ink-2);
  transform-origin:top center;
  transform:scaleY(-1) translateY(-100%);
  opacity:.22;
  filter:blur(.8px);
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.95) 0%,rgba(0,0,0,.45) 24%,transparent 56%);
  mask-image:linear-gradient(to top,rgba(0,0,0,.95) 0%,rgba(0,0,0,.45) 24%,transparent 56%);
  user-select:none;
  pointer-events:none;
}

.horizon{
  position:absolute;
  top:100%;left:-12%;right:-12%;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--horizon) 24%,var(--horizon) 76%,transparent);
  pointer-events:none;
}

.standfirst{
  position:relative;z-index:1;
  margin:clamp(96px,17vh,200px) 0 0;
  max-width:33ch;
  font-size:clamp(.9375rem,1.1vw,1.0625rem);
  line-height:1.62;
  color:var(--grey);
  opacity:0;
  animation:fade 2400ms ease 1800ms forwards;
}

.rule{
  position:relative;z-index:1;
  width:1px;
  height:clamp(40px,7vh,72px);
  background:linear-gradient(var(--hair),transparent);
  margin-top:clamp(38px,6vh,76px);
  opacity:0;
  animation:fade 2000ms ease 2500ms forwards;
}

/* areas */

.areas{padding:clamp(56px,10vh,120px) 0 0;}

.area{
  display:grid;
  grid-template-columns:var(--colL) var(--colR);
  gap:var(--colgap);
  padding:clamp(36px,5.5vh,60px) 0;
  border-top:1px solid var(--hair);
}
@keyframes area-reveal{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:none;}
}

/* Scroll-linked reveal where supported; content stays visible everywhere else. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .area{
      animation:area-reveal linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 48%;
    }
  }
}

.area h2{
  margin:0;
  font-family:"Newsreader",Georgia,serif;
  font-weight:300;
  font-size:clamp(1.55rem,2.7vw,2.15rem);
  line-height:1.12;
}

.area p{margin:0;max-width:54ch;color:var(--grey);}

/* interior pages */

.masthead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  padding:clamp(28px,5vh,52px) 0 clamp(22px,3vh,32px);
  border-bottom:1px solid var(--hair);
  flex-wrap:wrap;
}

.masthead .wordmark{
  font-family:"Newsreader",Georgia,serif;
  font-weight:300;
  font-size:1.5rem;
  letter-spacing:.12em;
  text-indent:.12em;
  border:0;
  padding:0;
}

.masthead nav{
  display:flex;
  gap:clamp(16px,3vw,34px);
  font-size:.875rem;
  color:var(--grey);
}
.masthead nav a{
  color:var(--grey);
  border:0;
  padding:0;
}
.masthead nav a:hover,
.masthead nav a[aria-current="page"]{color:var(--ink);}

main.page{
  padding:clamp(56px,11vh,132px) 0 clamp(40px,7vh,88px);
}

.page-head{max-width:var(--measure);margin:0 0 clamp(40px,6vh,72px);}

.eyebrow{
  margin:0 0 18px;
  font-size:.75rem;
  letter-spacing:.24em;
  text-indent:.24em;
  text-transform:uppercase;
  color:var(--grey);
}

.page-head h1{
  margin:0;
  font-family:"Newsreader",Georgia,serif;
  font-weight:200;
  font-size:clamp(2.4rem,6vw,4.25rem);
  line-height:1.04;
  letter-spacing:.005em;
}

.page-head .meta{
  margin:22px 0 0;
  font-size:.875rem;
  color:var(--grey);
}

.prose{max-width:var(--measure);}

.prose section + section{margin-top:clamp(38px,6vh,64px);}

.prose h2{
  margin:0 0 14px;
  font-family:"Newsreader",Georgia,serif;
  font-weight:300;
  font-size:clamp(1.35rem,2.4vw,1.75rem);
  line-height:1.2;
}

.prose h3{
  margin:26px 0 8px;
  font-size:1.0625rem;
  font-weight:500;
  letter-spacing:.005em;
}

.prose p{margin:0 0 16px;color:var(--grey);}
.prose p:last-child{margin-bottom:0;}
.prose strong{color:var(--ink);font-weight:500;}

.prose ul{
  margin:0 0 16px;
  padding:0;
  list-style:none;
}
.prose li{
  position:relative;
  margin:0 0 10px;
  padding-left:24px;
  color:var(--grey);
}
.prose li::before{
  content:"";
  position:absolute;
  left:2px;top:.72em;
  width:6px;height:1px;
  background:var(--ink);
}

.prose .lede{
  color:var(--ink);
  font-size:1.0625rem;
}

/* footer */

footer.site{
  display:grid;
  grid-template-columns:var(--colL) var(--colR);
  gap:var(--colgap);
  padding:clamp(46px,7vh,80px) 0 clamp(52px,9vh,104px);
  border-top:1px solid var(--hair);
}

.imprint{
  font-family:"Newsreader",Georgia,serif;
  font-weight:300;
  font-size:.8125rem;
  letter-spacing:.34em;
  text-indent:.34em;
  color:var(--ink);
  line-height:2;
  margin:0;
}

.details p{margin:0;font-size:.9375rem;color:var(--grey);line-height:2;}
.details a{color:var(--ink);}

.footer-nav{
  margin:14px 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
  font-size:.8125rem;
}
.footer-nav a{
  color:var(--grey);
  border:0;
  padding:0;
}
.footer-nav a:hover{color:var(--ink);}

.colophon{
  margin:18px 0 0;
  font-size:.75rem;
  color:var(--grey);
  letter-spacing:.01em;
}

/* responsive */

@media (max-width:820px){
  .area,footer.site{grid-template-columns:1fr;}
  .area{gap:12px;}
  footer.site{gap:22px;}
  .edge.tr{display:none;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .plinth,.standfirst,.rule,.halo,.edge{opacity:1;animation:none;}
  .plinth{filter:none;}
}

/* print */

@media print{
  .edge,.halo,.mirror,.horizon,.rule{display:none;}
  body{background:#fff;color:#000;font-size:12pt;}
  a{color:#000;border:0;}
  .masthead{border-color:#ccc;}
}