/* ==========================================================================
   Takahashi Properties — base, typography, app shell

   One typeface, Nunito Sans, at four weights. It is a humanist sans with
   rounded terminals and wide counters, so nothing on screen comes to a
   point and nothing reads as thin. Labels are sentence case at a readable
   size rather than tiny tracked-out capitals: the portal has to be obvious
   to someone recording a sale between viewings, not admired.

   The mono survives in exactly two places — bank memos and the sheet
   formula citations on the rates screen — where character alignment is
   the whole point.
   ========================================================================== */

/* Served from this site (tools/fetch-fonts.ps1), so drawing the page asks Google for nothing. */
@import url('fonts.css');

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 0.95rem;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Atmosphere — one wash of light from above, and nothing else.
   This used to be four radial glows placed around the edges of the page.
   Coloured blobs bleeding in from the corners of a near-neutral dark field
   is the most generated-looking thing a page can do, and it was also what
   made the ground read as grey: the colour was in the lighting rather than
   in the surface. The ground carries its own colour now, so all this has to
   do is stop the top of a long page from being perfectly even. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  background: linear-gradient(177deg, var(--sky) 0%, transparent 58%);
}

/* The sheet the whole portal is printed on.

   Fibre, cloud and tooth stacked over the ground, composited with
   soft-light so each one lifts and lowers the surface rather than dusting
   white speckles onto it. Four flat-coloured grounds were rejected for
   looking generated before the texture was the thing that changed: what
   reads as machine-made is an even fill, not a particular hue. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  opacity: var(--washi);
  mix-blend-mode: soft-light;
  background-image: var(--tex-fibre), var(--tex-cross), var(--tex-cloud), var(--tex-tooth);
  background-size: 600px 600px, 560px 560px, 900px 900px, 200px 200px;
}

/* The ink wash. One instance stretched to cover the viewport rather than a
   tiled one, so there is no repeat and no seam — the drift is unique to
   whatever size the window happens to be.

   No blend mode: the texture is white whose alpha carries the noise, so it
   lightens the ground on its own. Blend modes that respond to the backdrop
   (soft-light, overlay) do almost nothing over a near-black page, which is
   what made the first version invisible. */
