/* 4 Arrows Trading Company — single landing page.
   Tokens are the brand tokens from CLAUDE.md. Do not introduce colours
   that aren't here. Structure follows 4arrows-landing.html (earlier session):
   one 40rem column, mono section rules, status table. */

:root{
  --ink:#12162A; --indigo:#1C2745; --gold:#C9A24B; --paper:#E3E1D8;
  --dim:#A8A69E; --live:#5B9E7A;
  --disp:"Fraunces",Georgia,serif;
  --body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --jp:"Noto Sans JP",var(--body);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--body);
  font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--gold)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;background:var(--gold);color:var(--ink);padding:.6rem 1rem;z-index:10}

.page{max-width:40rem;margin:0 auto;padding:clamp(2.5rem,8vw,5rem) clamp(1.5rem,6vw,2rem) 4rem}

/* Crest large and centred above the headline, as in the first design. */
header.top{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:1rem;margin-bottom:clamp(3rem,9vw,4.5rem)}
header.top img{width:clamp(84px,18vw,112px);height:auto;flex:none}
header.top .nm{font-family:var(--mono);font-size:.6875rem;letter-spacing:.18em;
  text-transform:uppercase;line-height:1.5;color:var(--paper)}
header.top .nm span{display:block;color:var(--dim)}

/* Language switch, centred under the wordmark. */
.lang{display:flex;justify-content:center;gap:.6rem;align-items:baseline;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;margin-top:.25rem}
.lang a{color:var(--dim);text-decoration:none;padding:.2rem .1rem}
.lang a:hover{color:var(--gold)}
.lang a[aria-current="page"]{color:var(--paper)}
.lang span{color:rgb(227 225 216 / .28)}
.lang [lang="ja"]{font-family:var(--jp);letter-spacing:.06em;text-transform:none}

h1{font-family:var(--disp);font-variation-settings:"SOFT" 50,"WONK" 1,"opsz" 72;
  font-weight:600;font-size:clamp(2rem,8vw,3.1rem);line-height:1.04;
  letter-spacing:-.022em;margin:0 0 1.5rem}
h1 em{font-style:italic;color:var(--gold);font-weight:500}
.lede{font-size:clamp(1.0625rem,1rem + .4vw,1.2rem);color:rgb(227 225 216 / .86);margin:0}

section{margin-top:clamp(3rem,9vw,4rem)}
h2{font-family:var(--mono);font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);font-weight:500;margin:0 0 1.125rem;
  padding-bottom:.75rem;border-bottom:1px solid rgb(227 225 216 / .16);
  display:flex;align-items:baseline;gap:.7rem}
h2 .jp{font-family:var(--jp);font-size:.75rem;letter-spacing:.06em;
  text-transform:none;color:var(--dim)}
p{margin:0 0 1.1rem}
p:last-child{margin-bottom:0}
strong{font-weight:500;color:var(--gold)}

/* two lanes — westbound and eastbound */
.lane{display:grid;grid-template-columns:1fr;gap:.2rem;padding:.9rem 0;
  border-bottom:1px solid rgb(227 225 216 / .1)}
.lane:first-child{padding-top:0}
.lane b{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);font-weight:500}
.lane[data-e] b{color:var(--dim)}
.lane span{font-size:1rem}
@media (min-width:34rem){
  .lane{grid-template-columns:8.5rem 1fr;gap:1rem;align-items:baseline}
}

/* status table — shows progress instead of asserting it */
.row{display:grid;grid-template-columns:1fr;gap:.3rem;padding:.9rem 0;
  border-bottom:1px solid rgb(227 225 216 / .1)}
.row:first-child{padding-top:0}
.row .t{font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.15rem .4rem;justify-self:start}
.t-done{background:var(--live);color:#0B1A14}
.t-prog{background:var(--gold);color:var(--ink)}
.t-next{border:1px solid var(--dim);color:var(--dim)}
.row .w{font-size:1rem;line-height:1.55}
@media (min-width:34rem){
  .row{grid-template-columns:6.5rem 1fr;gap:1rem;align-items:baseline}
}

.disc{font-family:var(--mono);font-size:.75rem;line-height:1.65;color:var(--dim);
  background:var(--indigo);padding:1.125rem 1.25rem;margin-top:1.75rem}

/* contact */
.contact{margin-top:clamp(3rem,9vw,4rem);padding-top:2rem;
  border-top:1px solid rgb(227 225 216 / .16)}
form{margin-top:1.75rem}
.field{margin-bottom:1.05rem}
label{display:block;font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);margin-bottom:.4rem}
input,textarea{width:100%;font:inherit;font-size:.9375rem;color:var(--paper);
  background:rgb(227 225 216 / .05);border:1px solid rgb(227 225 216 / .2);
  border-radius:2px;padding:.7rem .85rem}
