/* morrisbachmann.com — a faithful rebuild of the owner's Wix site.
   Captured 2026-09-10; spec in /root/site-source/DESIGN.md, copy in CONTENT.md.

   The design is HIS and is reproduced, not reinterpreted: black ground, white
   type, one hot red-orange accent, one amber band, cream form fields, Art Deco
   throughout. What changed is the execution — the Wix banner is gone, the page
   is genuinely responsive to 400px, the ~750KB of framework is a few tens of
   KB with no JS the page needs to render, headings are in order, focus is
   visible, images are sized webp instead of 28.9MB of unresized originals.

   Fonts: three of his five faces are licensed Monotype webfonts that Wix
   served under Wix's own licence, which does not travel with a copy of the
   page. Nothing here may be bought (CLAUDE.md), so Futura LT, DIN Next and
   Lulo Clean are all set in Jost, an OFL Futura revival, at the weight each
   role needs. Poiret One and Fraunces are his real faces and are used exactly.
   Every face is self-hosted; the site makes no third-party request at all. */

/* ------------------------------------------------------------------ fonts */
/* Poiret One — SIL OFL 1.1, fonts/OFL-PoiretOne.txt */
@font-face{font-family:"Poiret One";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/poiret-one-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Poiret One";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/poiret-one-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* Jost — SIL OFL 1.1, fonts/OFL-Jost.txt. One variable file covers 300-600. */
@font-face{font-family:"Jost";font-style:normal;font-weight:300 600;font-display:swap;
  src:url("fonts/jost-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Jost";font-style:normal;font-weight:300 600;font-display:swap;
  src:url("fonts/jost-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* Fraunces — SIL OFL 1.1, fonts/OFL-Fraunces.txt. Only the home teasers use
   it, so only the home page ever downloads it. */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/fraunces-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/fraunces-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ----------------------------------------------------------------- tokens */
:root{
  color-scheme:dark;

  /* His palette, sampled from the rendered page. */
  --black:#000000;
  --white:#FFFFFF;
  --red:#FF4200;      /* accent: active nav, rules, small marks */
  --amber:#FFB600;    /* the full-width band behind MUSIC */
  --cream:#FFFBF4;    /* form fields */
  --grey:#8F8F8F;     /* muted type — 6.4:1 on black */

  /* The one deliberate departure from his hex values. #FF4200 behind white
     text is 3.5:1, under AA for text this size; this is the same red a
     shade deeper and reaches 4.7:1. The accent itself is untouched. */
  --red-btn:#DC3700;

  --display:"Poiret One","Didot",Georgia,serif;
  --sans:"Jost","Futura","Century Gothic",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;

  --gutter:clamp(20px,5vw,48px);
  --max:1200px;
  --col:44rem;
}

*{box-sizing:border-box}
html{background:var(--black); -webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; overflow-x:hidden;
  background:var(--black); color:var(--white);
  font:400 1rem/1.7 var(--sans);
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
}

h1,h2,h3,h4{margin:0; font-weight:400}
p{margin:0}
img{max-width:100%; height:auto; display:block}
ul{margin:0; padding:0; list-style:none}

a{color:var(--white); text-decoration:none}
a:hover{color:var(--red)}
:focus-visible{outline:2px solid var(--red); outline-offset:3px}

.skip{position:absolute; left:-9999px; top:0; z-index:50; padding:12px 18px;
  background:var(--white); color:var(--black); font-weight:500}
.skip:focus{left:12px; top:12px}

.visually-hidden{
  display:inline-block; width:1px; height:1px; padding:0; border:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

/* ------------------------------------------------------------------ shell */
.shell{width:100%; max-width:var(--max); margin:0 auto; padding-inline:var(--gutter)}
.col{max-width:var(--col); margin-inline:auto}
.center{text-align:center}

/* Full-width colour bands, the site's main structural move. */
.band{width:100%}
.band-black{background:var(--black); color:var(--white)}
.band-amber{background:var(--amber); color:var(--black)}
.band-pad{padding-block:clamp(48px,8vw,96px)}

/* --------------------------------------------------------------- lettering */
/* His heavy deco caps (Lulo Clean on the original) — Jost SemiBold, uppercase,
   wide tracking. Matching the rhythm of the screenshot, not the glyphs. */
.deco{
  font-family:var(--sans); font-weight:600; text-transform:uppercase;
  letter-spacing:.12em; line-height:1.18;
}
.deco-xl{font-size:clamp(1.85rem,1.1rem + 3.1vw,3.4rem)}
.deco-lg{font-size:clamp(1.55rem,1.1rem + 2vw,2.6rem)}
.deco-md{font-size:clamp(1.3rem,1.05rem + 1.2vw,1.9rem)}

/* His display face, used for section names and work titles. */
.script{font-family:var(--display); font-weight:400; letter-spacing:.03em; line-height:1.2}
.script-lg{font-size:clamp(1.45rem,1.15rem + 1.4vw,2.1rem)}
.script-md{font-size:clamp(1.2rem,1.05rem + .7vw,1.5rem)}

.muted{color:var(--grey)}
.small{font-size:.9rem; line-height:1.6}

/* The statement and the other long display passages. */
.lede{
  font-family:var(--display); font-size:clamp(1.1rem,1rem + .55vw,1.35rem);
  line-height:1.8; letter-spacing:.012em;
}
.body-copy{font-size:1rem; line-height:1.75}
.body-copy p + p{margin-top:1.3em}

/* ----------------------------------------------------------------- header */
.site-head{background:var(--black); padding-block:clamp(18px,2.6vw,28px)}
.head-grid{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:clamp(14px,2.4vw,32px);
}
.brand{display:block}
/* WORDMARK. His is set in Park Lane NF, a face we should not ship, so it is
   set in Poiret One caps here. To use his real lettering instead, drop an
   exported SVG/PNG in as <img class="brand-img" src="img/wordmark.svg" …>
   and delete the span. See the open questions. */
.brand-word{
  display:block; font-family:var(--display); text-transform:uppercase;
  font-size:clamp(1.5rem,1.1rem + 1.7vw,2.35rem); letter-spacing:.16em;
  line-height:1.1; color:var(--white); white-space:nowrap;
}
.brand-img{max-height:56px; width:auto}
.brand-tag{
  margin-top:8px; font-size:clamp(.72rem,.68rem + .2vw,.84rem);
  letter-spacing:.16em; font-weight:300; color:var(--white);
}
.head-right{display:flex; flex-wrap:wrap; align-items:center; gap:clamp(14px,2.4vw,30px)}

/* --------------------------------------------------------------------- nav */
.nav{display:flex; flex-wrap:wrap; align-items:center; gap:6px clamp(16px,2.2vw,30px)}
.nav > li{position:relative}
.nav a{
  display:inline-block; padding:6px 0; font-size:.9rem; font-weight:400;
  letter-spacing:.05em; color:var(--white);
}
.nav a:hover{color:var(--red)}
.nav a[aria-current="page"]{color:var(--red)}

/* "Work" groups the three portfolio pages, as on his site. On a phone the
   group flattens into the row (display:contents) instead of becoming a
   hover menu no finger can open. */
/* On a phone the whole group dissolves into the row — BOTH the wrapper and
   the list need display:contents, or the three children stay block-stacked
   inside the wrapper and the row reads as a jumble. */
.nav-work,.subnav{display:contents}
.subnav a{font-size:.9rem}
.subnav a:hover,.subnav a[aria-current="page"]{color:var(--red)}
.nav-work > a{display:none}

@media (min-width:900px){
  .nav-work{display:block; position:relative}
  .nav-work > a{display:inline-block}
  .nav-work > a::after{content:"\00a0\25be"; font-size:.8em}
  .subnav{
    display:block; position:absolute; top:100%; left:-16px; z-index:30;
    min-width:11rem; padding:10px 16px 14px;
    background:var(--black); border:1px solid #2A2A2A;
    opacity:0; visibility:hidden; transform:translateY(-4px);
    transition:opacity .14s ease, transform .14s ease, visibility .14s;
  }
  .nav-work:hover .subnav,
  .nav-work:focus-within .subnav{opacity:1; visibility:visible; transform:none}
  .subnav a{display:block; padding:5px 0; font-size:.86rem; color:var(--white)}
}

/* ------------------------------------------------------------------ social */
.social{display:flex; align-items:center; gap:14px}
.social a{display:block; line-height:0; opacity:.92; transition:opacity .15s ease}
.social a:hover{opacity:1}
.social img{width:22px; height:22px}
.social-lg img{width:26px; height:26px}

/* ------------------------------------------------------------------ button */
.btn{
  display:inline-block; padding:11px 26px;
  background:var(--red-btn); color:var(--white);
  font-size:.95rem; font-weight:400; letter-spacing:.02em; line-height:1.3;
  border:0; border-radius:2px;
  transition:filter .15s ease;
}
.btn:hover{filter:brightness(1.12); color:var(--white)}
.btn-quiet{
  background:transparent; color:var(--white); padding:0;
  font-size:.78rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  border-bottom:1px solid var(--red); border-radius:0;
}
.btn-quiet:hover{color:var(--red); filter:none}
/* A control that deliberately does nothing, where a Wix backend used to be. */
.btn-off{
  background:transparent; color:var(--grey);
  border:1px dashed #4A4A4A; cursor:not-allowed;
}
.btn-off:hover{filter:none; color:var(--grey)}

/* -------------------------------------------------------------------- hero */
/* Everything in the hero shares one grid cell so the lettering sits ON the
   image. It must be `> *`, not `> img`: the image is wrapped in <picture> for
   the webp/jpg pair, and grid auto-placement pushes an unplaced child into a
   second row — which is exactly how the heading ended up above the picture
   instead of over it. */
.hero{
  position:relative; display:grid; isolation:isolate; overflow:hidden;
  min-height:clamp(330px,42vw,600px); max-height:min(80vh,640px);
}
.hero > *{grid-area:1/1}
.hero picture{display:block; height:100%}
.hero picture img{width:100%; height:100%; object-fit:cover; object-position:center}
/* The About hero is the whole arch, shell lamps and the orange piano-key band
   at its foot, exactly as on his page — so it is not cropped to a banner. */
.hero-full{max-height:none; min-height:clamp(360px,64vw,940px)}
.hero-veil{background:rgba(0,0,0,.52); z-index:1}
.hero-full .hero-veil{background:rgba(0,0,0,.4)}
.hero-inner{
  z-index:2; align-self:center;
  padding:clamp(40px,7vw,80px) var(--gutter); text-align:center;
}
.hero h1,.hero h2{max-width:15ch; margin-inline:auto; text-shadow:0 2px 18px rgba(0,0,0,.6)}
.hero .btn{margin-top:clamp(20px,3vw,30px)}
.hero-copy{margin:22px auto 0; max-width:38ch; text-shadow:0 1px 12px rgba(0,0,0,.6)}

/* ------------------------------------------------------------- media slots */
/* Nothing is faked. The portfolio videos and the audio players live inside
   Wix's own components and did not come across, so each one is an empty
   reserve at the right aspect ratio, labelled, ready for the real file. */
.slot{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; border:1px dashed #3A3A3A; background:#0B0B0B; color:var(--grey);
}
.slot-16x9{aspect-ratio:16/9}
.slot-audio{min-height:104px; flex-direction:row; gap:16px; padding:18px}
.slot svg{width:clamp(30px,5vw,46px); height:auto; opacity:.7; flex:none}
.slot-mark{font-size:.76rem; letter-spacing:.1em; text-align:center; padding:0 14px}
.band-amber .slot{border-color:rgba(0,0,0,.35); background:rgba(0,0,0,.06); color:#4A3200}
.band-amber .slot svg{opacity:.85}

/* --------------------------------------------------------------- portfolio */
.work + .work{margin-top:clamp(44px,7vw,84px)}
.work-title{margin-top:20px}
.work-credit{margin-top:8px; color:var(--grey); font-size:.92rem; line-height:1.65}
.set{margin-top:clamp(44px,7vw,88px)}
.set-head{margin-bottom:clamp(24px,3.6vw,40px)}
.set-note{margin-top:14px; color:var(--grey)}
.track + .track{margin-top:clamp(30px,4.5vw,52px)}
.set-note + .track{margin-top:clamp(20px,3vw,32px)}
.track-title{margin-top:16px}

/* Section index, as on his portfolio pages. Wide screens only — it needs room
   beside the column, and on a phone the page is short enough to scroll. */
.jump{display:none}
@media (min-width:1240px){
  .jump{
    display:block; position:fixed; right:26px; top:50%; transform:translateY(-50%);
    z-index:20; text-align:right;
  }
  .jump a{display:block; padding:4px 0; font-size:.8rem; letter-spacing:.06em; color:var(--grey)}
  .jump a:hover{color:var(--red)}
}

/* --------------------------------------------------------------- teasers */
.teasers{
  display:grid; gap:clamp(18px,2.6vw,28px);
  grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));
}
.teaser-cap{
  margin-top:14px; font-family:var(--serif); font-weight:600;
  font-size:1rem; line-height:1.4; text-align:center;
  font-variation-settings:"opsz" 120,"SOFT" 0,"WONK" 0;
}

/* ---------------------------------------------------------------- notices */
/* Written by Claude, not by him — a plain report of what is not connected.
   Never in his voice, and short enough to delete in one line. */
.notice{
  border-left:2px solid var(--red); padding:2px 0 2px 16px;
  color:var(--grey); font-size:.9rem; line-height:1.6; text-align:left;
  max-width:56ch;
}
.notice a{color:var(--white); text-decoration:underline}

/* ------------------------------------------------------------------- forms */
.form{max-width:34rem; margin-inline:auto}
.form fieldset{border:0; margin:0; padding:0}
.field-row{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.field{margin-top:14px}
.field-row .field{margin-top:0}
.field label{display:block; font-size:.82rem; letter-spacing:.04em; margin-bottom:6px; color:var(--white)}
.field input,.field textarea{
  width:100%; padding:10px 12px; font:inherit; font-size:1rem;
  color:#111; background:var(--cream); border:1px solid var(--cream); border-radius:0;
}
.field textarea{min-height:120px; resize:vertical}
.field input:focus,.field textarea:focus{outline:2px solid var(--red); outline-offset:1px}
.form button{
  margin-top:18px; width:100%; padding:10px; font:inherit; font-size:1rem;
  background:var(--cream); color:#111; border:1px solid var(--cream);
  border-radius:0; cursor:not-allowed;
}
fieldset[disabled] .field input,
fieldset[disabled] .field textarea{background:#E9E5DE; border-color:#E9E5DE}
fieldset[disabled] button{background:#E9E5DE; border-color:#E9E5DE; color:#4A4A4A}

/* ---------------------------------------------------------------- lessons */
.crumb{font-size:.85rem; letter-spacing:.05em; color:var(--grey)}
.service{
  display:grid; gap:clamp(18px,3vw,34px); align-items:center;
  grid-template-columns:1fr; padding-block:clamp(26px,4vw,38px);
  border-top:1px solid #262626;
}
.service:last-of-type{border-bottom:1px solid #262626}
@media (min-width:760px){.service{grid-template-columns:minmax(0,320px) 1fr auto}}
.service img{width:100%; border-radius:2px}
.service-meta{margin-top:8px; color:var(--grey); font-size:.92rem}
.service-price{color:var(--white)}

/* ---------------------------------------------------------------- contact */
.contact-top{display:grid; gap:clamp(24px,4vw,52px); align-items:start; grid-template-columns:1fr}
@media (min-width:820px){.contact-top{grid-template-columns:minmax(0,340px) 1fr}}

/* ----------------------------------------------------------------- footer */
.site-foot{background:var(--black); padding-block:clamp(40px,6vw,70px); text-align:center}
.foot-rule{height:1px; background:#3C3C3C; max-width:840px; margin:0 auto clamp(28px,4vw,44px)}
.foot-word{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.16em;
  font-size:clamp(1.25rem,1rem + 1.1vw,1.8rem); line-height:1.15;
}
.foot-tag{margin-top:8px; font-size:.78rem; letter-spacing:.14em; font-weight:300}
.foot-emblem{width:clamp(120px,17vw,170px); height:auto; margin:clamp(20px,3vw,30px) auto 0}
.foot-social{justify-content:center; margin-top:clamp(18px,2.6vw,26px)}
.foot-mail{margin-top:16px; font-size:.9rem}
.foot-mail a{border-bottom:1px solid #3C3C3C}
.foot-nav{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px;
  margin-top:26px; font-size:.84rem;
}
.foot-nav a{color:var(--grey)}
.foot-nav a:hover{color:var(--red)}
.foot-legal{margin-top:24px; font-size:.78rem; color:var(--grey); letter-spacing:.04em}