/* ari site. Two inks from the plate (blue field, paper) and one red thread:
   Ariadne's, which runs from the hero down through the dark and back out to
   the valley, where it ends at the wordmark's dot. */

@font-face{
  font-family:"Newsreader";
  font-style:normal;font-weight:300 500;font-display:swap;
  src:url("/assets/fonts/newsreader-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Newsreader";
  font-style:italic;font-weight:300 500;font-display:swap;
  src:url("/assets/fonts/newsreader-italic.woff2") format("woff2");
}

:root{
  --field:#5165A2;      /* sampled from the plate's upper left */
  --ink:#43558F;        /* a step deeper, for text contrast */
  --ink-deep:#26356B;   /* text on paper */
  --night:#172350;      /* the labyrinth: the plate's darkest shadow */
  --paper:#EEEBE1;
  --paper-hi:#F6F4EC;
  --red:#B8402F;        /* the dot */
  --thread:#D0563F;     /* the same red, lifted so a hairline reads on night */
  --edge:clamp(20px,5.2vw,72px);
  --measure:62ch;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --lift:0 1px 3px rgba(16,28,62,.9),0 2px 20px rgba(16,28,62,.75);
  --tooth:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--ink);
  color:var(--paper-hi);
  font-family:var(--serif);
  font-size:clamp(17px,1.25vw,19px);
  line-height:1.62;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,dt,strong{font-weight:400}
::selection{background:rgba(184,64,47,.85);color:var(--paper-hi)}
:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:2px}

.skip{
  position:absolute;left:var(--edge);top:-100px;z-index:20;
  background:var(--paper-hi);color:var(--ink-deep);
  padding:.5em .9em;font-size:16px;text-decoration:none;
}
.skip:focus{top:12px}

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

/* ---------- wordmark ---------- */
.mark{
  font-weight:300;line-height:1;letter-spacing:-.015em;
  color:var(--paper-hi);text-decoration:none;
}
.mark-dot{color:var(--red)}

/* ---------- hero: the plate, full bleed ---------- */
.hero{
  position:relative;isolation:isolate;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;
  overflow:hidden;
}
.plate-wrap{position:absolute;inset:0;z-index:-3}
.plate{
  width:100%;height:100%;
  object-fit:cover;object-position:center 42%;
  animation:develop 1.6s ease-out both;
}
@keyframes develop{from{opacity:0}to{opacity:1}}
/* keeps the type legible over the engraving, like a vignette on the plate */
.scrim{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(163deg,rgba(24,40,84,.80) 0%,rgba(24,40,84,.50) 28%,rgba(24,40,84,0) 58%),
    linear-gradient(0deg,rgba(24,40,84,.62) 0%,rgba(24,40,84,0) 34%);
}
/* on the home page the valley sinks into the night below it */
.hero-home .scrim{
  background:
    linear-gradient(163deg,rgba(24,40,84,.80) 0%,rgba(24,40,84,.50) 28%,rgba(24,40,84,0) 58%),
    linear-gradient(0deg,var(--night) 0%,rgba(23,35,80,.7) 12%,rgba(23,35,80,0) 40%);
}
/* paper tooth over the print */
.grain{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:.22;mix-blend-mode:overlay;
  background-size:200px 200px;background-image:var(--tooth);
}

.topbar{
  padding:var(--edge) var(--edge) 0;
  animation:settle 1.1s cubic-bezier(.2,.7,.2,1) .15s both;
}
.hero-mark{font-size:clamp(46px,6.6vw,84px)}
.hero-copy{
  flex:1 1 auto;
  padding:clamp(18px,2.4vh,28px) var(--edge) 0;
  animation:settle 1.1s cubic-bezier(.2,.7,.2,1) .3s both;
}
.tagline{
  font-style:italic;font-size:clamp(17px,1.35vw,21px);line-height:1.5;
  text-shadow:var(--lift);
}
.hero-foot{
  padding:0 var(--edge) clamp(20px,4vh,36px);
  font-style:italic;font-size:15px;letter-spacing:.01em;
  color:rgba(246,244,237,.82);
  text-shadow:var(--lift);
  animation:settle 1.1s cubic-bezier(.2,.7,.2,1) .45s both;
}
/* the thread's first stretch, dropping out of the plate */
.hero-home::after{
  content:"";position:absolute;left:50%;bottom:0;
  width:1.5px;height:clamp(40px,9vh,90px);margin-left:-.75px;
  background:linear-gradient(180deg,rgba(208,86,63,0),var(--thread));
}
.down{
  color:rgba(246,244,237,.92);text-decoration:none;
  border-bottom:1px solid rgba(246,244,237,.55);padding-bottom:3px;
}
.down:hover{border-color:var(--paper-hi)}
@keyframes settle{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- the labyrinth: one dark field, text set along the thread ---------- */
.night{
  position:relative;isolation:isolate;
  background:var(--night);color:var(--paper-hi);
  padding:0 var(--edge);
}

/* a stretch of thread between two passages */
.strand{display:flex;justify-content:center;height:clamp(110px,20vh,220px)}
.strand svg,.fragments-thread svg{height:100%;overflow:visible}
.strand svg{width:40px}
.strand path,.fragments-thread path{
  fill:none;stroke:var(--thread);stroke-width:1.5;stroke-linecap:round;
}
/* drawn as you walk down the page, where the browser can */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .strand path,.fragments-thread path{
      stroke-dasharray:1;stroke-dashoffset:1;
      animation:draw linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 55%;
    }
    .fragments-thread path{animation-range:entry 10% exit 30%}
  }
}
@keyframes draw{to{stroke-dashoffset:0}}

