/* Solera — the site.
 *
 * The app's design system, moved onto a light page.  Light always: the app has
 * a dark mode because a phone gets looked at in a restaurant at night, and a
 * page about the app does not.
 *
 * Three things are deliberately different from the app.  The ground is a warm
 * near-white rather than #FFF2E6, so the screenshots read as objects lying on
 * a page instead of as the page.  The type is a size larger throughout,
 * because Garamond has a small x-height and a screen is further from the eye
 * than a phone is.  And the section markers hang in the left margin, which a
 * phone has no room for and a book has always done.
 *
 * Everything else is the app's: mulled-wine ink, one pigment, EB Garamond for
 * anything the eye should land on, Karla for the quiet apparatus, hairlines
 * thinner than you think, and no filled buttons anywhere.
 */

/* ---- the palette ------------------------------------------------------- */

:root {
  color-scheme: light;

  --paper:      #FDFBF8;
  --raised:     #FFF6EB;
  --ink:        #280D08;   /* 17.7:1 on paper */
  --ink-soft:   #57483E;   /*  8.5:1 */
  --ink-faint:  #726D5D;   /*  5.0:1 — small text lives here, so it has to
                              clear 4.5:1.  The old value did not. */
  --rule:       #E7E1D5;
  --wine:       #5E2229;

  --serif: 'EB Garamond', 'Hoefler Text', Garamond, 'Times New Roman', serif;
  --sans:  'Karla', 'Helvetica Neue', Arial, sans-serif;

  /* The page margin, wider on the left than the right by a hair — the way a
     book's inner margin is.  Enough to stop the page reading as a box. */
  --edge-l: clamp(1.6rem, 5.2vw, 5rem);
  --edge-r: clamp(1.3rem, 4.4vw, 4.2rem);

  /* Not one multiple of anything.  A drawn page has a few sizes that recur. */
  --step:   1.4rem;
  --wide:   2.2rem;
  --vast:   clamp(4.5rem, 10vw, 8.5rem);
}

/* ---- the two typefaces ------------------------------------------------- */

@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/EBGaramond.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/EBGaramond-Italic.woff2') format('woff2');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Karla';
  src: url('fonts/Karla.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ---- the ground -------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.1875rem;      /* 19px.  Garamond at 17 reads like 15. */
  line-height: 1.62;
  font-variant-numeric: oldstyle-nums proportional-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Paper grain.  The app generates it at two scales; here one is enough,
   because the ground is nearly white and any more would read as dirt. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  opacity: 0.04;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- the measure ------------------------------------------------------- */

.page {
  max-width: 70rem;
  margin: 0 auto;
  padding-left: var(--edge-l);
  padding-right: var(--edge-r);
}

/* A document spread.
 *
 * A page of nothing but prose set to a comfortable measure ends up as one
 * narrow strip down the middle of a wide screen, which reads as a phone
 * layout that has been stretched rather than as a page.  So the documents get
 * the same left margin the front page gives its section markers, and something
 * is put in it: the list of what is on the page, sitting still while the text
 * moves past it.
 *
 * The reading column comes first in the source — the apparatus is apparatus,
 * and a screen reader should reach the writing before the index of it. */
.doc-spread { display: block; }

.sidenote { display: none; }

@media (min-width: 60rem) {
  .doc-spread {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    column-gap: 3.5rem;
    align-items: start;
  }
  .doc-spread > .doc      { grid-column: 2; grid-row: 1; }
  .doc-spread > .sidenote {
    grid-column: 1;
    grid-row: 1;
    display: block;
    position: sticky;
    top: 2.6rem;
    margin-top: clamp(2.6rem, 5.5vw, 4rem);
  }
}

.contents {
  display: flex;
  flex-direction: column;
  gap: 0.62rem;
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.32;
  letter-spacing: 0.01em;
}
.contents a {
  color: var(--ink-faint);
  background-image: none;
  padding-bottom: 0;
  transition: color 110ms ease-out;
}
.contents a:hover, .contents a:focus-visible {
  color: var(--ink);
  background-image: linear-gradient(var(--wine), var(--wine));
  background-size: 100% 1px;
  background-position: 0 100%;
}

/* The editorial spread: a marker hanging in the left margin, content beside
   it.  Collapses to one column early, because a 9rem gutter on a phone is
   just a wasted third of the screen. */
.spread { display: block; }

@media (min-width: 60rem) {
  .spread {
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr);
    column-gap: 3rem;
    align-items: start;
  }
  .spread > .marker { margin-top: 0.95rem; text-align: right; }

  /* The documents run a wider margin than the front page, and everything in
     it hangs off the left the way the wordmark above it does. */
  .spread.wide { grid-template-columns: 15rem minmax(0, 1fr); column-gap: 3.5rem; }
  .spread.wide > .marker { text-align: left; }
}