.ink {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  contain: strict;
  opacity: var(--ink);
  background-image: var(--tex-ink);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* The shippō lattice, printed into the sheet. Sits above the grain and
   below the blossom.

   Drawn kozo strands used to lie over this as well. They were removed: two
   textures competing at the same scale cancelled each other out, and loose
   curved hairs over a strict geometric lattice read as stray hair on the
   screen rather than as fibre in the paper.

   Two masks keep the lattice from looking machine-printed, and they work at
   opposite scales.

   The bloom is very low frequency, so the pattern strengthens and fades
   across distances far larger than the 87.68px tile — uneven the way a
   block print on a hand-formed sheet is, without ever revealing the repeat.

   The wear works at the scale of the arcs themselves, breaking them into
   skips where the print has rubbed off. It is tiled to nothing: like the
   ink, it is drawn once at cover size, and it shares the ink's turbulence
   exactly, so the sheet wears where the sheet is light.

   They are composited rather than stacked, so a point survives only where
   every mask keeps it.

   The lattice is printed in pink foil, so the element holds the FOIL as its
   background and the pattern itself joins the mask stack as a third layer.
   A stroke colour could only ever give one flat tint per line, which is the
   opposite of a metal finish; masking a gradient means each arc runs from
   highlight to shadow along its own curve. */
.lattice {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  contain: strict;
  opacity: var(--lattice-strength);
  background-image: var(--tex-foil);
  -webkit-mask-image: var(--tex-shippo), var(--tex-bloom), var(--tex-wear);
  mask-image: var(--tex-shippo), var(--tex-bloom), var(--tex-wear);
  -webkit-mask-size: 87.68px 87.68px, 1400px 1400px, cover;
  mask-size: 87.68px 87.68px, 1400px 1400px, cover;
  -webkit-mask-position: 0 0, 0 0, center;
  mask-position: 0 0, 0 0, center;
  -webkit-mask-repeat: repeat, repeat, no-repeat;
  mask-repeat: repeat, repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* --------------------------------------------------------------------------
   Falling blossom

   Every value here — the number of petals, their size, speed, angle, shape
   and colour — is measured off the animation inside the logo GIF, so the
   mark reads as part of the same weather rather than a picture sitting on
   top of it. assets/js/petals.js writes the spans and carries the figures.

   Nothing animates a layout property: the fall, the sideways drift and the
   sway all live in `translate`, and the tumble in `rotate`, which are
   separate composited properties and so do not fight each other the way two
   `transform` animations would.
   -------------------------------------------------------------------------- */
.petals {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.petals span {
  position: absolute;
  top: -12vh;
  /* Each petal carries its own pair of pinks. The blossom in the logo is
     not one colour but a range — sampled across the loop it runs from a
     pale cotton pink through to a deep rose-magenta — and the pair also
     shades each petal so it has some form at 8px rather than reading as a
     flat chip. Deeper petals are given more opacity, or they disappear
     into the near-black ground. */
  background: linear-gradient(var(--tilt, 150deg), var(--c1), var(--c2));
  opacity: 0;
  -webkit-mask: var(--shape) center / 100% 100% no-repeat;
  mask: var(--shape) center / 100% 100% no-repeat;
}

::selection { background: var(--accent-wash); color: var(--accent-soft); }

* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border: 4px solid transparent;
  background-clip: content-box;
  border-radius: 8px;
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--text-ghost); background-clip: content-box; }

/* --------------------------------------------------------------------------
   Type — plain, generous, sentence case
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.25;
  color: var(--text);
}

h1 { font-size: 1.6rem; }
h2 { font-size: 1.16rem; }
h3 { font-size: 1.02rem; }
h4 { font-size: 0.95rem; }

p { color: var(--text-dim); line-height: 1.62; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

em { font-style: italic; }

/* The one capitalised label style left, used for section eyebrows only.
   Tracking stays gentle — wide tracking is what made the old labels feel
   sharp and hard to scan. */
.eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Wide-tracked caps survive only on the wordmark, where the logo sets it */
.wordmark {
  font-family: var(--font-ui);
  font-weight: 300;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

/* Every figure lines up in a column */
.num {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' on, 'lnum' on;
}

/* A figure that is the point of its row */
.figure {
  font-weight: 700;
  font-size: 1rem;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text);
}

/* Bank memos and sheet formulas only */
.mono {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: -0.01em;
}

.kanji { font-family: var(--font-kanji); font-weight: 500; letter-spacing: 0.12em; }

.dim    { color: var(--text-dim); }
.faint  { color: var(--text-faint); }
.ghost  { color: var(--text-ghost); }
.pos    { color: var(--pos); }
.warn   { color: var(--warn); }
.neg    { color: var(--neg); }
.accent { color: var(--accent); }
.taupe  { color: var(--taupe); }
.right  { text-align: right; }
.medium { font-weight: 600; }
.semi   { font-weight: 700; }

/* The brand glyph — the logo's rotated square. The only pointed shape in
   the app, and it appears only as the mark itself. */
.diamond {
  display: inline-block;
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  background: var(--accent);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Shell — a slim top line over one stage. There is no side rail: an agent
   moves through the hub and its pages, a manager through the top tabs.
   -------------------------------------------------------------------------- */
.shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.shell[data-authed="false"] .topline { display: none; }

.stage {
  flex: 1;
  min-width: 0;
  width: 100%;
}

/* Every screen sits on the same measure. Flow pages are narrower still. */
.page {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 46px 44px 120px;
}
.page.narrow { max-width: 900px; }
.page.wide   { max-width: 1320px; }

@media (max-width: 860px) {
  .page { padding: 32px 22px 110px; }
}

@media (max-width: 620px) {
  html { font-size: 15.5px; }
  .page { padding: 26px 16px 96px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}