.chapter{max-width:44rem;margin:0 auto;text-align:center}
.telling{
  font-weight:300;line-height:1.22;letter-spacing:-.008em;
  font-size:clamp(27px,3.3vw,46px);
  text-wrap:balance;
}
.chapter p{
  margin:1.4em auto 0;max-width:36em;
  font-size:clamp(18px,1.4vw,21px);line-height:1.62;
  color:rgba(246,244,237,.86);
  text-wrap:pretty;
}

/* what it does: lines set either side of the thread */
.fragments-box{
  --gutter:clamp(90px,12vw,170px);
  position:relative;max-width:1080px;margin:0 auto;
}
.fragments-thread{
  position:absolute;top:0;bottom:0;left:50%;width:60px;margin-left:-30px;
  pointer-events:none;
}
.fragments-thread svg{width:60px}
.fragments{
  list-style:none;
  display:flex;flex-direction:column;gap:clamp(30px,4.4vw,56px);
}
.fragment{
  width:calc(50% - var(--gutter) / 2);
  font-style:italic;
  font-size:clamp(21px,2vw,28px);line-height:1.38;
  text-wrap:pretty;
}
.fragment:nth-child(odd){align-self:flex-start;text-align:right}
.fragment:nth-child(even){align-self:flex-end}

/* the knot: where the thread stops and ari waits for you */
.knot{
  width:11px;height:11px;margin:0 auto clamp(26px,3.6vw,40px);border-radius:50%;
  background:var(--red);
  box-shadow:0 0 0 5px rgba(184,64,47,.18),0 0 26px 4px rgba(208,86,63,.35);
}
.waiting{
  margin-top:1.6em;
  font-style:italic;font-size:15px;letter-spacing:.01em;
  color:rgba(246,244,237,.6);
}

/* questions */
.faq{max-width:40rem;margin:0 auto}
.faq-title{
  text-align:center;margin-bottom:clamp(28px,4vw,48px);
  font-weight:300;font-size:clamp(27px,3vw,40px);line-height:1.15;
}
.qa{border-top:1px solid rgba(246,244,237,.16)}
.qa:last-child{border-bottom:1px solid rgba(246,244,237,.16)}
.qa summary{
  list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:baseline;gap:1em;
  padding:1.1em 0;
  font-size:clamp(19px,1.5vw,22px);line-height:1.3;
  color:rgba(246,244,237,.94);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"";flex:none;width:9px;height:9px;margin-right:4px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-4px) rotate(45deg);
  transition:transform .25s ease;opacity:.6;
}
.qa[open] summary::after{transform:translateY(1px) rotate(225deg)}
.qa summary:hover{color:#fff}
.qa p{padding:0 0 1.4em;max-width:56ch;color:rgba(246,244,237,.82)}
.qa a{text-underline-offset:3px}

/* ---------- footer: out of the labyrinth, back into the valley ---------- */
.foot{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(380px,62vh,640px);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:0 0 clamp(18px,3.4vh,30px);
  background:var(--ink);
  text-align:center;
}
.foot-plate{position:absolute;inset:0;z-index:-2}
.foot-plate img{width:100%;height:100%;object-fit:cover;object-position:center 78%}
.foot::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,var(--night) 0%,rgba(23,35,80,.72) 26%,rgba(23,35,80,.12) 62%,rgba(23,35,80,.5) 100%);
}
.foot-doc::before{
  background:linear-gradient(180deg,var(--paper) 0%,rgba(238,235,225,0) 30%,rgba(23,35,80,.15) 62%,rgba(23,35,80,.55) 100%);
}
.foot-end{display:flex;flex-direction:column;align-items:center}
.foot-end .strand{height:clamp(120px,26vh,260px)}
/* the dot sits on the page's centre line, so the thread lands on it;
   "ari" hangs off to its left */