section { margin-top: var(--vast); }

/* ---- type -------------------------------------------------------------- */

h1, h2, h3 { font-weight: 400; margin: 0; }

/* The app's name, set as a title page rather than a logo in a corner. */
.name {
  font-size: clamp(3.3rem, 8.6vw, 5.6rem);
  line-height: 0.98;
  letter-spacing: -0.016em;
}

.deck {
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  line-height: 1.16;
  letter-spacing: -0.006em;
  margin: 0.7rem 0 var(--step);
  max-width: 20ch;
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.45rem);
  line-height: 1.14;
  letter-spacing: -0.006em;
  text-wrap: balance;
  margin-bottom: var(--step);
}

h3 {
  font-size: 1.4rem;
  line-height: 1.28;
  letter-spacing: 0.005em;
}

p { margin: 0 0 1.05em; max-width: 34rem; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.22rem, 1.9vw, 1.4rem);
  line-height: 1.56;
  color: var(--ink-soft);
  max-width: 32rem;
}

/* Section markers.  Letter-spaced, upper case, never shouting — but big
   enough to actually read. */
.marker {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 var(--step);
  line-height: 1.3;
}

/* What the app says, quoted.
 *
 * These were nearly the size of the heading above them, and two of them
 * stacked outweighed it completely — the one place on the site where the
 * ladder every other section keeps (heading large, everything under it
 * smaller) was broken.  Now they sit a clear step below the h2 and a clear
 * step above the prose.
 *
 * What they lost in size they get back the way the app itself marks a verdict:
 * a hairline above, and room around.  In `wine_preview` the sentence "you've
 * had this one" arrives under exactly such a rule, which is what tells you it
 * is the app speaking rather than more description. */
.said {
  font-size: clamp(1.28rem, 2.2vw, 1.62rem);
  line-height: 1.42;
  letter-spacing: -0.002em;
  max-width: 30ch;
  margin: 0 0 var(--step);
  padding-top: 1.15rem;
  border-top: 1px solid var(--rule);
  text-wrap: pretty;
}
.said + .said { margin-top: var(--step); }
.said:last-of-type { margin-bottom: var(--wide); }

/* ---- actions are not buttons ------------------------------------------- */

a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--wine), var(--wine));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  padding-bottom: 0.12em;
  transition: background-size 110ms ease-out;
}
a:hover, a:focus-visible { background-size: 100% 2px; }
a:focus-visible { outline: 1.5px solid var(--wine); outline-offset: 4px; border-radius: 1px; }

/* ---- the masthead ------------------------------------------------------ */

.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--step);
  padding-top: clamp(1.6rem, 3.4vw, 2.6rem);
  flex-wrap: wrap;
}

/* On the front page the name is the page, so the masthead carries only the
   two links and nothing is said twice. */
.masthead.bare { justify-content: flex-end; }

.wordmark {
  font-family: var(--serif);
  font-size: 1.45rem;
  letter-spacing: 0.01em;
  background: none;
  padding: 0;
}

.masthead nav {
  display: flex;
  gap: var(--wide);
  font-family: var(--sans);
  font-size: 0.9375rem;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}
.masthead nav a { padding-bottom: 0.35em; }

/* ---- the hero ---------------------------------------------------------- */

.hero {
  margin-top: clamp(2.6rem, 7vw, 5.5rem);
  display: grid;
  gap: clamp(3rem, 6vw, 4rem);
}
@media (min-width: 56rem) {
  .hero {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
  }
}

