/* On the Clock — one stylesheet, whole site.
   Design rule: austerity. The accent only ever touches a number or the clock. */

/* ---------- fonts ---------- */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/instrument-serif-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url(/assets/fonts/instrument-serif-latin-italic.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ---------- tokens ---------- */
:root{
  --ink:#0E0D0C;
  --ink-raised:#161512;
  --paper:#F3F0EA;
  --paper-dim:#B3ACA4;
  --paper-soft:#DCD7D0;
  --paper-faint:#8D867F;
  --accent:#E3A857;              /* numbers and time ONLY */
  --rule:rgba(243,240,234,.13);
  --rule-strong:rgba(243,240,234,.26);

  --serif:'Instrument Serif',"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* fluid scale — preferred value is always rem + vw so browser zoom still works */
  --s--1:clamp(.8125rem,.79rem + .11vw,.875rem);
  --s-0: clamp(1.0625rem,1.02rem + .22vw,1.1875rem);
  --s-1: clamp(1.1875rem,1.11rem + .38vw,1.4375rem);
  --s-2: clamp(1.4375rem,1.28rem + .78vw,1.9375rem);
  --s-3: clamp(1.75rem,1.44rem + 1.55vw,2.625rem);
  --s-4: clamp(2.125rem,1.6rem + 2.6vw,3.75rem);
  --s-5: clamp(2.375rem,1.79rem + 2.9vw,3.875rem);

  --space-xs:clamp(.5rem,.47rem + .15vw,.625rem);
  --space-s: clamp(.875rem,.8rem + .37vw,1.125rem);
  --space-m: clamp(1.5rem,1.35rem + .75vw,2.125rem);
  --space-l: clamp(2.5rem,2.1rem + 2vw,4rem);
  --space-xl:clamp(4rem,3.1rem + 4.5vw,7rem);

  --measure:100%;
  --wide:44rem;
  --gutter:clamp(1.25rem,.95rem + 1.5vw,2.5rem);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--paper-soft);
  font-family:var(--sans);font-size:var(--s-0);line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-wrap:break-word;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.06;letter-spacing:-.012em;margin:0}
p,ul,ol{margin:0}
a{color:inherit}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wide);margin-inline:auto;padding-inline:var(--gutter)}
.measure{max-width:var(--measure)}
.hero{padding-block:clamp(2.75rem,2.2rem + 2.6vw,5.5rem) var(--space-xl)}
.stack>*+*{margin-top:var(--space-s)}
.stack-m>*+*{margin-top:var(--space-m)}
section{padding-block:var(--space-xl)}
section+section{border-top:1px solid var(--rule)}

/* ---------- masthead ---------- */
.masthead{padding-block:var(--space-xs);border-bottom:1px solid var(--rule)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--space-s)}
.wordmark{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--serif);font-size:var(--s-1);letter-spacing:.005em;
  text-decoration:none;color:var(--paper);line-height:1;
}
.masthead .tag{
  font-size:var(--s--1);letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper-faint);white-space:nowrap;
}

/* ---------- type helpers ---------- */
.eyebrow{
  font-size:var(--s--1);letter-spacing:.18em;text-transform:uppercase;
  color:var(--paper-dim);margin:0 0 var(--space-s);
}
.display{font-family:var(--serif);font-size:var(--s-5);line-height:1.02;letter-spacing:-.018em}
.h2{font-size:var(--s-3)}
.h3{font-size:var(--s-2)}
.lede{font-size:var(--s-1);color:var(--paper);line-height:1.5}
.ledger-list li{color:var(--paper-soft)}
.dim{color:var(--paper-dim)}
.faint{color:var(--paper-faint)}

