/* marclemaydesign.com — cream ground
   Loaded AFTER site.css, by the case study and its working documents only.
   Home, About and Contact stay on the plum ground in site.css.

   Identity:
     ground   cream          #f0eee9
     ink      near-black     #1a1a1a
     accent   terracotta     #8f4632   links
     accent2  clay rule      #c4705a   the rule under the h1 only
     muted    #6b665e                  captions, labels, secondary text

   Citron never appears on cream — it measures about 1.5:1 and cannot
   carry a link.
*/

:root{
  --ground:#f0eee9;
  --ground-hover:#f6f4f0;
  --ink:#1a1a1a;
  --ink-soft:#4a463f;
  --ink-mid:#6b665e;
  --ink-faint:#8a857c;
  --rule:#d8d4cd;
  --accent:#8f4632;
  --clay:#c4705a;
}

a:hover{color:#190f1d}

/* The rule is 320px on the case study and everything hanging off it;
   Home and About keep the 420px in site.css. */
.rule{max-width:320px}

/* ---- working document pages ---- */

/* The one-sentence note at the top of each document: what it was for, and
   which case study decision it produced. */
.doc-note{
  max-width:60ch;
  margin:0 0 clamp(24px,3.4vw,40px);
  padding-left:1.5rem;
  border-left:2px solid var(--rule);
  font-size:clamp(15px,1.2vw,17px);
  line-height:1.6;
  color:var(--ink-soft);
}

.doc-note strong{color:var(--ink)}

/* The document itself keeps its own internal typography — it is a working
   file, not a portfolio page, and the note says so. This only sets it on
   the cream ground and stops it fighting the page width. */
.doc-body{
  margin:0 0 clamp(32px,4.4vw,56px);
}

.doc-body doc-page:not(:defined){visibility:hidden}

/* Sibling links at the foot of each document. Unfilled rows, so they sit
   at 0 rather than hanging 5px left. */
.doc-siblings{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
  gap:.75rem 1.5rem;
  max-width:56rem;
  margin:0;
  padding-top:clamp(18px,2.4vw,26px);
  border-top:1px solid var(--rule);
}

.doc-siblings > div{
  padding-bottom:.75rem;
  border-bottom:1px solid var(--rule);
}

.doc-siblings a{
  font-weight:500;
  color:var(--accent);
  border-bottom:1px solid var(--accent);
}

.doc-siblings a:hover{color:#190f1d}

.doc-siblings p{
  margin:.25rem 0 0;
  max-width:none;
  font-size:14px;
  line-height:1.5;
  color:var(--ink-mid);
}

.doc-back{
  display:block;
  margin:0 0 clamp(18px,2.4vw,26px);
  font:600 13px/1.2 var(--label);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-mid);
}

.doc-back:hover{color:var(--accent)}

/* Wide working boards (the flow board, the visual design board) are artboards,
   not page layouts. They scroll on their own axis rather than being squeezed
   into the measure. */
.doc-board{
  overflow-x:auto;
  overflow-y:hidden;
  border:1px solid var(--rule);
  border-radius:6px;
  background:#EDEAE3;
  -webkit-overflow-scrolling:touch;
}

/* The documents carry their own internal type; stop site.css reaching in. */
.doc-body p{max-width:none;color:inherit;margin:revert}
.doc-body h1,.doc-body h2,.doc-body h3{max-width:none;margin:revert;letter-spacing:normal}
.doc-body a{color:inherit}
.doc-body a:hover{color:inherit}

/* doc-page is a print shell that normally owns the viewport: it floors at
   8.5in + 48px of desk padding, paints its own grey desk, and reserves
   100vh. Embedded in a site page all three fight the column, so the desk
   becomes the cream ground and the paper is allowed to fit the measure. */
.doc-body doc-page{
  min-width:0;
  padding-left:8px;
  padding-right:8px;
  min-height:0;
  background:var(--ground);
  display:block;
}

/* Boards are scaled to the column by js/fit-board.js, which sets overflow to
   hidden once it has scaled. Until then the scroll axis stays available, so a
   failed script clips nothing. */
.doc-board > div{transform-origin:top left}


/* ---- case study page ---- */

.cs-h1{
  font:800 clamp(2.25rem,4.4vw,3.25rem)/1.02 var(--sans);
  letter-spacing:-.035em;
  margin:0 0 1.5rem;
  max-width:28ch;
  text-wrap:balance;
}

.cs main{max-width:64rem}

.cs .lede{max-width:44ch;font-size:1.25rem;line-height:1.45;margin-bottom:2.5rem}
.cs h2{font:800 1.5rem/1.15 var(--sans);letter-spacing:-.022em;margin:2.5rem 0 .5rem}
.cs main p{max-width:34rem}

/* ---- the embedded screen viewer ---- */

.screen-bar{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem 1.25rem;
  align-items:center;
  justify-content:space-between;
  margin:1.25rem 0 1rem;
  max-width:960px;
}

.chips{display:flex;flex-wrap:wrap;gap:.5rem}

.chip{
  border:0;
  cursor:pointer;
  font:500 13.5px var(--sans);
  padding:.5rem .875rem;
  border-radius:999px;
  text-align:left;
  background:var(--ground-hover);
  color:var(--ink-soft);
}
.chip:hover{background:#f4e9e4}
.chip.is-current{background:var(--ink);color:var(--ground)}

.screen-hint{
  margin:0;
  max-width:none;
  font:600 11.5px/1.4 var(--label);
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--ink-mid);
}

/* The frame crops; the inner block is scaled to the column by js/screens.js.
   Height is set in script from the same scale, so the frame never leaves a gap. */
.screen-frame{
  overflow:hidden;
  border-radius:6px;
  background:#EDEAE3;
  cursor:zoom-in;
  max-width:960px;
}

.screen-scale{width:960px;transform-origin:top left}

.screen-frame.is-zoomed{
  position:fixed;
  inset:0;
  z-index:60;
  overflow:auto;
  background:#14161c;
  border-radius:0;
  height:auto;
  cursor:zoom-out;
  -webkit-overflow-scrolling:touch;
}
.screen-frame.is-zoomed .screen-scale{transform:none}

.screen-close{
  position:fixed;
  top:1rem;
  right:1rem;
  z-index:70;
  cursor:pointer;
  border:0;
  border-radius:999px;
  background:var(--ground);
  color:var(--ink);
  padding:.625rem 1rem;
  font:600 13px/1 var(--label);
  letter-spacing:.1em;
  text-transform:uppercase;
  box-shadow:0 2px 10px rgba(0,0,0,.35);
}

.screen-nav{
  display:flex;
  flex-wrap:wrap;
  gap:1rem 1.5rem;
  align-items:center;
  margin-top:1rem;
  max-width:960px;
}

.screen-buttons{display:flex;gap:.5rem}

.stepbtn{
  cursor:pointer;
  border:1px solid var(--rule);
  background:var(--ground-hover);
  color:var(--ink);
  border-radius:.375rem;
  padding:.5rem .875rem;
  font:500 14px var(--sans);
}
.stepbtn:hover{background:#f4e9e4;border-color:var(--clay)}

.step-captions{flex:1;min-width:16rem}
.cs .step-caption{margin:0;font-size:14px;color:var(--ink-mid);max-width:52ch}

/* ---- role / scope / built-with ---- */

.facts{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));
  gap:1.5rem 2rem;
  padding:1.5rem 0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  margin:1.75rem 0 0;
}

