/* James Co Cabinetry — demonstration rebuild.
   Archetype B (work-first). Mobile first. No framework, no JS, no web fonts.

   Palette is deliberately cool indigo on ash, with no serif anywhere:
   the two other cabinet demos in this directory are (a) warm chalk paper with
   petrol green and Georgia headings, and (b) warm near-black with maple and
   oxblood. Neither can be mistaken for this.                                */

:root{
  --paper:   #e9eaec;   /* cool ash                       */
  --paper-2: #e2e5ea;   /* tinted band                    */
  --ink:     #14171a;
  --muted:   #494f57;
  --plate:   #1b1f28;   /* dark ground behind every frame */
  --plate-2: #141922;
  --indigo:  #23306b;   /* every link and every call      */
  --indigo-l:#9fb3e8;   /* links on dark grounds          */
  --line:    #c6cad1;
  --ghost:   #6f7f95;   /* index numerals on dark         */
  --edge:    38px;      /* width of the fixed call strip  */
  --gut:     1.15rem;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

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

body{
  margin:0;
  padding-right:var(--edge);      /* the fixed call strip lives in here */
  background:var(--paper);
  color:var(--ink);
  font:1.02rem/1.62 var(--sans);
  overflow-x:hidden;
}

svg.defs{ position:absolute; width:0; height:0; overflow:hidden; }

img,svg{ max-width:100%; }

a{ color:var(--indigo); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:3px solid #c8a02a; outline-offset:2px;
}

h1,h2,h3{
  font-weight:700;
  letter-spacing:.055em;
  text-transform:uppercase;
  line-height:1.22;
  margin:0 0 .6rem;
  text-wrap:balance;
}
/* Deliberately LOW scale contrast — the photographs are meant to be the loud
   thing on this page, not the headings. */
h1{ font-size:clamp(1.32rem, 4.9vw, 1.95rem); }
h2{ font-size:clamp(1.16rem, 3.9vw, 1.45rem); }
h3{ font-size:1rem; letter-spacing:.045em; }

p{ margin:0 0 1rem; }

.wrap{ max-width:44rem; margin:0 auto; padding:2.4rem var(--gut); }
.wrap--lead{ padding-bottom:1.4rem; }

/* ---------- the fixed edge strip: the only navigation on the page --------- */
.edge{
  position:fixed; top:0; right:0; bottom:0; width:var(--edge);
  background:var(--indigo);
  display:flex; align-items:center; justify-content:center;
  z-index:60;
  border-left:1px solid rgba(255,255,255,.18);
}
.edge-call{
  writing-mode:vertical-rl;
  text-orientation:mixed;
  color:#fff;
  text-decoration:none;
  font:600 .74rem/1 var(--mono);
  letter-spacing:.14em;
  padding:1rem .2rem;
}
.edge-call:hover{ text-decoration:underline; }

/* ---------------------------- plates (the work) -------------------------- */
.plate{
  position:relative;
  overflow:hidden;
  background:var(--plate);
  min-height:230px;
}
.plate-art{ position:absolute; inset:0; width:100%; height:100%; }
.plate-art--light{ position:absolute; inset:0; width:100%; height:100%; }

.ghost{
  position:absolute; right:.5rem; top:.1rem; margin:0;
  font:700 4.6rem/1 var(--mono);
  color:var(--ghost);
  letter-spacing:-.02em;
}
.plate-name{
  position:absolute; left:var(--gut); bottom:1rem; right:var(--gut); margin:0;
  font:600 .84rem/1.4 var(--mono);
  letter-spacing:.13em; text-transform:uppercase;
  color:#eef2f8;
}

/* the opening plate carries the identity, so it is taller and has real copy */
.plate--open{
  min-height:auto;
  border-bottom:4px solid var(--indigo);
}
/* scrim so the door pattern never sits behind the headline */
.plate--open::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(27,31,40,.94) 0%, rgba(27,31,40,.88) 46%, rgba(27,31,40,.42) 100%);
}
.open-copy{ position:relative; padding:2.6rem var(--gut) 1.4rem; max-width:44rem; margin:0 auto; color:#dfe5ee; }
.wordmark{
  font:700 .82rem/1 var(--mono);
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--indigo-l);
  margin:0 0 1.1rem;
}
.plate--open h1{ color:#f2f5f9; max-width:20ch; }
.lede{ color:#c3ccd9; max-width:40ch; margin-top:.9rem; }
.hourline{ font:.8rem/1.6 var(--mono); color:#aeb8c6; margin:1.1rem 0 0; }
.hourline .k{ color:var(--indigo-l); letter-spacing:.08em; text-transform:uppercase; }

.calls{ display:flex; flex-wrap:wrap; gap:.6rem; margin:1.4rem 0 0; }
.btn{
  display:inline-block;
  background:var(--indigo); color:#fff; text-decoration:none;
  padding:.85rem 1.15rem;
  font:600 .95rem/1.2 var(--sans);
  letter-spacing:.03em;
  border:2px solid var(--indigo);
  border-radius:2px;
}
.btn:hover{ background:#2c3d86; border-color:#2c3d86; }
.btn--ghost{ background:transparent; color:#eef2f8; border-color:#7f8ca9; }
.btn--ghost:hover{ background:rgba(255,255,255,.09); border-color:#eef2f8; }

/* ------------------------------- captions -------------------------------- */
.cap{
  margin:0;
  padding:1rem var(--gut) 1.6rem;
  max-width:44rem;
  font-size:.92rem;
  color:var(--muted);
  border-bottom:1px solid var(--line);
}
.cap--open{
  position:relative;
  background:var(--plate-2);
  color:#c3ccd9;
  border-bottom:none;
  margin:0 auto;
  max-width:none;
  padding-top:1.2rem;
}
.cap-t{ color:var(--ink); font-weight:700; }
.chip{
  display:inline-block;
  background:var(--indigo); color:#fff;
  font:600 .66rem/1 var(--mono);
  letter-spacing:.14em; text-transform:uppercase;
  padding:.36rem .5rem; margin-right:.5rem;
  border-radius:2px;
  vertical-align:.06em;
}

.record .plate{ min-height:250px; }

/* ------------------------------ fact strip ------------------------------- */
.strip{ background:var(--paper-2); border-bottom:1px solid var(--line); }
.facts{
  max-width:44rem; margin:0 auto; padding:1.4rem var(--gut);
  display:grid; gap:.9rem;
}
.facts > div{ display:grid; gap:.15rem; }
.facts dt{
  font:600 .68rem/1 var(--mono);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--indigo);
}
.facts dd{ margin:0; font-size:.95rem; }
@media (min-width:640px){
  .facts{ grid-template-columns:1fr 1fr; gap:1.1rem 1.6rem; }
}

/* -------------------------------- lists ---------------------------------- */
.eyebrow{
  font:600 .7rem/1 var(--mono);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--indigo);
  margin:0 0 .7rem;
}
.sub{ color:var(--muted); }

.list{ list-style:none; margin:1.6rem 0 0; padding:0; }
.list > li{
  padding:1.3rem 0;
  border-top:1px solid var(--line);
}
.list > li:last-child{ border-bottom:1px solid var(--line); }
.num{
  font:700 .78rem/1 var(--mono);
  letter-spacing:.14em; color:var(--indigo);
  margin:0 0 .45rem;
}
.list h3{ margin-bottom:.45rem; }
.list p:last-child{ margin-bottom:0; }

.callband{ margin:0; padding:1.6rem var(--gut) 2.4rem; text-align:center; }
.callband--flush{ padding:.6rem 0 0; text-align:left; }

/* -------------------------------- lines ---------------------------------- */
.lines{ position:relative; background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.lines .wrap{
  position:relative;
  background:#eef0f3;
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
}
.brands{ margin:1.5rem 0 0; }
.brands > div{
  padding:1rem 0;
  border-top:1px solid var(--line);
}
.brands > div:last-child{ border-bottom:1px solid var(--line); }
.brands dt{
  font:700 .84rem/1.3 var(--mono);
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink);
  margin-bottom:.3rem;
}
.brands dd{ margin:0; font-size:.95rem; color:var(--muted); }

/* ----------------------------- testimonials ------------------------------ */
blockquote{
  margin:1.5rem 0 0;
  padding:1.1rem 0 0;
  border-top:2px solid var(--indigo);
}
blockquote p{ font-size:1.02rem; }
blockquote footer{
  font:600 .74rem/1 var(--mono);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--indigo);
}

/* -------------------------------- quote ---------------------------------- */
.quote{ background:var(--plate); color:#dfe5ee; }
.quote h2{ color:#f2f5f9; }
.quote .eyebrow{ color:var(--indigo-l); }
.quote .sub{ color:#c3ccd9; }
.quote a{ color:var(--indigo-l); }

.qform{ margin-top:1.6rem; }
.field{ margin:0 0 1.05rem; }
.field label{
  display:block;
  font:600 .72rem/1 var(--mono);
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--indigo-l);
  margin-bottom:.4rem;
}
.field input, .field textarea{
  width:100%;
  font:1rem/1.5 var(--sans);
  color:var(--ink);
  background:#fbfbfc;
  border:2px solid #55607a;
  border-radius:2px;
  padding:.7rem .65rem;
}
.field input:focus, .field textarea:focus{ border-color:var(--indigo-l); }
.field button{
  width:100%;
  font:600 1rem/1.2 var(--sans);
  letter-spacing:.03em;
  background:var(--indigo-l);
  color:#10142a;
  border:2px solid var(--indigo-l);
  border-radius:2px;
  padding:.9rem 1rem;
  cursor:pointer;
}
.field button:hover{ background:#b9c8ef; border-color:#b9c8ef; }
.formnote{ font-size:.85rem; color:#b6c0ce; margin:0; }

/* -------------------------------- visit ---------------------------------- */
.visit{ background:var(--paper); }
.facts--visit{ padding-left:0; padding-right:0; }
.facts--visit dd a{ font-family:var(--mono); font-size:.92rem; }

/* -------------------------------- footer --------------------------------- */
.foot{
  background:#14171a; color:#b9c0cb;
  font-size:.88rem;
  border-top:4px solid var(--indigo);
}
.foot .wrap{ padding-top:1.8rem; padding-bottom:2.2rem; }
.foot a{ color:var(--indigo-l); }
.fname{
  font:700 .86rem/1 var(--mono);
  letter-spacing:.18em; text-transform:uppercase;
  color:#eef2f8;
  margin-bottom:.6rem;
}
.disc{ color:#9aa2ad; font-size:.82rem; }
.copy{ color:#9aa2ad; font-size:.82rem; margin:0; }

/* ------------------------------- wider ----------------------------------- */
@media (min-width:900px){
  :root{ --edge:44px; --gut:2rem; }
  body{ font-size:1.05rem; }
  h1{ font-size:2.1rem; }
  h2{ font-size:1.55rem; }
  .plate{ min-height:320px; }
  .record .plate{ min-height:360px; }
  /* tie the index numeral and the project name to the same measure as the copy */
  .ghost{ right:max(var(--gut), calc((100% - 44rem)/2)); }
  .plate-name{
    left:max(var(--gut), calc((100% - 44rem)/2));
    right:max(var(--gut), calc((100% - 44rem)/2)); }
  .open-copy{ padding:4.2rem var(--gut) 2rem; }
  .ghost{ font-size:7rem; right:1.4rem; }
  .cap{ margin:0 auto; padding:1.2rem var(--gut) 2rem; }
  .cap--open{ padding:1.6rem var(--gut) 2rem; }
  .cap--open span, .cap--open{ }
  .callband{ padding:2rem var(--gut) 3rem; }
}

@media (min-width:900px){
  /* the opening caption is centred on the same measure as the body copy */
  .cap--open{ display:block;
    padding-left:max(var(--gut), calc((100% - 44rem)/2));
    padding-right:max(var(--gut), calc((100% - 44rem)/2)); }
}

@media (prefers-reduced-motion:no-preference){
  html{ scroll-behavior:smooth; }
}