/*
  Light, Motion & Depth: page styles.
  Every rule is scoped to .lmd-page so nothing leaks into a surrounding portfolio.
  Values are copied unchanged from the published artifact; only selectors were prefixed.
  Fonts are loaded from ./fonts.css (self-hosted, SIL OFL).
*/

/* ---- Design tokens (light is the default) ---- */
.lmd-page{
  --bg:#ECE9E4; --paper:#F6F4F0; --ink:#1C1B19; --muted:#6E6A63; --line:#D3CEC6;
  --accent:#B3372C; --bar:#C9C3BA; --dot:#1C1B19;
  --display:"Libre Caslon Display", "Bodoni 72", Didot, Georgia, serif;
  --sans:"Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}
/* Dark palette: follows the OS setting unless the host page forces a theme
   with data-theme="light" / data-theme="dark" on <html>. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .lmd-page{
    color-scheme:dark;
    --bg:#131211; --paper:#1C1A18; --ink:#ECE7DF; --muted:#A39D93; --line:#34302B;
    --accent:#E36A5C; --bar:#3E3934; --dot:#ECE7DF;
  }
}
:root[data-theme="dark"] .lmd-page{
  color-scheme:dark;
  --bg:#131211; --paper:#1C1A18; --ink:#ECE7DF; --muted:#A39D93; --line:#34302B;
  --accent:#E36A5C; --bar:#3E3934; --dot:#ECE7DF;
}

/* ---- Base ---- */
.lmd-page, .lmd-page *{box-sizing:border-box}
.lmd-page{background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.6; margin:0}
.lmd-page [hidden]{display:none!important}
.lmd-page img{max-width:100%; display:block; height:auto}
.lmd-page figure{margin:0}
.lmd-page p{margin:0}
.lmd-page .wrap{max-width:1180px; margin:0 auto; padding-inline:28px}
.lmd-page h1,.lmd-page h2,.lmd-page h3{margin:0; font-weight:400; text-wrap:balance; line-height:1.05}
.lmd-page h1,.lmd-page h2{font-family:var(--display)}
.lmd-page h2{font-size:clamp(2.2rem,4.6vw,3.6rem)}
.lmd-page h3{font-family:var(--display); font-size:clamp(1.7rem,2.8vw,2.3rem)}
.lmd-page .eyebrow{font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent)}
.lmd-page .lede{font-size:1.15rem; color:var(--muted); max-width:60ch}
.lmd-page .mono{font-family:var(--mono)}
.lmd-page section{padding-block:96px; border-top:1px solid var(--line)}
.lmd-page .sec-head{display:grid; gap:14px; max-width:780px; margin-bottom:56px}
.lmd-page :focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* ---- Hero ---- */
.lmd-page .hero{padding-block:72px 64px}
.lmd-page .hero h1{font-size:clamp(3.4rem,9vw,7.6rem); letter-spacing:-.01em; line-height:.95}
.lmd-page .hero h1 em{font-style:italic; color:var(--accent)}
.lmd-page .hero .lede{margin-top:26px; font-size:1.25rem}
.lmd-page .meta{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; margin-top:44px; padding-top:22px; border-top:1px solid var(--line)}
.lmd-page .meta dt{font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.lmd-page .meta dd{margin:4px 0 0; font-size:.95rem}

.lmd-page .strip{margin-top:56px; background:#141312; padding:14px 14px 10px; border-radius:2px}
.lmd-page .strip-frames{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.lmd-page .strip-frames a{display:block; text-decoration:none; color:inherit}
.lmd-page .strip-frames img{aspect-ratio:4/5; object-fit:cover; width:100%}
.lmd-page .strip-frames span{display:flex; justify-content:space-between; font-family:var(--mono); font-size:.68rem; color:#E7A13E; letter-spacing:.08em; padding-top:8px}
.lmd-page .strip-frames span b{font-weight:500; color:#BDB6AB}

/* ---- Thesis ---- */
.lmd-page .thesis{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--ink)}
.lmd-page .thesis > div{padding:24px 26px 8px 0; display:grid; gap:10px; align-content:start}
.lmd-page .thesis > div + div{padding-left:26px; border-left:1px solid var(--line)}
.lmd-page .thesis h3{font-size:1.6rem}
.lmd-page .thesis p{color:var(--muted); font-size:.98rem}
.lmd-page .thesis .k{font-family:var(--mono); font-size:.72rem; color:var(--accent); letter-spacing:.1em}

/* ---- Plates ---- */
.lmd-page .pair{display:grid; gap:88px}
.lmd-page .plate{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:48px; align-items:center}
.lmd-page .plate.tall{grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}
.lmd-page .plate.flip > figure{order:2}
.lmd-page .plate figure img{width:100%}
.lmd-page .plate.tall figure{width:100%; max-width:calc(80vh * .563); margin-inline:auto}
.lmd-page .card{display:grid; gap:16px; align-content:start}
.lmd-page .card .tag{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.lmd-page .card .tag b{color:var(--accent); font-weight:500}
.lmd-page .card p{color:var(--muted); max-width:46ch}
.lmd-page .card p strong{color:var(--ink); font-weight:500}
.lmd-page .exif{font-family:var(--mono); font-size:.8rem; color:var(--ink); display:flex; flex-wrap:wrap; gap:6px 16px; padding-block:12px; border-block:1px solid var(--line); font-variant-numeric:tabular-nums}
.lmd-page .exif span{color:var(--muted)}

/* Settings scales: --p on .track is the marker position (0% = left end). */
.lmd-page .scales{display:grid; gap:12px; margin-top:4px}
.lmd-page .scale{display:grid; grid-template-columns:5.4em 1fr; gap:12px; align-items:center; font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.lmd-page .track{position:relative; height:22px}
.lmd-page .track::before{content:""; position:absolute; left:0; right:0; top:10px; height:2px; background:var(--bar)}
.lmd-page .track i{position:absolute; top:5px; width:12px; height:12px; margin-left:-6px; border-radius:50%; background:var(--dot); left:var(--p)}
.lmd-page .scale.push .track i{background:var(--accent); width:14px; height:14px; margin-left:-7px; top:4px; box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent)}
.lmd-page .scale.push > span{color:var(--accent)}
.lmd-page .ends{display:flex; justify-content:space-between; font-size:.6rem; letter-spacing:.04em; text-transform:none; position:absolute; left:0; right:0; top:14px; padding-top:6px}
.lmd-page .scale .track{margin-bottom:12px}

.lmd-page .group-label{display:flex; align-items:baseline; gap:18px; margin-bottom:40px; padding-bottom:14px; border-bottom:1px solid var(--ink)}
.lmd-page .group-label h2{font-size:clamp(2rem,4vw,3rem)}
.lmd-page .group-label .mono{font-size:.75rem; color:var(--muted); letter-spacing:.1em}
.lmd-page .group + .group{margin-top:110px}

/* ---- Portraits ---- */
.lmd-page .portraits{display:grid; grid-template-columns:1fr 1fr; gap:40px}
.lmd-page .portraits .card{margin-top:22px}

/* ---- What I'd push next ---- */
.lmd-page .next{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
.lmd-page .next > div{background:var(--paper); border:1px solid var(--line); padding:24px; display:grid; gap:10px; align-content:start}
.lmd-page .next h3{font-size:1.45rem}
.lmd-page .next p{color:var(--muted); font-size:.96rem}
.lmd-page .next .k{font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent)}

/* ---- Footer ---- */
.lmd-page footer{border-top:1px solid var(--line); padding-block:44px; color:var(--muted); font-size:.9rem}
.lmd-page footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px}
.lmd-page footer strong{font-family:var(--display); font-weight:400; font-size:1.4rem; color:var(--ink)}

/* ---- Responsive ---- */
@media (max-width:900px){
  .lmd-page .plate,.lmd-page .plate.tall{grid-template-columns:1fr; gap:28px}
  .lmd-page .plate.flip > figure{order:0}
  .lmd-page .plate.tall figure{max-width:calc(75vh * .563)}
  .lmd-page .thesis,.lmd-page .next{grid-template-columns:1fr}
  .lmd-page .thesis > div,.lmd-page .thesis > div + div{padding:20px 0; border-left:0; border-bottom:1px solid var(--line)}
  .lmd-page .portraits{grid-template-columns:1fr}
  .lmd-page .meta{grid-template-columns:1fr 1fr}
  .lmd-page section{padding-block:68px}
}
@media (max-width:560px){
  .lmd-page{font-size:16px}
  .lmd-page .wrap{padding-inline:18px}
  .lmd-page .strip-frames{grid-template-columns:1fr 1fr}
  .lmd-page .group-label{flex-direction:column; gap:6px}
}