/* ==========================================================================
   Lakes Area Web Design
   Third distinct design system in the SwansonX network. Shares no CSS, no class
   names and no component shapes with swansonx.com (bone/navy, Instrument Serif)
   or brainerdwebdesign.com (pine/aqua, Bricolage Grotesque, rounded, contours).
   Here: dusk plum + rust on warm bone, Fraunces serif, squared corners, hard
   offset shadows, low sun-glow motif.
   ========================================================================== */

:root {
  /* raw palette */
  --plum-900: #191029;
  --plum-800: #241A2E;
  --plum-700: #33244B;
  --plum-600: #473465;
  --plum-400: #6D5A8C;

  --rust-700: #8F3415;
  --rust-600: #B4451F;
  --rust-500: #D25A28;
  --rust-300: #EE9A72;
  --rust-100: #F9DFD2;

  --gold-600: #A9761C;
  --gold-500: #C8912B;
  --gold-200: #EBD5A0;

  --bone:     #FBF6EE;
  --bone-2:   #F4ECDF;
  --bone-3:   #EBE0CD;
  --sand:     #DFCFB2;
  --white:    #FFFFFF;

  /* semantic - light */
  --page:      var(--bone);
  --page-2:    var(--bone-2);
  --page-3:    var(--bone-3);
  --panel:     var(--white);
  --panel-2:   var(--bone-2);
  --veil:      rgba(251, 246, 238, .88);

  --type:      var(--plum-900);
  --type-2:    #4A3D57;
  --type-3:    #6F6379;
  --line:      #DDD0BC;
  --line-hard: var(--plum-900);

  --key:       var(--rust-600);
  --key-hi:    var(--rust-500);
  --key-on:    var(--white);
  --key-wash:  var(--rust-100);

  --mark:      var(--gold-600);
  --mark-wash: #F6EBCF;

  --glow-a:    rgba(210, 90, 40, .16);
  --glow-b:    rgba(200, 145, 43, .12);

  --cast:      3px 3px 0 var(--plum-900);
  --cast-lg:   6px 6px 0 var(--plum-900);
  --cast-soft: 0 2px 10px rgba(25, 16, 41, .07);

  /* type */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tt:    ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;

  /* scale */
  --t-xs: clamp(.8rem, .78rem + .1vw, .86rem);
  --t-sm: clamp(.9rem, .87rem + .14vw, .97rem);
  --t-md: clamp(1rem, .97rem + .18vw, 1.08rem);
  --t-lg: clamp(1.15rem, 1.08rem + .34vw, 1.38rem);
  --t-xl: clamp(1.5rem, 1.32rem + .86vw, 2.1rem);
  --t-2x: clamp(1.9rem, 1.55rem + 1.7vw, 3rem);
  --t-3x: clamp(2.4rem, 1.7rem + 3.2vw, 4.3rem);
  --t-4x: clamp(2.9rem, 1.8rem + 5vw, 5.8rem);

  --pad:   clamp(1rem, .82rem + .8vw, 1.5rem);
  --bay:   clamp(3.6rem, 2.6rem + 4.6vw, 6.8rem);
  --wrap:  min(1140px, 100% - 2.5rem);
  --edge:  3px;

  --swing: cubic-bezier(.22, .68, .28, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-scheme="light"]) {
    --page:      var(--plum-900);
    --page-2:    var(--plum-800);
    --page-3:    #120B1E;
    --panel:     var(--plum-800);
    --panel-2:   var(--plum-700);
    --veil:      rgba(25, 16, 41, .88);

    --type:      #F2E9DC;
    --type-2:    #C3B5CE;
    --type-3:    #9587A2;
    --line:      #3B2C4E;
    --line-hard: #000000;

    --key:       var(--rust-300);
    --key-hi:    #F6C0A5;
    --key-on:    var(--plum-900);
    --key-wash:  #3A2033;

    --mark:      var(--gold-200);
    --mark-wash: #322613;

    --glow-a:    rgba(238, 154, 114, .13);
    --glow-b:    rgba(235, 213, 160, .08);

    --cast:      3px 3px 0 #000;
    --cast-lg:   6px 6px 0 #000;
    --cast-soft: 0 2px 12px rgba(0, 0, 0, .45);
  }
}