input:focus,textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:transparent}
textarea{resize:vertical;min-height:7rem}
button{font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:500;background:var(--gold);color:var(--ink);border:0;border-radius:2px;
  padding:.9rem 1.5rem;cursor:pointer}
button:hover{background:#DDB65E}
.mail{display:inline-block;font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;color:var(--gold);margin-top:1.1rem}
.fallback{font-size:.875rem;color:var(--dim);margin-top:1.1rem}

footer{margin-top:4rem;padding-top:1.75rem;border-top:1px solid rgb(227 225 216 / .12);
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;color:var(--dim)}
footer p{margin:0 0 .4rem}

.cta{margin-top:2rem}
.btn{display:inline-block;font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;background:var(--gold);color:var(--ink);
  padding:.9rem 1.5rem;border:1px solid var(--gold)}
.btn:hover{background:#DDB65E}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------------------------------------------------------------------------
   Japanese page (/ja/). Fraunces and Archivo carry no Japanese glyphs, so the
   browser would silently substitute a system face for every kana and kanji —
   giving two unrelated typefaces in one line of text. Setting the Noto faces
   explicitly keeps it one voice.

   Japanese also needs more line leading than Latin at the same size: the glyphs
   are denser and full-width, so 1.65 that reads well in Archivo feels cramped.
   --------------------------------------------------------------------------- */
html[lang="ja"] body{
  font-family:var(--jp);
  line-height:1.85;
  /* Kinsoku shori. Default `auto` line breaking lets Chrome start a line with a
     long-vowel mark or a small kana, so ローグ・ヴァレー splits as ヴァレ / ー —
     which reads as a typesetting error to anyone Japanese. `strict` forbids it. */
  line-break:strict;
  word-break:normal;
  /* Proportional alternates tighten the gaps around Japanese punctuation, which
     is set on a full-width em box and otherwise leaves visible holes after 、and 。*/
  font-feature-settings:"palt" 1;
}
html[lang="ja"] h1{font-family:"Noto Serif JP",var(--disp);
  font-weight:600;letter-spacing:.01em;line-height:1.3}
html[lang="ja"] h1 em{font-style:normal}   /* no true italic exists for Japanese */
html[lang="ja"] .lede{line-height:1.9}
html[lang="ja"] .row .w,
html[lang="ja"] .lane span{line-height:1.8}
html[lang="ja"] .disc{font-family:var(--jp);font-size:.8125rem;line-height:1.9}

/* Section labels are Japanese on this page, so they need the JP face and no
   letterspacing — tracking applied to kanji looks like a mistake, not a style. */
html[lang="ja"] h2{font-family:var(--jp);letter-spacing:.04em;font-size:.75rem}
html[lang="ja"] .lane b,
html[lang="ja"] label{font-family:var(--jp);letter-spacing:.04em}
html[lang="ja"] .t{font-family:var(--jp);letter-spacing:.04em}

/* The status tag column is sized for English words like "In review"; Japanese
   labels are shorter, so the column can tighten. */
@media (min-width:34rem){
  html[lang="ja"] .row{grid-template-columns:5.5rem 1fr}
  html[lang="ja"] .lane{grid-template-columns:7rem 1fr}
}

/* ---------------------------------------------------------------------------
   Wide screens — the section labels move into a left gutter.

   Below 62rem nothing here applies and the page is the single column it has
   always been, so phones and tablets are untouched.

   The point is NOT to widen the text. Body copy stays at roughly a 40rem
   measure because 65-75 characters per line is what keeps dense paragraphs
   readable; stretching them to fill a 1900px monitor would make the page worse,
   not better. The recovered width goes to the mono labels instead, which turns
   dead margin into structure.
   --------------------------------------------------------------------------- */
@media (min-width:62rem){
  .page{max-width:60rem}

  /* The headline anchors the left margin; the lede keeps a readable measure. */
  h1{font-size:clamp(3.1rem,5vw,4rem)}
  .lede{max-width:36rem}

  section{
    display:grid;
    grid-template-columns:13rem minmax(0,1fr);
    column-gap:3.5rem;
    align-items:start;
    border-top:1px solid rgb(227 225 216 / .16);
    padding-top:1.9rem;
  }

  /* Label sits in column 1, row 1. Everything else stacks down column 2 —
     items with a definite column and an auto row fill the first free slot in
     that column, so the first paragraph lands beside the label, not below it. */
  section > h2{
    grid-column:1;
    grid-row:1;
    flex-direction:column;
    align-items:flex-start;
    gap:.3rem;
    border-bottom:0;
    padding-bottom:0;
    margin:0;
  }
  section > :not(h2){grid-column:2}

  /* The rule above each section now carries the separation, so the label no
     longer needs its own underline and the contact block no longer needs a
     second, heavier border of its own. */
  .contact{padding-top:1.9rem}
}