.hero .status {
  margin-top: var(--wide);
  font-family: var(--sans);
  font-size: 0.875rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---- screenshots ------------------------------------------------------- */

.shot { margin: 0; }
.shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  /* Lifted a little harder than the app's own shadow, because the screenshot
     has been lightened to sit on a white page and needs the edge back. */
  box-shadow:
    0 0 0 1px rgba(40, 13, 8, 0.09),
    0 2px 3px rgba(40, 13, 8, 0.05),
    0 28px 52px -30px rgba(40, 13, 8, 0.45);
}
.shot figcaption {
  margin-top: 0.9rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
}

/* Two screens set beside prose.  The image is allowed to be smaller than its
   column and to sit low — cards on a table, not cells in a table. */
.beside {
  display: grid;
  gap: clamp(2.4rem, 5vw, 3.5rem);
  align-items: start;
}
@media (min-width: 56rem) {
  .beside { grid-template-columns: minmax(0, 1fr) minmax(0, 0.6fr); }
  .beside .shot { margin-top: 0.7rem; }

  /* The other way round, so the page does not settle into a template. */
  .beside.flip { grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr); }
  .beside.flip .shot { order: -1; margin-top: 0.9rem; }
}

/* ---- the loop ---------------------------------------------------------- */

.loop {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 38rem;
  counter-reset: step;
}

/* One step in the loop carries a picture of the screen it is about — a plate
   beside its paragraph, the size a plate is in a book.  It does not have to be
   readable at this size; it has to show the shape of the screen, which is a
   list of bottles with the word "open" against each. */
.loop.plated { max-width: 51rem; }

@media (min-width: 60rem) {
  .loop .with-shot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 15rem;
    column-gap: 2.6rem;
    align-items: start;
  }
  .loop .with-shot .shot { margin-top: 0.35rem; }
}

@media (max-width: 60rem) {
  .loop .with-shot .shot { width: 66%; margin: 1.4rem 0 0 auto; }
}

.loop li {
  counter-increment: step;
  position: relative;
  padding: 1.5rem 0 1.7rem 2.9rem;
  border-top: 1px solid var(--rule);
}
.loop li:first-child { border-top: none; padding-top: 0; }

/* Old-style figures in the margin: the loop is a sequence, and saying so in
   one character is cheaper than saying it in a sentence. */
.loop li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1.55rem;
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1;
  color: var(--ink-faint);
}
.loop li:first-child::before { top: 0.06rem; }

@media (max-width: 30rem) {
  .loop li { padding-left: 2.3rem; }
}

.loop h3 { margin-bottom: 0.45rem; }
.loop p { margin: 0; color: var(--ink-soft); }

.glasses {
  display: block;
  width: min(19rem, 80%);
  height: auto;
  margin: 1.3rem 0 0.2rem;
  color: var(--ink-faint);
}

/* ---- the ring ---------------------------------------------------------- */
/*
 * One detail nobody would generate: the mark a glass leaves when it is set
 * down twice on the same page.  Off centre, cropped by the right edge, and
 * faint enough that half the people who see the page never notice it.
 */

.ringed { position: relative; }
.ringed > * { position: relative; z-index: 1; }

.ringed::before,
.ringed::after {
  content: '';
  position: absolute;
  z-index: 0;
  border: 1.5px solid var(--wine);
  border-radius: 50%;
  opacity: 0.16;
  pointer-events: none;
}
.ringed::before {
  width: 26rem; height: 25.2rem;
  right: -12rem; top: -5rem;
  transform: rotate(-6deg);
}
.ringed::after {
  width: 19rem; height: 18.4rem;
  right: -4.5rem; top: 8.5rem;
  opacity: 0.11;
  transform: rotate(4deg);
}
@media (max-width: 56rem) {
  .ringed::before { width: 16rem; height: 15.6rem; right: -7rem; top: -2.5rem; }
  .ringed::after  { display: none; }
}

/* ---- plain lists ------------------------------------------------------- */

.nots {
  list-style: none;
  margin: 0 0 1.15em;
  padding: 0;
  max-width: 34rem;
  font-family: var(--sans);
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  line-height: 1.95;
  color: var(--ink-soft);
  column-width: 12rem;
  column-gap: 2.4rem;
}
.nots li::before {
  content: '—';
  color: var(--ink-faint);
  margin-right: 0.6em;
}

/* ---- a document: privacy, support -------------------------------------- */