:root[data-scheme="dark"] {
  --page:      var(--plum-900);
  --page-2:    var(--plum-800);
  --page-3:    #120B1E;
  --panel:     var(--plum-800);
  --panel-2:   var(--plum-700);
  --veil:      rgba(25, 16, 41, .88);

  --type:      #F2E9DC;
  --type-2:    #C3B5CE;
  --type-3:    #9587A2;
  --line:      #3B2C4E;
  --line-hard: #000000;

  --key:       var(--rust-300);
  --key-hi:    #F6C0A5;
  --key-on:    var(--plum-900);
  --key-wash:  #3A2033;

  --mark:      var(--gold-200);
  --mark-wash: #322613;

  --glow-a:    rgba(238, 154, 114, .13);
  --glow-b:    rgba(235, 213, 160, .08);

  --cast:      3px 3px 0 #000;
  --cast-lg:   6px 6px 0 #000;
  --cast-soft: 0 2px 12px rgba(0, 0, 0, .45);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--sans);
  font-size: var(--t-md);
  line-height: 1.66;
  color: var(--type);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--mark); outline-offset: 3px; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.012em;
  font-variation-settings: "SOFT" 20, "WONK" 1;
  text-wrap: balance;
}
p { text-wrap: pretty; }

.wrap { width: var(--wrap); margin-inline: auto; }
.bay { padding-block: var(--bay); }
.jump {
  position: absolute; left: -9999px;
  background: var(--key); color: var(--key-on);
  padding: .7rem 1.1rem; font-weight: 700; z-index: 100;
}
.jump:focus { left: 0; }

/* ---------- tag ---------- */
.tag {
  font-family: var(--tt);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--key);
  font-weight: 600;
  display: block;
  margin-bottom: .85rem;
}
.tag::before { content: "// "; opacity: .55; }

/* ---------- buttons ---------- */
.act {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .88rem 1.5rem;
  border: 2px solid var(--line-hard);
  border-radius: var(--edge);
  font-family: var(--sans);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  background: var(--panel);
  color: var(--type);
  box-shadow: var(--cast);
  transition: transform .16s var(--swing), box-shadow .16s var(--swing),
              background .16s var(--swing);
}
.act:hover { transform: translate(-2px, -2px); box-shadow: var(--cast-lg); }
.act:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--line-hard); }
.act-key { background: var(--key); color: var(--key-on); }
.act-key:hover { background: var(--key-hi); }
.act-big { padding: 1.05rem 1.9rem; font-size: var(--t-lg); }

/* ---------- header ---------- */
.top {
  position: sticky; top: 0; z-index: 50;
  background: var(--veil);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border-bottom: 2px solid var(--line-hard);
}
.top-in { display: flex; align-items: center; gap: 1rem; padding-block: .8rem; }
.sig {
  display: flex; align-items: center; gap: .65rem;
  font-family: var(--serif); font-weight: 700;
  font-size: var(--t-lg); letter-spacing: -.02em;
  text-decoration: none; color: var(--type); flex: none;
}
.sig img { width: 36px; height: 36px; flex: none; }
.sig b { display: block; font-weight: 700; line-height: 1.05; }
.sig i {
  display: block; font-style: normal; font-family: var(--tt);
  font-size: .56em; letter-spacing: .12em; text-transform: uppercase;
  color: var(--type-3); font-weight: 500;
}

.ways { margin-left: auto; display: flex; align-items: center; gap: .2rem; }
.ways a {
  padding: .5rem .8rem; text-decoration: none;
  color: var(--type-2); font-weight: 600; font-size: var(--t-sm);
  border: 2px solid transparent; border-radius: var(--edge);
  transition: color .15s var(--swing), border-color .15s var(--swing);
}
.ways a:hover, .ways a[aria-current="page"] { color: var(--key); border-color: var(--key); }
.ways .act { margin-left: .5rem; padding: .55rem 1.1rem; font-size: var(--t-sm); }

