/* Focus Fruit — the site.

   The idea this page is built on: it is the town at night, and you are walking down it.

   That is not decoration, it is what the art made possible. Every building and every character in this product is
   rendered on a transparent background (`Rooms.xcassets/exterior-*`, `Identity.xcassets/fruit-*-body`), so they can
   stand ON the page instead of sitting INSIDE a rectangle. A page of rounded picture cards is a contact sheet, and
   that is what the two rejected versions of this site were. Objects standing in pools of lamplight are a place.

   So: nothing here is a card. The one framed rectangle left is the pair of table photographs, which is genuinely a
   view through something. It is sunk into the page, not raised off it.

   One typeface, the rounded black system face, per brand rule 4 (docs/current/brand.md). */

:root {
    color-scheme: dark;

    /* NOT the brand night (#1C1A3D): that night is violet — r28 g26 b61 — and nothing else in this world is. The
       ink is a green-black (#061311), the rooms are sage and wood, and the darks sampled out of the illustrations
       sit around #353833 and #303F3D.
       The ground then goes as dark as that family allows. The whole page is objects standing in pools of lamplight,
       and a pool only exists to the extent the floor around it is dark: at #12211E the light barely registered.
       The lighter green-black stays, but as the colour of a block sitting ON the ground, never the ground.
       Being tried on the site alone, before anything in the app is touched. */
    --night: #0B1614;
    --night-block: #12211E;

    --paper: #FCFAF0;
    --paper-dim: #9DB3AB;
    --rule: #2B453E;

    --coral: #FF795E;
    --lime: #D8EF83;

    /* Every one of these renders is lit by the same warm bulb. It is the light in the page, never a text colour. */
    --lamp: 255, 181, 107;

    --round: ui-rounded, "SF Pro Rounded", Nunito, system-ui, -apple-system, "Segoe UI", sans-serif;

    --gutter: clamp(20px, 5vw, 56px);
    --column: 1060px;
    --reading: 60ch;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--night);
    color: var(--paper);
    font-family: var(--round);
    font-size: 19px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* height:auto is not optional: without it the width/height attributes stay as a fixed height, and every picture
   whose width is constrained gets stretched. */
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 2px; }
::selection { background: var(--coral); color: #2A0D06; }

:focus-visible {
    outline: 3px solid var(--coral);
    outline-offset: 4px;
    border-radius: 4px;
}

.wrap {
    width: 100%;
    max-width: var(--column);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* ---- Type --------------------------------------------------------------- */

h1, h2 {
    font-weight: 900;
    letter-spacing: -0.025em;
    text-wrap: balance;
    margin: 0;
}

h1 { font-size: clamp(40px, 6vw, 68px); line-height: 0.98; }
h2 { font-size: clamp(29px, 3.6vw, 40px); line-height: 1.05; }

p { margin: 0 0 1em; max-width: var(--reading); }
p:last-child { margin-bottom: 0; }

.lead { font-size: clamp(19px, 2.1vw, 22px); line-height: 1.5; color: var(--paper-dim); }

section { padding-block: clamp(56px, 7vw, 92px); }
section > .wrap > h2 + .lead { margin-top: 14px; }

/* ---- The mark ----------------------------------------------------------- */

.masthead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-block: 24px 4px;
}

.mark {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-weight: 900;
    font-size: 19px;
    letter-spacing: -0.02em;
}

.mark img { width: 42px; height: 42px; }

.masthead nav { display: flex; gap: 22px; font-weight: 700; font-size: 17px; }
.masthead nav a { color: var(--paper-dim); text-decoration: none; }
.masthead nav a:hover { color: var(--paper); }

/* ---- Standing on the ground --------------------------------------------- */
/* The one move the whole page is made of. An object with a transparent background, and under it a pool of warm
   light on the floor. The pool is a sibling element rather than a shadow so it can be wider than the object and
   sit at its feet, which is where a lamp would put it. */

.stand { position: relative; display: block; }

.stand::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 6%;
    translate: -50% 0;
    width: 82%;
    aspect-ratio: 3 / 1;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(var(--lamp), 0.26), rgba(var(--lamp), 0) 70%);
    pointer-events: none;
}

.stand img { position: relative; }

/* ---- The hero: somebody arriving at the café ---------------------------- */

.hero { padding-block: clamp(24px, 4vw, 44px) clamp(40px, 5vw, 64px); }

.hero .wrap {
    display: grid;
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
}

