/* Layout: one centred column, held close like the book in the hand. Photographs sit at about the book's own size, type is small and unhurried, and each section is given room. Reading pages are white; the cover and the closing sit on the cover's earth-dark ground. */
:root{
  --night:#1f0e0a;        /* the cover's dark edge */
  --red-earth:#a0431c;    /* the cover's lit ground */
  --amber:#b57115;        /* the cover title */
  --amber-lit:#d9942a;    /* the same amber, lifted for small type on the dark ground */
  --salt:#f4efe6;         /* the salt in the photographs: type on the dark ground */
  --paper:#ffffff;        /* the book's page */
  --ink:#000000;          /* the book's black */
  --graphite:#5a5550;     /* captions, dates, labels */
  /* each element's ground: the colour of its symbol in the book, a step deeper so type and photograph sit quietly on it */
  --mineral:#0e0e0e;
  --nature:#23582b;
  --fire:#b3151b;
  --water:#0a3f96;
  --earth:#d9942a;
  --display:"linotype-didot","Didot","Linotype Didot","GFS Didot","Bodoni 72",serif;
  --serif:"adobe-garamond-pro","Adobe Garamond Pro","EB Garamond",Garamond,"Liberation Serif",Georgia,serif;
  --sans:"acumin-pro","Acumin Pro","Helvetica Neue",Helvetica,"Liberation Sans",Arial,sans-serif;
  --gutter:clamp(1.25rem,6vw,6rem);
  --air:clamp(4.5rem,10vw,7.75rem);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:1.125rem;line-height:1.6;text-align:center;font-kerning:normal;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:.04em}
h1,h2,h3,p,figure,dl,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--amber-lit);outline-offset:3px}

/* ground */
.night{background:var(--night);color:var(--salt)}

.ground--mineral{background:var(--mineral)}
.ground--nature{background:var(--nature)}
.ground--fire{background:var(--fire)}
.ground--water{background:var(--water)}
.ground--earth{background:var(--earth);color:var(--night)}
.ground--earth .note,.ground--earth .plate figcaption{color:inherit;opacity:.85}
.night[class*="ground--"] .note,.night[class*="ground--"] .plate figcaption{opacity:.9}

/* site heading and menu */
.masthead{display:flex;flex-direction:column;align-items:center;gap:1.35rem;padding:2rem var(--gutter) 1.75rem;font-family:var(--sans);font-weight:500;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase}
.masthead a{text-decoration:none}
.masthead nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.7rem}
.masthead nav a{padding-bottom:.25em;border-bottom:1px solid transparent}
.masthead nav a:hover,.masthead nav a[aria-current="page"]{border-bottom-color:currentColor}
.wordmark{display:flex;align-items:center;gap:.5rem;font-size:.95rem;letter-spacing:.26em}
.wordmark img{width:1.4rem}
.night .wordmark{color:var(--amber-lit)}
/* the cover page: no hairline of white between the heading and the cover */
.masthead.night{position:relative;z-index:1;box-shadow:0 1px 0 var(--night)}

/* band: one centred column of the page */
.band{display:flex;flex-direction:column;align-items:center;gap:2.2rem;padding:var(--air) var(--gutter)}
.band > *{max-width:32rem;min-width:0}
.band:not(.night):not(.ground--earth) + .band:not(.night):not(.ground--earth){padding-top:0}
.masthead:not(.night) + main > .band:first-child{padding-top:clamp(.75rem,2.5vw,2rem)}
.band__head{display:grid;justify-items:center;gap:.75rem}
.band__head img{width:3.4rem}
.band__head img.cover-small{width:min(13rem,60%);aspect-ratio:1/1;object-fit:cover;margin-bottom:1.1rem}
.band__body{display:grid;justify-items:center;gap:1.7rem;width:100%}
.band > .band__body--wide{max-width:62rem}

