/* ==========================================================================
   Syndaris
   ==========================================================================
   Warm earth in three steps: a cream page, brown ink, and a beige between
   them for anything secondary. There is no fourth colour - the one
   high-contrast element is the action block, which simply swaps page and
   ink. Anything that wanted an accent gets contrast or weight instead.

   Two themes out of one set of tokens. Light is the default; dark swaps the
   same three steps for an espresso page and cream ink. Every rule below is
   written against the tokens, so the dark theme restates nothing but colour.

   One typeface, two widths. Archivo is variable on both width and weight;
   entry names are set expanded to rhyme with the wordmark's extended
   letterforms, everything else sits at normal width.
   ========================================================================== */

:root{
  color-scheme:light dark;   /* so scrollbars and form chrome follow suit */

  --page:#EFE4D2;            /* cream */
  --ink:#2E2117;             /* deep brown; true black would kill the warmth */
  --muted:#725D49;           /* beige-brown, kept dark enough to pass AA on cream */
  --line:rgba(46,33,23,.16);
  --line-bright:rgba(46,33,23,.36);

  --gutter:clamp(22px, 5vw, 64px);
  --measure:62ch;
}

@media (prefers-color-scheme: dark){
  :root{
    --page:#1E1610;          /* espresso, not black */
    --ink:#F0E5D3;           /* cream */
    --muted:#A4907A;         /* beige */
    --line:rgba(240,229,211,.15);
    --line-bright:rgba(240,229,211,.34);
  }
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--page);
  color:var(--ink);
  font-family:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,p{margin:0}

a{color:inherit}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:10;
  padding:14px 20px;background:var(--ink);color:var(--page);
}
.skip-link:focus{left:0}

:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:4px;
}

.page{
  max-width:1180px;
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* --- Masthead ------------------------------------------------------------- */
/* The wordmark is the hero. With two entries in the catalogue, a full-height
   opening panel would just delay the only content that matters. */
.masthead{
  padding-block:clamp(72px, 13vw, 150px) clamp(56px, 9vw, 104px);
}

.wordmark{
  margin:0;
  line-height:0;        /* the img is the heading; kill the text box */
}
.wordmark picture{display:block}
.wordmark img{
  display:block;
  width:min(100%, 560px);
  height:auto;
}

.standfirst{
  margin-top:clamp(36px, 5vw, 56px);
  max-width:46ch;
  font-size:clamp(19px, 2.1vw, 24px);
  line-height:1.45;
  font-stretch:104%;
  color:var(--ink);
  text-wrap:balance;
}

/* --- Catalogue ------------------------------------------------------------ */
/* An index: name on the left, what it is on the right, a rule between each.
   Not cards - the entries are unlike each other, and identical boxes would
   flatten exactly the difference a visitor needs to see. */
.catalogue{
  border-top:1px solid var(--line);
}

.entry{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(24px, 4vw, 64px);
  align-items:start;
  padding-block:clamp(44px, 6vw, 72px);
  border-bottom:1px solid var(--line);
}

.entry-name{
  margin:0;
  font-size:clamp(34px, 6.2vw, 68px);
  font-weight:500;
  font-stretch:120%;
  line-height:0.98;
  letter-spacing:-.005em;
  text-wrap:balance;
}

.entry-body{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:clamp(20px, 2.6vw, 30px);
  padding-top:.45em;      /* optically settle against the big name */
}

.entry-summary{
  max-width:var(--measure);
  font-size:clamp(16px, 1.6vw, 18.5px);
  line-height:1.6;
  color:var(--ink);
}

.entry-needs{
  font-size:15px;
  line-height:1.5;
  color:var(--muted);
}

/* --- Action --------------------------------------------------------------- */
/* The only inverted element on the page, and the only thing competing with
   the entry names for attention. Near-square rather than a pill: the wordmark
   is squared off, and pills belong to the site this replaced. */
.action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:12px 26px;
  border:1px solid var(--ink);
  border-radius:2px;
  background:var(--ink);
  color:var(--page);
  font:inherit;
  font-size:16px;
  font-weight:600;
  font-stretch:104%;
  text-decoration:none;
  cursor:pointer;
  /* --mx/--my come from the magnetic-pointer script in app.js. */
  transform:translate(var(--mx,0px), var(--my,0px)) scale(var(--press,1));
  transition:transform .4s cubic-bezier(.16,1,.3,1),
             background-color .2s ease,
             color .2s ease;
}
.action:hover{
  background:transparent;
  color:var(--ink);
}
.action:active{--press:.975}

/* Listed but not available yet. Stated plainly rather than styled to look
   like a button someone will try to press. */
.action-pending{
  font-size:15px;
  color:var(--muted);
  border:1px dashed var(--line-bright);
  border-radius:2px;
  padding:11px 20px;
  display:inline-block;
}

/* --- Contact -------------------------------------------------------------- */
/* Shares the catalogue's grid so the left column keeps meaning the same
   thing all the way down the page: what this block is. */
.contact{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(24px, 4vw, 64px);
  align-items:start;
  padding-block:clamp(44px, 6vw, 72px);
  border-bottom:1px solid var(--line);
}

.contact-heading{
  margin:0;
  font-size:clamp(22px, 2.6vw, 30px);
  font-weight:500;
  font-stretch:112%;
  line-height:1.1;
}

.contact-body{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:clamp(14px, 1.8vw, 20px);
  padding-top:.1em;
}

.contact-address{
  font-size:clamp(21px, 3vw, 34px);
  font-weight:500;
  font-stretch:112%;
  line-height:1.15;
  letter-spacing:-.01em;
  text-decoration:none;
  border-bottom:1px solid var(--line-bright);
  padding-bottom:.08em;
  transition:border-color .2s ease;
  overflow-wrap:anywhere;
}
.contact-address:hover{border-bottom-color:var(--ink)}

/* --- Colophon ------------------------------------------------------------- */
.colophon{
  padding-block:clamp(40px, 6vw, 64px) clamp(56px, 8vw, 96px);
}
.colophon-legal{
  font-size:13.5px;
  line-height:1.6;
  color:var(--muted);
}

/* --- On the absence of a load animation -----------------------------------
   There was a staggered fade-in here. It was cut deliberately.

   Any reveal built on opacity makes the text depend on an animation clock
   that is not guaranteed to run - a backgrounded or throttled tab can leave
   the whole page blank, which is what happened twice while building this.
   A catalogue of two things does not need an entrance, and nothing should
   stand between someone and the one thing they came to read.

   The motion that remains is the kind that answers a person: the pull on an
   action under the cursor, and its inversion on hover.
   -------------------------------------------------------------------------- */

/* --- Responsive ----------------------------------------------------------- */
@media (max-width:760px){
  .entry,
  .contact{
    grid-template-columns:1fr;
    gap:18px;
  }
  .entry-body,
  .contact-body{padding-top:0}
  .entry-name{font-size:clamp(32px, 11vw, 46px)}
  .standfirst{max-width:none}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .action{transform:none}
}