/* the accent, and its rule: numbers and time only */
.num{color:var(--accent);font-variant-numeric:tabular-nums lining-nums}
.when{
  font-size:var(--s-1);color:var(--accent);
  letter-spacing:.02em;font-variant-numeric:tabular-nums lining-nums;
}
.when .dim{color:var(--paper-dim)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:.85rem 1.75rem;
  font-family:var(--sans);font-size:var(--s-0);font-weight:500;letter-spacing:.005em;
  text-decoration:none;border:1px solid var(--paper);border-radius:2px;
  background:var(--paper);color:var(--ink);cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.btn:hover{background:transparent;color:var(--paper)}
.btn-ghost{background:transparent;color:var(--paper);border-color:var(--rule-strong)}
.btn-ghost:hover{background:transparent;color:var(--paper);border-color:var(--paper)}
.actions{display:flex;flex-direction:column;gap:var(--space-s);align-items:stretch}
.actions .btn{width:100%}
@media (min-width:30em){.actions{flex-direction:row;flex-wrap:wrap;align-items:center}.actions .btn{width:auto}}

.textlink{
  display:inline-flex;align-items:center;gap:.45em;min-height:44px;
  color:var(--paper);text-decoration:none;
  border-bottom:1px solid var(--rule-strong);
  transition:border-color .18s ease;
}
.textlink:hover{border-bottom-color:var(--paper)}

/* ---------- ledger rules (the one motif) ---------- */
.ledger{border-top:1px solid var(--rule);margin-top:var(--space-m);padding-top:var(--space-m)}
.spaced{margin-top:var(--space-m)}
.ledger-list{list-style:none;padding:0;margin:0}
.ledger-list li{
  padding-block:var(--space-s);border-bottom:1px solid var(--rule);
}
.ledger-list li:first-child{border-top:1px solid var(--rule)}

/* ---------- cards ---------- */
.cards{display:grid;gap:var(--space-s);grid-template-columns:1fr}
@media (min-width:44em){.cards{grid-template-columns:repeat(2,1fr)}}
.card{
  border:1px solid var(--rule);border-radius:3px;background:var(--ink-raised);
  padding:var(--space-m);display:flex;flex-direction:column;gap:var(--space-xs);
}
.card h3{font-size:var(--s-2)}
.card .price{
  font-family:var(--serif);font-size:var(--s-3);color:var(--accent);
  font-variant-numeric:tabular-nums lining-nums;line-height:1.1;
}
.card .meta{font-size:var(--s--1);letter-spacing:.1em;text-transform:uppercase;color:var(--paper-faint)}
.card p{color:var(--paper-dim);font-size:var(--s-0)}

/* ---------- forms ---------- */
.form{margin-top:var(--space-m)}
.form>.btn{width:100%}
@media (min-width:30em){.form>.btn{width:auto;min-width:14rem}}
.field{margin-bottom:var(--space-s)}
.field label{
  display:block;margin-bottom:.4rem;
  font-size:var(--s--1);letter-spacing:.1em;text-transform:uppercase;color:var(--paper-dim);
}
.field input,.field select,.field textarea{
  width:100%;min-height:52px;padding:.75rem .9rem;
  font-family:var(--sans);font-size:var(--s-0);line-height:1.4;
  color:var(--paper);background:var(--ink-raised);
  border:1px solid var(--rule-strong);border-radius:2px;
  appearance:none;
}
.field textarea{min-height:7.5rem;resize:vertical}
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--paper-dim) 50%),linear-gradient(135deg,var(--paper-dim) 50%,transparent 50%);
  background-position:calc(100% - 1.15rem) 55%,calc(100% - .8rem) 55%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:2.5rem;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--accent);outline-offset:1px;border-color:transparent;
}
.field .hint{margin-top:.35rem;font-size:var(--s--1);color:var(--paper-faint);letter-spacing:0;text-transform:none}
.form-note{
  margin-top:var(--space-s);padding:var(--space-s);
  border:1px dashed var(--rule-strong);border-radius:2px;
  font-size:var(--s--1);color:var(--paper-faint);
}
@media (min-width:38em){.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--space-s)}}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--rule);padding-block:var(--space-l) var(--space-m);color:var(--paper-dim)}
.foot a{color:var(--paper-dim);text-decoration:none;border-bottom:1px solid transparent}
.foot a:hover{color:var(--paper);border-bottom-color:var(--rule-strong)}
.foot-grid{display:flex;flex-wrap:wrap;gap:var(--space-m);justify-content:space-between}
.foot-nav{display:flex;flex-wrap:wrap;gap:var(--space-xs) var(--space-m);list-style:none;padding:0;margin:0;font-size:var(--s--1);letter-spacing:.06em;text-transform:uppercase}
.foot .contact{display:flex;flex-direction:column;gap:.2rem;font-size:var(--s-0)}
.foot-nav a{display:inline-flex;align-items:center;min-height:44px}
.foot .contact a{min-height:44px;display:inline-flex;align-items:center}
.foot .fine{margin-top:var(--space-m);padding-top:var(--space-s);border-top:1px solid var(--rule);
  font-size:var(--s--1);color:var(--paper-faint);display:flex;flex-wrap:wrap;gap:var(--space-s) var(--space-m);justify-content:space-between}

/* ---------- misc ---------- */
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gutter);top:var(--space-s);z-index:10;background:var(--paper);color:var(--ink);padding:.75rem 1rem;border-radius:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}