/* photographs, at the size of the book */
.plate{width:min(100%,32rem)}
.band > .plate{max-width:none}
.plate img{width:100%;aspect-ratio:1/1;object-fit:cover}
.plate--cover{width:min(100%,34rem,54vh)}
.band--gate .plate{width:min(100%,32rem,56vh)}
.plate--portrait{width:min(100%,24rem)}
.band > .plate--small{width:min(13rem,60%)}
.plate--small figcaption{font-size:.8em}
.plate--portrait img{aspect-ratio:3/4}
.plate figcaption{font-size:.86em;line-height:1.5;color:var(--graphite);margin-top:.9rem;text-wrap:balance}
.night .plate figcaption{color:var(--salt);opacity:.8}
.mark{width:4.4rem}
.band__head img.page-mark{width:6.2rem;margin-block:.4rem .5rem}
.triad{word-spacing:.55em}

/* type */
.display{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.09em;line-height:1.25;font-size:clamp(1.3rem,2.3vw,1.7rem);text-wrap:balance}
.display--small{font-size:clamp(1.1rem,1.8vw,1.32rem)}
.sub{font-variant-caps:small-caps;letter-spacing:.06em;line-height:1.4;text-wrap:balance}
.label{font-family:var(--sans);font-weight:500;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.5}
.gate-name{font-family:var(--sans);font-weight:500;text-transform:uppercase;letter-spacing:.14em;line-height:1.4;font-size:.95rem}
.element{font-family:var(--sans);font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-size:.76rem;line-height:1.6}
.declare{font-style:italic;font-size:1.15em;line-height:1.5;text-wrap:balance}
.question{font-variant-caps:small-caps;letter-spacing:.07em;font-size:1.05em;line-height:1.3}
.prose{display:grid;gap:1em}
.prose p{text-wrap:balance}
.prose--left{text-align:left}
.band__body > .prose--left{justify-self:stretch}
.manifesto{gap:.85em}
.prose--left p{text-wrap:pretty}
strong{font-weight:700}
.lines{display:grid;gap:.6em}
.lines--italic{font-style:italic;font-size:1.1em}
.names{gap:.9em;font-style:italic}
.rule{width:4rem;height:1px;border:0;margin:.4rem 0;background:currentColor;opacity:.6}
.signature{font-style:italic}
.note{font-size:.88em;color:var(--graphite);text-wrap:balance}
.names .note{font-size:.86em;letter-spacing:.04em}
.night .note{color:var(--salt);opacity:.8}
.pull{font-style:italic;font-size:1.3em;line-height:1.45;text-wrap:balance}

/* the cover lines */
.band--cover{gap:0;padding-top:clamp(.25rem,1.5vw,1rem)}
.cover-title{font-family:var(--sans);font-weight:500;text-transform:uppercase;color:var(--amber-lit);font-size:clamp(.92rem,1.6vw,1.15rem);letter-spacing:.15em;line-height:1.6;margin-top:2.4rem;text-wrap:balance}
.band > .cover-title,.band > .cover-sub{max-width:36rem}
.cover-sub{font-family:var(--sans);font-variant-caps:small-caps;letter-spacing:.1em;font-size:.8rem;line-height:1.6;margin-top:.9rem;opacity:.85}
.cover-author{font-family:var(--sans);font-weight:500;text-transform:uppercase;letter-spacing:.22em;font-size:.8rem;color:var(--amber-lit);margin-top:2.2rem}
.cover-credit{display:grid;gap:.4rem;margin-top:2.2rem;font-size:.92rem}
.cover-credit i{opacity:.85}
.cover-credit span{font-family:var(--sans);font-weight:500;text-transform:uppercase;letter-spacing:.17em;font-size:.7rem;color:var(--amber-lit)}

/* gateway */
.band--gate{gap:1.5rem}
.band--gate .plate{margin-bottom:1.4rem}
.gate__glyph{width:6.2rem;border-radius:50%;margin-block:.4rem}

/* the book's journey: each gate under its own mark */
.contents{display:grid;gap:2.4rem;width:100%;max-width:32rem}
.contents li{display:grid;justify-items:center;gap:.35rem}
.contents img{width:3.2rem;margin-bottom:.45rem}
.contents .gate-name{font-size:.86rem}
.contents .sub,.chapter{font-size:.86em;letter-spacing:.07em;line-height:1.45;text-wrap:balance}