.doc {
  max-width: 38rem;
  margin-top: clamp(2.6rem, 5.5vw, 4rem);
  line-height: 1.66;
}
.doc h1 { font-size: clamp(2.3rem, 5vw, 3.3rem); line-height: 1.04; }
.doc h2 { scroll-margin-top: 2.6rem; }
.doc h2 {
  font-size: clamp(1.35rem, 2.1vw, 1.6rem);
  margin-top: clamp(2.8rem, 5vw, 3.6rem);
  margin-bottom: 0.7rem;
}
.doc h2:first-of-type { margin-top: clamp(2.4rem, 4vw, 3rem); }
.doc p, .doc li { color: var(--ink); }
.doc strong { font-weight: 600; }
.doc ul { margin: 0 0 1.15em; padding-left: 1.2rem; max-width: 34rem; }
.doc ol { margin: 0 0 1.15em; padding-left: 1.45rem; max-width: 34rem; }
.doc li { margin-bottom: 0.4em; }
.doc li::marker { color: var(--ink-faint); }

/* A menu path, the way the phone spells it.  Sans, because these are labels
   quoted off a screen rather than words in a sentence, and the serif makes
   them look like prose you could paraphrase.  You cannot: they have to be
   read letter for letter or the step does not work. */
.path {
  font-family: var(--sans);
  font-size: 0.9em;
  letter-spacing: 0.015em;
  color: var(--ink-soft);
}
/* A path is not nowrap.  On a phone `Settings -> General -> iPhone Storage ->
   Solera` is wider than the screen, and with the page clipping its overflow
   the end of the instruction simply disappears.  So the words inside one
   label are joined with non-breaking spaces and the arrows carry the only
   ordinary spaces: the line can break after an arrow and nowhere else, which
   is where a path would break in print anyway. */

.dateline {
  font-family: var(--sans);
  font-size: 0.875rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0.9rem 0 var(--wide);
}

/* The short version, set in a lifted sheet.  The one raised surface here. */
.short {
  background: var(--raised);
  border-radius: 3px;
  padding: clamp(1.5rem, 3vw, 2.1rem) clamp(1.5rem, 3vw, 2.2rem);
  margin: 0 0 var(--wide);
  box-shadow: 0 0 0 1px rgba(40, 13, 8, 0.07);
}
.short p { max-width: none; }
.short p:last-child { margin-bottom: 0; }

/* Questions in support, each opening under a hairline. */
.qa { border-top: 1px solid var(--rule); padding: 1.7rem 0 0.7rem; }
.qa h2 { margin-top: 0; font-size: 1.35rem; }
.qa p { margin-bottom: 0.9em; }

/* ---- the end of the page ----------------------------------------------- */

footer {
  margin-top: var(--vast);
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
}

footer .rule {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 0 0 var(--wide);
  max-width: 14rem;
}

.cork {
  display: block;
  width: 2.3rem;
  height: auto;
  margin: 0 0 var(--wide);
  color: var(--ink-faint);
  opacity: 0.7;
}

.meaning {
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 32rem;
  margin-bottom: var(--wide);
}

/* Who is actually behind this, in full, at the foot of every page.
 *
 * Not on a page of its own.  Since February 2025 both stores require verified
 * trader details of anyone selling into the EU, a privacy policy with no
 * named controller is not a policy, and a reviewer opening the site does not
 * land where we would like them to land.  So it goes under every footer and
 * the question never arises.
 *
 * Set small and faint deliberately.  It is required, not said. */
.imprint {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.8125rem;
  line-height: 1.75;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  max-width: 24rem;
  margin: 0 0 var(--wide);
}
.imprint strong { display: block; color: var(--ink-soft); font-weight: 500; }
.imprint a { padding-bottom: 0.08em; }

/* The same block inside a document, where it closes the contact section
   rather than the page.  It gets the rule the footer gets from its own. */
.doc .imprint {
  margin-top: var(--wide);
  padding-top: var(--step);
  border-top: 1px solid var(--rule);
}

.colophon {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem var(--wide);
  font-family: var(--sans);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  max-width: none;
}

/* ---- accessibility ----------------------------------------------------- */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--raised);
  color: var(--ink);
  padding: 0.7rem 1rem;
  font-family: var(--sans);
  font-size: 0.9375rem;
  z-index: 20;
}
.skip:focus { left: 0.6rem; top: 0.6rem; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}