.fact-label{
  margin:0 0 .5rem;
  max-width:none;
  font:600 12px/1 var(--label);
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--ink-mid);
}

.cs .fact-text{margin:0;max-width:none;font-size:15px;line-height:1.5;color:var(--ink-soft)}

/* ---- the three sections ---- */

.sections{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  gap:1.25rem;
  max-width:56rem;
  margin:0 0 1rem;
  /* Filled cards hang 5px left. See CLAUDE.md. */
  margin-left:-5px;
}

.section-card{
  background:var(--ground-hover);
  border:1px solid var(--rule);
  border-radius:.5rem;
  padding:1.125rem;
}

.card-title{font:700 17px/1.3 var(--sans);margin:.375rem 0}
.cs .card-text{margin:0;max-width:none;font-size:14.5px;line-height:1.5;color:var(--ink-soft)}

/* ---- decisions ---- */

.decisions{display:flex;flex-direction:column;gap:2rem;max-width:56rem;margin-top:1.75rem}

.decision{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));
  gap:1.25rem 2rem;
  padding-top:1.25rem;
  border-top:1px solid var(--rule);
}

.dec-tag{
  margin:0 0 .5rem;
  max-width:none;
  font:600 12px/1 var(--label);
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--ink-mid);
}

.dec-title{font:700 19px/1.25 var(--sans);letter-spacing:-.01em;margin:0 0 .5rem}
.cs .dec-did{margin:0;max-width:none;font-size:16px;line-height:1.55;color:var(--ink)}

.dec-instead{background:#f4e9e4;border-radius:.5rem;padding:1rem 1.125rem}

.dec-instead-label{
  margin:0 0 .5rem;
  max-width:none;
  font:600 12px/1 var(--label);
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--accent);
}

.cs .dec-rejected{margin:0 0 .5rem;max-width:none;font-size:15px;line-height:1.55;color:var(--ink);font-weight:500}
.cs .dec-why{margin:0;max-width:none;font-size:15px;line-height:1.55;color:var(--ink-soft)}