/* a name and what it holds */
.pairs{display:grid;gap:1.7rem}
.pairs > div{display:grid;gap:.3rem}
.pairs p:not(.element){text-wrap:balance}
.trio{display:grid;gap:2.6rem;width:100%}
.trio > div{display:grid;gap:.5rem;align-content:start;min-width:0}
.trio p{text-wrap:balance}
.tour{display:grid;grid-auto-flow:column;grid-template-rows:repeat(4,auto);gap:1.5rem clamp(2rem,8vw,4.5rem);justify-content:center}
.tour li{display:grid;gap:.15rem}
@media (max-width:360px){.tour{grid-auto-flow:row;grid-template-rows:none}}
.steps{display:grid;gap:1.9rem;counter-reset:step}
.steps li{display:grid;justify-items:center;gap:.3rem;counter-increment:step}
.steps li::before{content:counter(step);font-family:var(--display);font-size:1.25em;line-height:1.2}
.steps li > div{display:grid;gap:.3rem}
.facts{display:grid;gap:.15rem}
.facts dt{font-variant-caps:small-caps;letter-spacing:.06em;color:var(--graphite);font-size:1em}
.facts dd{margin-bottom:.85rem}
.facts dd:last-child{margin-bottom:0}

/* onward: the same two doors at the foot of every page */
.band--onward{margin-top:calc(var(--air) * -.4)}

/* controls */
.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem 1rem}
.btn{display:inline-block;font-family:var(--sans);font-weight:500;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;line-height:1.3;padding:1.05em 1.6em;border:1px solid currentColor;border-radius:0;background:transparent;color:inherit;cursor:pointer}
.btn--solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.night .btn--solid{background:var(--amber-lit);color:var(--night);border-color:var(--amber-lit)}
.btn:hover{background:var(--red-earth);border-color:var(--red-earth);color:var(--salt)}
.form{display:grid;justify-items:center;gap:1.15rem;width:100%;max-width:19rem}
.field{display:grid;justify-items:center;gap:.25rem;width:100%}
.field input,.field select,.field textarea{font:inherit;color:inherit;text-align:center;text-align-last:center;background:transparent;border:0;border-bottom:1px solid currentColor;border-radius:0;padding:.35rem 0;width:100%;min-width:0}
.field textarea{min-height:5.5em;resize:vertical}
.field select option{color:#000;background:#fff}
.form .btn{margin-top:.4rem}
.form__note{font-style:italic;font-size:.9em;min-height:1.4em}

/* closing */
.closing{gap:1.7rem;padding-bottom:clamp(3rem,6vw,4.5rem)}
.closing > .mark:first-child{margin-top:-.5rem}
.closing .plate{margin-bottom:1.6rem}
.closing > p{max-width:25rem}
.closing > .social{max-width:none}
.social{display:flex;flex-wrap:wrap;justify-content:center;gap:1.4rem 2.4rem;margin-top:2.4rem;font-family:var(--sans);font-weight:500;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase}
.social a{display:grid;justify-items:center;gap:.8rem;text-decoration:none;padding-bottom:.25em;border-bottom:1px solid transparent}
.social svg{width:1.15rem;height:1.15rem;fill:currentColor;opacity:.7}
.social a:hover{border-bottom-color:currentColor}
.social + .rights{margin-top:1.6rem}
.rights{font-family:var(--sans);font-size:.72rem;letter-spacing:.05em;line-height:1.8;opacity:.7;margin-top:3.5rem}

/* 6. the menu on a phone: two even rows of three */
@media (max-width:560px){
  .masthead nav{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;justify-items:center;gap:.75rem 1.15rem;font-size:.68rem;letter-spacing:.1em}
}
@media (max-width:350px){
  .masthead nav{gap:.7rem .7rem;font-size:.62rem}
}
@media (max-width:560px){
  .social{display:grid;grid-template-columns:repeat(2,auto);justify-content:center;justify-items:center;gap:1.6rem 2.6rem}
}
@media (prefers-reduced-motion:no-preference){
  .btn{transition:background-color .15s,color .15s,border-color .15s}
}