@media (min-width: 900px) {
    /* The headline needs the wider half: at 1fr it broke into five short lines and read as a column of fragments. */
    .hero .wrap { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
}

.hero h1 { margin-bottom: 20px; }
.hero .lead { margin-bottom: 30px; max-width: 32ch; }

/* Two objects at two depths on one floor: the place, and someone walking up to it. The peach is deliberately
   small — it is the scale that makes the café a building rather than an icon. */
.arrival { position: relative; margin: 0; }
.arrival .place-img { width: 100%; }

.arrival .visitor {
    position: absolute;
    left: 6%;
    bottom: 2%;
    width: 27%;
}

/* ---- The only button ---------------------------------------------------- */

.seat {
    display: inline-block;
    background: var(--coral);
    color: #2A0D06;
    font-weight: 900;
    font-size: 19px;
    letter-spacing: -0.01em;
    text-decoration: none;
    padding: 17px 32px;
    border-radius: 15px;
    border-bottom: 4px solid rgba(42, 13, 6, 0.3);
    transition: translate 120ms ease, border-bottom-width 120ms ease;
}

.seat:hover { translate: 0 1px; border-bottom-width: 3px; }
.seat:active { translate: 0 3px; border-bottom-width: 1px; }

/* ---- The village -------------------------------------------------------- */
/* Two rows at two depths, not a grid of equal tiles: four places standing further back and smaller, three big
   ones in front. The back row is dimmer and its pool is fainter, which is all "further away" needs to mean. */

.village { margin-top: clamp(30px, 5vw, 54px); display: grid; gap: 4px 10px; }

/* These were links to the support page. There is nowhere for them to lead until the app ships, and a hover lift on
   something you cannot open is a promise the page does not keep — so they are pictures, and they hold still. */
.village > * {
    text-align: center;   /* the building is centred in its cell; a left-aligned name under it reads as a mistake */
}

.village b {
    display: block;
    margin-top: 2px;
    font-weight: 900;
    font-size: 19px;
    letter-spacing: -0.015em;
}

.village span {
    display: block;
    color: var(--paper-dim);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

.village .far { opacity: 0.86; }
.village .far b { font-size: 17px; }
.village .far .stand::before { background: radial-gradient(ellipse at center, rgba(var(--lamp), 0.17), rgba(var(--lamp), 0) 70%); }

@media (max-width: 719px) {
    .village { grid-template-columns: 1fr 1fr; align-items: end; }
}

/* The back row stands on a higher floor line than the front row, and both rows stagger a little so no two
   buildings share a baseline — a street does not line up. */
@media (min-width: 720px) {
    .village { grid-template-columns: repeat(12, 1fr); align-items: end; column-gap: clamp(4px, 1.4vw, 18px); }

    .far:nth-of-type(1) { grid-column: 1 / 4;   translate: 0 6px; }
    .far:nth-of-type(2) { grid-column: 4 / 7;   translate: 0 -10px; }
    .far:nth-of-type(3) { grid-column: 7 / 10;  translate: 0 2px; }
    .far:nth-of-type(4) { grid-column: 10 / 13; translate: 0 -6px; }

    .near { grid-row: 2; }
    .near:nth-of-type(5) { grid-column: 1 / 5;  translate: 0 8px; }
    .near:nth-of-type(6) { grid-column: 5 / 9;  translate: 0 -4px; }
    .near:nth-of-type(7) { grid-column: 9 / 13; translate: 0 10px; }
}

/* ---- The two views ------------------------------------------------------ */
/* Sunk into the page rather than raised off it: a lit opening in a dark wall, which is what they both are. */

.view { margin: clamp(30px, 5vw, 54px) 0 0; }

.view img {
    width: 100%;
    border-radius: 18px;
    box-shadow: inset 0 0 0 1px rgba(var(--lamp), 0.16), 0 0 70px -20px rgba(var(--lamp), 0.4);
}


figcaption {
    margin-top: 12px;
    color: var(--paper-dim);
    font-size: 16px;
    font-weight: 700;
}

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 2.4vw, 24px); }
.pair figure { margin: 0; }

/* ---- The cast ----------------------------------------------------------- */
/* Seven characters on one floor line. They are the same height on purpose: they are the same person's choices. */

.cast {
    margin-top: clamp(26px, 4vw, 46px);
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: clamp(2px, 1vw, 14px);
    align-items: end;
}

@media (max-width: 559px) { .cast { grid-template-columns: repeat(4, 1fr); } }

.cast figure { margin: 0; }

.cast figcaption {
    margin-top: 0;
    text-align: center;
    font-size: 14px;
    letter-spacing: 0.01em;
}

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

.closing-call { padding-top: 0; }


/* ---- Documents: privacy, support ---------------------------------------- */

.doc { padding-block: 36px clamp(56px, 8vw, 96px); max-width: var(--reading); }
.doc h1 { font-size: clamp(34px, 5.4vw, 56px); margin-bottom: 14px; }
.doc h2 { margin-top: 46px; margin-bottom: 10px; font-size: clamp(25px, 3vw, 31px); }

.doc h3 {
    margin: 30px 0 6px;
    font-size: 21px;
    font-weight: 900;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

.doc p, .doc li { color: var(--paper-dim); }
.doc strong { color: var(--paper); }
.doc ul { padding-left: 1.1em; max-width: var(--reading); }
.doc li { margin-bottom: 8px; }

.updated { font-size: 17px; font-weight: 700; color: var(--paper-dim); }

.summary {
    background: var(--night-block);
    border-radius: 16px;
    padding: 22px 24px;
    margin-block: 26px 34px;
    max-width: none;
}

.summary p { color: var(--paper); margin: 0; max-width: none; }

.table-scroll { overflow-x: auto; margin-block: 20px 30px; }

table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 17px; }

th, td {
    text-align: left;
    vertical-align: top;
    padding: 12px 16px 12px 0;
    border-bottom: 2px solid var(--rule);
}

th { font-weight: 900; color: var(--paper); }
td { color: var(--paper-dim); }
td:first-child { color: var(--paper); font-weight: 700; }

/* ---- The end ------------------------------------------------------------ */

footer {
    border-top: 2px solid var(--rule);
    padding-block: 26px 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px 26px;
    align-items: center;
    justify-content: space-between;
    font-size: 17px;
    font-weight: 700;
}

footer nav { display: flex; flex-wrap: wrap; gap: 22px; }
footer a { color: var(--paper-dim); text-decoration: none; }
footer a:hover { color: var(--paper); }
footer small { color: var(--paper-dim); }

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