.knob {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border: 2px solid var(--line-hard); border-radius: var(--edge);
  background: var(--panel); cursor: pointer;
  box-shadow: var(--cast);
  transition: transform .16s var(--swing), box-shadow .16s var(--swing);
}
.knob:hover { transform: translate(-2px, -2px); box-shadow: var(--cast-lg); }
.burger { display: none; }

@media (max-width: 920px) {
  .burger { display: grid; margin-left: auto; }
  .ways {
    position: fixed; inset: 68px 0 auto; margin: 0;
    flex-direction: column; align-items: stretch; gap: .3rem;
    background: var(--panel);
    border-bottom: 2px solid var(--line-hard);
    padding: 1rem 1.25rem 1.6rem;
    transform: translateY(-125%); transition: transform .3s var(--swing);
  }
  .ways[data-open="true"] { transform: none; }
  .ways a { padding: .8rem 1rem; font-size: var(--t-md); }
  .ways .act { margin: .5rem 0 0; padding: .85rem 1.2rem; font-size: var(--t-md); }
}

/* ---------- sun glow motif ---------- */
.glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.glow::before, .glow::after {
  content: ""; position: absolute; border-radius: 50%;
}
.glow::before {
  width: 78vw; height: 78vw; max-width: 900px; max-height: 900px;
  left: 50%; bottom: -46%;
  transform: translateX(-50%);
  background: radial-gradient(circle, var(--glow-a) 0%, transparent 66%);
}
.glow::after {
  width: 52vw; height: 52vw; max-width: 620px; max-height: 620px;
  right: -12%; top: -22%;
  background: radial-gradient(circle, var(--glow-b) 0%, transparent 68%);
}
.horizon {
  position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom, transparent 0 22px, var(--line) 22px 23px);
  opacity: .4;
  mask-image: linear-gradient(to bottom, transparent, #000 78%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 78%);
}

/* ---------- opener ---------- */
.opener { position: relative; overflow: hidden; background: var(--page-2);
  border-bottom: 2px solid var(--line-hard); }
.opener-in { position: relative; z-index: 1; padding-block: clamp(3.4rem, 2rem + 7vw, 7.5rem); }
.opener h1 { font-size: var(--t-4x); margin-bottom: 1.2rem; }
.opener h1 em {
  font-style: italic; color: var(--key);
  font-variation-settings: "SOFT" 60, "WONK" 1;
}
.opener .say { font-size: var(--t-lg); color: var(--type-2); max-width: 46ch; margin-bottom: 1.9rem; }
.opener-acts { display: flex; flex-wrap: wrap; gap: .8rem; }

.season {
  margin-top: 2.6rem; border: 2px solid var(--line-hard); border-radius: var(--edge);
  background: var(--panel); box-shadow: var(--cast-lg); overflow: hidden;
}
.season h2 {
  font-family: var(--tt); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--type-3);
  padding: .8rem var(--pad); border-bottom: 2px solid var(--line-hard);
  background: var(--panel-2);
}
.months { display: grid; grid-template-columns: repeat(12, 1fr); }
.months div {
  padding: .9rem .2rem; text-align: center;
  font-family: var(--tt); font-size: var(--t-xs); font-weight: 600;
  border-right: 1px solid var(--line); color: var(--type-3);
}
.months div:last-child { border-right: 0; }
.months div[data-peak] { background: var(--key-wash); color: var(--key); }
.months div[data-shoulder] { background: var(--mark-wash); color: var(--mark); }
.season p { padding: var(--pad); font-size: var(--t-sm); color: var(--type-2); border-top: 1px solid var(--line); }

/* ---------- ticker ---------- */
.ticker { border-bottom: 2px solid var(--line-hard); background: var(--plum-900); color: var(--bone);
  overflow: hidden; padding-block: .7rem; }
.ticker-run { display: flex; width: max-content; animation: run 44s linear infinite; }
.ticker:hover .ticker-run { animation-play-state: paused; }
.ticker span {
  font-family: var(--tt); font-size: var(--t-xs); letter-spacing: .13em;
  text-transform: uppercase; white-space: nowrap;
  padding-inline: 1.5rem; display: flex; align-items: center; gap: 1.5rem;
}
.ticker span::after { content: "▲"; color: var(--rust-300); font-size: .6em; }
@keyframes run { to { transform: translateX(-50%); } }