.end-mark{
  position:relative;display:inline-block;
  margin-top:-.62em;
  font-size:clamp(52px,6vw,84px);
  text-shadow:var(--lift);
}
.end-word{position:absolute;right:100%;top:0}
.foot-line{margin-top:.5em;font-style:italic;text-shadow:var(--lift)}
.foot-plain{padding-top:clamp(64px,10vw,120px)}
.foot-plain .end-mark{margin-top:0}
.foot-row{
  display:flex;justify-content:center;align-items:baseline;flex-wrap:wrap;gap:.5em 1.8em;
  padding:0 var(--edge);
  font-style:italic;font-size:15px;text-shadow:var(--lift);
}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.4em 1.6em;list-style:none}
.foot-links a{
  text-decoration:none;color:rgba(246,244,237,.95);
  border-bottom:1px solid rgba(246,244,237,.5);padding-bottom:2px;
}
.foot-links a:hover{border-color:var(--paper-hi)}
.foot-copy{color:rgba(246,244,237,.8)}

/* ---------- documents: privacy, terms ---------- */
.doc-page{background:var(--paper);color:var(--ink-deep)}
.doc-top{background:var(--night);padding:clamp(20px,3vw,32px) 0}
.doc-top .wrap{display:flex;justify-content:space-between;align-items:baseline;gap:1em}
.doc-top .mark{font-size:clamp(34px,3.6vw,46px)}
.nav{display:flex;gap:clamp(1em,2.4vw,2em);font-style:italic;font-size:17px}
.nav a{
  text-decoration:none;color:rgba(246,244,237,.92);
  border-bottom:1px solid rgba(246,244,237,0);padding-bottom:2px;
  transition:border-color .3s ease,color .3s ease;
}
.nav a:hover{color:var(--paper-hi);border-color:rgba(246,244,237,.6)}
.doc{padding:clamp(48px,7vw,96px) 0 clamp(40px,5vw,64px)}
.doc-col{max-width:var(--measure)}
.doc h1{
  font-weight:300;line-height:1.04;letter-spacing:-.015em;
  font-size:clamp(40px,5.4vw,68px);
}
.doc-date{margin-top:.8em;font-style:italic;color:rgba(38,53,107,.78)}
.doc-intro{margin-top:1.6em;font-size:clamp(19px,1.5vw,22px);line-height:1.5}
.doc h2{
  margin-top:2.2em;
  font-weight:400;font-style:italic;line-height:1.25;
  font-size:clamp(22px,1.9vw,27px);
}
.doc p,.doc li{margin-top:.8em;line-height:1.68}
.doc ul{padding-left:1.15em}
.doc li::marker{color:rgba(38,53,107,.55)}
.doc a{color:var(--ink-deep);text-underline-offset:3px;text-decoration-thickness:1px}
.doc strong{font-weight:500}

/* ---------- not found ---------- */
.lost{min-height:100vh;min-height:100svh}
.lost .hero-copy{display:flex;flex-direction:column;justify-content:center}
.lost h1{
  font-weight:300;line-height:1.05;letter-spacing:-.012em;
  font-size:clamp(38px,5.4vw,72px);text-shadow:var(--lift);max-width:14ch;
}
.lost p{margin-top:.8em;font-style:italic;font-size:clamp(17px,1.35vw,21px);text-shadow:var(--lift)}
.lost .down{display:inline-block;margin-top:1.6em;font-style:italic;text-shadow:var(--lift)}

/* ---------- small screens: one column, the thread passes behind each line ---------- */
@media (max-width:760px){
  .fragments{gap:clamp(40px,9vw,60px)}
  .fragment,.fragment:nth-child(odd),.fragment:nth-child(even){
    position:relative;width:auto;align-self:center;text-align:center;
    padding:.5em 0;background:var(--night);
  }
}
@media (max-width:640px){
  .doc-top .nav{font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  .plate,.topbar,.hero-copy,.hero-foot{animation:none}
  .qa summary::after{transition:none}
}

/* home: one screen, everything set on the plate */
.hero-one::after{content:none}
.hero-one .scrim{
  background:
    linear-gradient(163deg,rgba(24,40,84,.80) 0%,rgba(24,40,84,.50) 28%,rgba(24,40,84,0) 58%),
    linear-gradient(0deg,rgba(23,35,80,.92) 0%,rgba(23,35,80,.6) 30%,rgba(23,35,80,0) 60%);
}
.hero-one .tagline{margin-top:.6em}
.one{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(36px,7vh,72px)}
.one .telling{max-width:22ch;text-wrap:wrap;text-shadow:var(--lift)}
.one p{margin-top:.9em;font-style:italic;font-size:clamp(17px,1.35vw,21px);text-shadow:var(--lift)}
.one .cta{margin-top:2.2em;font-size:15px}

/* documents: a single quiet line instead of the valley */
.doc-foot{padding:0 0 clamp(28px,4vw,48px);font-style:italic;font-size:15px;color:rgba(38,53,107,.75)}
.doc-foot .wrap{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5em 1.6em;
  padding-top:1.4em;border-top:1px solid rgba(38,53,107,.15);
}
.doc-foot ul{display:flex;flex-wrap:wrap;gap:.4em 1.6em;list-style:none}
.doc-foot a{color:var(--ink-deep);text-decoration:none}
.doc-foot a:hover,.doc-foot a[aria-current]{text-decoration:underline;text-underline-offset:3px}