.cs .after-decisions{margin:2.5rem 0 0}

/* ---- pull quote ---- */

.pullquote{
  max-width:44rem;
  margin:1.75rem 0 0;
  padding:.25rem 0 .25rem 1.5rem;
  border-left:2px solid var(--rule);
}

.pullquote blockquote{
  margin:0;
  font:400 20px/1.5 var(--sans);
  color:var(--ink);
  text-wrap:pretty;
}

.pullquote figcaption{
  margin:.875rem 0 0;
  font:600 12px/1.4 var(--label);
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--ink-mid);
}

/* ---- transfers ---- */

.transfers{
  max-width:34rem;
  margin:0 0 1rem;
  padding-left:1.25rem;
  color:var(--ink-soft);
  display:flex;
  flex-direction:column;
  gap:.625rem;
}
.transfers strong{color:var(--ink)}

/* ---- test plan. Unfilled rows, so they stay at 0. ---- */

.plan{display:flex;flex-direction:column;gap:.875rem;max-width:44rem;margin-bottom:1rem}

.plan-row{
  display:grid;
  grid-template-columns:5.5rem minmax(0,1fr);
  gap:1rem;
  padding-bottom:.875rem;
  border-bottom:1px solid var(--rule);
}
.plan-last{padding-bottom:0;border-bottom:0}

.cs .plan-when{margin:0;max-width:none;font:600 13px/1.4 var(--label);color:var(--ink-mid)}
.cs .plan-what{margin:0;max-width:none;font-size:15.5px;line-height:1.55;color:var(--ink-soft)}
.plan-what strong{color:var(--ink)}

@media (max-width:480px){
  .plan-row{grid-template-columns:1fr;gap:.25rem}
}

/* ---- closing ---- */

.closing{
  margin-top:4rem;
  padding-top:1.75rem;
  border-top:5px solid var(--clay);
  max-width:44rem;
}
.cs .closing h2{margin:0 0 .75rem}
.cs .closing p{margin:0 0 1.5rem}

.closing-links{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center}

.closing-mail{
  font-size:1.0625rem;
  font-weight:600;
  border-bottom:2px solid var(--clay);
  padding-bottom:2px;
}

.closing-label{
  font:600 14px/1 var(--label);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
}


/* ---- other work: annotated slides ---- */

.slides{display:flex;flex-direction:column;margin-top:3rem}

.slide-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));
  gap:1.25rem 2.5rem;
  align-items:start;
  padding-top:1.75rem;
  border-top:1px solid var(--rule);
  margin-bottom:2.75rem;
}

.slide-fig{margin:0;min-width:0}

.slide-frame{
  aspect-ratio:16/9;
  background:#e6e2da;
  border:1px solid var(--rule);
  border-radius:6px;
  overflow:hidden;
}

.slide-frame img{display:block;width:100%;height:100%;object-fit:contain}

.slide-cap{
  margin-top:.625rem;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem .875rem;
  align-items:center;
}

.slide-num{
  font:600 12px/1.4 var(--label);
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--ink-mid);
}

.pass-toggle{display:flex;gap:.375rem}

.pass{
  cursor:pointer;
  border:1px solid var(--rule);
  border-radius:999px;
  padding:.3rem .7rem;
  font:500 12px var(--sans);
  background:var(--ground);
  color:var(--ink-soft);
}
.pass:hover{background:#f4e9e4}
.pass.is-current{background:var(--ink);color:var(--ground)}

.slide-note{min-width:0}

.note-move{
  margin:0 0 .5rem;
  max-width:none;
  font:600 12px/1 var(--label);
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--accent);
}

.note-title{font:700 19px/1.25 var(--sans);letter-spacing:-.01em;margin:0 0 .625rem}
.cs .note-body{margin:0;max-width:none;font-size:16px;line-height:1.55;color:var(--ink-soft)}

.carries{margin-top:1rem;padding-top:1.75rem;border-top:1px solid var(--rule);max-width:44rem}
.cs .carries h2{margin:0 0 .75rem}


/* Other Work's lede runs straight into two more paragraphs, so it sits
   closer to them than the case study's does. */
.ow .lede{margin-bottom:1rem}

/* Other Work: the first slide row carries its own rule 3rem below, so the
   facts block does not need a closing one. */
.ow .facts{border-bottom:0;padding-bottom:0;margin-bottom:1.5rem}

/* The rule above the slides sits the same 1.5rem from the facts text that
   the facts rule sits above it. */
.ow .slides{margin-top:0}

/* Other Work: the rule above "What carries over" spans the column as a
   section break; the text inside keeps its own measure. */
.ow .carries{max-width:none}
.ow .site-foot{margin-top:clamp(18px,2.2vw,30px)}