/* ---------- headings block ---------- */
.lead-in { max-width: 60ch; margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.2rem); }
.lead-in h2 { font-size: var(--t-3x); margin-bottom: .85rem; }
.lead-in p { font-size: var(--t-lg); color: var(--type-2); }

/* ---------- panels ---------- */
.cols { display: grid; gap: clamp(1rem, .8rem + .8vw, 1.5rem); }
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr)); }
.cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 265px), 1fr)); }

.panel {
  background: var(--panel);
  border: 2px solid var(--line-hard);
  border-radius: var(--edge);
  padding: clamp(1.3rem, 1rem + 1.2vw, 1.9rem);
  box-shadow: var(--cast);
  position: relative;
  transition: transform .18s var(--swing), box-shadow .18s var(--swing);
}
.panel::before {
  content: ""; position: absolute; inset: -2px -2px auto; height: 6px;
  background: var(--key); border-radius: var(--edge) var(--edge) 0 0;
}
.panel:hover { transform: translate(-3px, -3px); box-shadow: var(--cast-lg); }
.panel h3 { font-size: var(--t-xl); margin: .6rem 0 .55rem; }
.panel p { color: var(--type-2); }
.panel .no {
  font-family: var(--tt); font-size: var(--t-xs); font-weight: 700;
  color: var(--mark); letter-spacing: .12em;
}
.panel-flat { box-shadow: none; }
.panel-flat:hover { transform: none; box-shadow: var(--cast); }

/* ---------- ladder (numbered process) ---------- */
.ladder { counter-reset: rung; border-top: 2px solid var(--line-hard); }
.rung {
  counter-increment: rung;
  display: grid; gap: 1rem 1.4rem;
  grid-template-columns: auto 1fr;
  padding-block: 1.7rem;
  border-bottom: 1px solid var(--line);
}
.rung::before {
  content: counter(rung);
  font-family: var(--serif); font-weight: 700; font-size: var(--t-xl);
  color: var(--key); border: 2px solid var(--line-hard); border-radius: var(--edge);
  width: 52px; height: 52px; display: grid; place-items: center;
  background: var(--panel); box-shadow: var(--cast);
}
.rung h3 { font-size: var(--t-xl); margin-bottom: .35rem; }
.rung p { color: var(--type-2); }

/* ---------- figures ---------- */
.figures { display: grid; gap: clamp(1rem, .8rem + .8vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.figure {
  border: 2px solid var(--line-hard); border-radius: var(--edge);
  background: var(--panel); padding: 1.5rem 1rem; text-align: center;
  box-shadow: var(--cast);
}
.figure b {
  display: block; font-family: var(--serif); font-weight: 700;
  font-size: var(--t-3x); line-height: 1; color: var(--key);
  letter-spacing: -.03em; margin-bottom: .4rem;
}
.figure span { font-size: var(--t-xs); color: var(--type-3); font-weight: 600;
  font-family: var(--tt); letter-spacing: .08em; text-transform: uppercase; }

/* ---------- rate list (instead of a table) ---------- */
.rates { border: 2px solid var(--line-hard); border-radius: var(--edge);
  background: var(--panel); box-shadow: var(--cast-lg); overflow: hidden; }
.rate {
  display: grid; gap: .3rem 1.2rem; grid-template-columns: 1fr auto;
  padding: 1.15rem var(--pad);
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.rate:last-child { border-bottom: 0; }
.rate:nth-child(odd) { background: var(--panel-2); }
.rate dt { font-weight: 700; }
.rate dd { font-family: var(--serif); font-weight: 700; font-size: var(--t-xl);
  color: var(--key); letter-spacing: -.02em; }
.rate small { grid-column: 1 / -1; color: var(--type-3); font-size: var(--t-sm); }

/* ---------- pull quote ---------- */
.pull {
  border: 2px solid var(--line-hard); border-radius: var(--edge);
  background: var(--plum-800); color: var(--bone);
  padding: clamp(1.8rem, 1.3rem + 2.4vw, 3.2rem);
  box-shadow: var(--cast-lg); position: relative; overflow: hidden;
}
.pull q {
  font-family: var(--serif); font-size: var(--t-xl); line-height: 1.36;
  quotes: none; display: block; margin-bottom: 1.2rem;
  font-variation-settings: "SOFT" 40, "WONK" 1;
}
.pull footer { font-size: var(--t-sm); color: var(--rust-300); font-weight: 700;
  font-family: var(--tt); letter-spacing: .08em; text-transform: uppercase; }

/* ---------- q&a ---------- */
.qa { border-top: 2px solid var(--line-hard); }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 1.3rem 2.6rem 1.3rem 0;
  font-family: var(--serif); font-size: var(--t-lg); font-weight: 700;
  transition: color .15s var(--swing);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--key); }
.qa summary::after {
  content: "▸"; position: absolute; right: .5rem; top: 50%;
  transform: translateY(-50%); color: var(--key); font-size: 1.1rem;
  transition: transform .22s var(--swing);
}
.qa details[open] summary::after { transform: translateY(-50%) rotate(90deg); }
.qa details p { padding-bottom: 1.3rem; color: var(--type-2); max-width: 66ch; }
.qa details p + p { margin-top: .75rem; }

/* ---------- callout ---------- */
.callout { background: var(--plum-900); color: var(--bone); position: relative;
  overflow: hidden; border-block: 2px solid var(--line-hard); }
.callout h2 { font-size: var(--t-3x); color: var(--bone); margin-bottom: .8rem; }
.callout p { color: var(--rust-300); font-size: var(--t-lg); max-width: 52ch; margin-bottom: 1.7rem; }
.callout .act { border-color: #000; }
.callout .act-key { background: var(--rust-500); color: #fff; }
.callout .act-key:hover { background: var(--rust-300); color: var(--plum-900); }
.callout .act-plain { background: transparent; color: var(--bone); border-color: var(--rust-300); }
.callout .act-plain:hover { background: var(--rust-300); color: var(--plum-900); }

/* ---------- places ---------- */
.places { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; list-style: none; }
.places li span {
  display: inline-block; padding: .42rem .9rem;
  border: 2px solid var(--line); border-radius: var(--edge);
  font-family: var(--tt); font-size: var(--t-xs); font-weight: 600;
  color: var(--type-2); background: var(--panel);
}

/* ---------- form ---------- */
.ask { display: grid; gap: 1.05rem; }
.slot { display: grid; gap: .4rem; }
.slot label { font-weight: 700; font-size: var(--t-sm); }
.slot label span { color: var(--type-3); font-weight: 400; }
.slot input, .slot select, .slot textarea {
  padding: .8rem .95rem; width: 100%;
  border: 2px solid var(--line-hard); border-radius: var(--edge);
  background: var(--panel); color: var(--type);
  transition: box-shadow .15s var(--swing);
}
.slot input:focus, .slot select:focus, .slot textarea:focus {
  outline: none; box-shadow: var(--cast);
}
.slot textarea { resize: vertical; min-height: 128px; }
.fine { font-size: var(--t-sm); color: var(--type-3); }
.result { padding: .85rem 1rem; border: 2px solid var(--line-hard); border-radius: var(--edge);
  font-weight: 600; font-size: var(--t-sm); }
.result[data-r="ok"]  { background: var(--key-wash); color: var(--key); }
.result[data-r="no"]  { background: #FBE4E1; color: #8F2A1B; }
:root[data-scheme="dark"] .result[data-r="no"] { background: #3B1A15; color: #F6B6A8; }

/* ---------- footer ---------- */
.base { background: var(--plum-900); color: #C6B9CF; padding-block: clamp(2.8rem, 2rem + 3vw, 4.2rem) 1.8rem;
  border-top: 2px solid var(--line-hard); }
.base a { color: #C6B9CF; text-decoration: none; }
.base a:hover { color: var(--rust-300); }
.base-grid { display: grid; gap: 2.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.base h4 { font-family: var(--tt); font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: .13em; color: var(--rust-300); margin-bottom: .9rem; font-weight: 600; }
.base ul { list-style: none; padding: 0; display: grid; gap: .5rem; font-size: var(--t-sm); }
.base-sig p { font-size: var(--t-sm); color: #9587A2; max-width: 32ch; margin-top: .8rem; }
.base-end { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid #33244B;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: var(--t-xs); color: #8A7B96; font-family: var(--tt); }

/* ---------- rise animation ---------- */
.rise { opacity: 0; transform: translateY(18px); }
.rise.up { opacity: 1; transform: none; transition: opacity .6s var(--swing), transform .6s var(--swing); }
.rise.up[data-lag="1"] { transition-delay: .08s; }
.rise.up[data-lag="2"] { transition-delay: .16s; }
.rise.up[data-lag="3"] { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; }
  .ticker-run { animation: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- prose ---------- */
.words { max-width: 66ch; }
.words h2 { font-size: var(--t-2x); margin: 2.3rem 0 .8rem; }
.words h3 { font-size: var(--t-xl); margin: 1.8rem 0 .6rem; }
.words p { margin-bottom: 1.05rem; color: var(--type-2); }
.words ul { margin: 0 0 1.2rem 1.1rem; color: var(--type-2); display: grid; gap: .45rem; }
.words strong { color: var(--type); }
.words a { color: var(--key); text-decoration: underline; text-underline-offset: 3px; }

.say-big { font-size: var(--t-lg); color: var(--type-2); }
.gap { margin-top: 2rem; }

/* ---------- work: plates and dossiers ----------
   Screenshot on top, the read underneath. Stacked rather than side by side,
   so the shot is the full width of the plate and the whole thing reads as a
   printed sheet with a hard shadow behind it. */
.reel { display: grid; gap: clamp(1.6rem, 1.2rem + 1.8vw, 2.8rem); }

.plate {
  border: 2px solid var(--line-hard); border-radius: var(--edge);
  background: var(--panel); box-shadow: var(--cast-lg); overflow: hidden;
  transition: transform .18s var(--swing), box-shadow .18s var(--swing);
}
.plate:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--plum-900); }

.plate-shot { margin: 0; border-bottom: 2px solid var(--line-hard); background: var(--page-3); }
.plate-shot img { display: block; width: 100%; height: auto; }

.plate-say { padding: clamp(1.3rem, 1rem + 1.4vw, 2.1rem); }
.plate-say h3 { font-size: var(--t-2x); margin: .5rem 0 .7rem; }
.plate-say p { color: var(--type-2); max-width: 68ch; }

.plate-kind {
  font-family: var(--tt); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--mark);
}
.plate-ways { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin-top: 1rem; }
.plate-ways a {
  font-family: var(--tt); font-size: var(--t-sm); font-weight: 700;
  letter-spacing: .04em; color: var(--key); text-decoration: none;
  border-bottom: 2px solid var(--key-wash); padding-bottom: 3px;
}
.plate-ways a:hover { border-bottom-color: var(--key); }

/* case study page */
.dossier-shot { margin: 0 0 clamp(1.5rem, 1.2rem + 1.4vw, 2.4rem); }
.dossier-shot img {
  display: block; width: 100%; height: auto;
  border: 2px solid var(--line-hard); border-radius: var(--edge);
  box-shadow: var(--cast-lg);
}
.dossier-shot figcaption {
  margin-top: .8rem; font-family: var(--tt); font-size: var(--t-xs);
  letter-spacing: .06em; text-transform: uppercase; color: var(--type-3);
}

.specs {
  list-style: none; padding: 0;
  display: grid; gap: clamp(.8rem, .6rem + .6vw, 1.2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  margin: 0 0 clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);
}
.spec {
  border: 2px solid var(--line-hard); border-radius: var(--edge);
  background: var(--panel); box-shadow: var(--cast); padding: 1.1rem 1.2rem;
}
.spec b {
  display: block; font-family: var(--tt); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--type-3);
  margin-bottom: .45rem;
}
.spec span { color: var(--type); font-weight: 700; }

.retrace {
  display: inline-block; margin-bottom: 1.1rem;
  font-family: var(--tt); font-size: var(--t-sm); font-weight: 700;
  letter-spacing: .05em; color: var(--type-3); text-decoration: none;
}
.retrace:hover { color: var(--key); }

.plate-shot picture, .dossier-shot picture { display: block; }