/* minmax.css -- a component framework for interfaces built out of text.
   no javascript, no build, no classes. link it and write semantic html.

     1ch  one column      1lh  one row

   three ideas carry the whole thing:

   1. the browser already has a layout engine. ch and lh are the character
      grid, so grid and flex do the work a text-ui library would hand-roll.
   2. the dom is the accessibility tree. glyphs live in ::before/::after
      with empty alt text, so a screen reader hears content, never boxes.
   3. state is never re-declared. the native or aria state IS the selector,
      so appearance cannot drift from what assistive tech is told.

   a pseudo-element renders one run, but \A is a newline inside it -- so a
   run can be a column as easily as a line. that is where rails and boxes
   come from. */

@layer minmax {

/* ============ tokens ================================================== */
/* css cannot repeat a string, so runs are literal. they are data, not
   logic, and two kilobytes of one repeated byte gzips to about forty. */
:root {
  color-scheme: light dark;
  --canvas: 80;               /* columns */
  --gap: 1;                   /* blank lines between blocks */
  --gutter: 3;                /* columns between table cells */
  --hair: 1px;
  --rule:"────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────";
  --rule2:"════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════";
  --dots:"........................................................................................................................................................................................................";
  --full:"████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████";
  --shade:"░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░";
  --col:"│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A│\A";
  --tl:"┌"; --tr:"┐"; --bl:"└"; --br:"┘";
  --branch:"├─ "; --last:"└─ ";
  --swoff:"[ ░░██ ]"; --swon:"[ ██░░ ]";
  --off:"[ ] "; --on:"[x] "; --mix:"[-] ";
  --roff:"( ) "; --ron:"(*) ";
  --idle:"   "; --mark:">  ";
}

/* ============ theme =================================================== */
/* two entry points, one declaration: a data attribute for apps, and a
   plain <select> for pages that would rather not ship any script at all. */
:is([data-charset=ascii], body:has(select[name=charset] option[value=ascii]:checked)) {
  --rule:"--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------";
  --rule2:"========================================================================================================================================================================================================";
  --dots:"........................................................................................................................................................................................................";
  --full:"########################################################################################################################################################################################################";
  --shade:"........................................................................................................................................................................................................";
  --col:"|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A|\A";
  --tl:"+"; --tr:"+"; --bl:"+"; --br:"+";
  --branch:"+- "; --last:"\\- ";
  --swoff:"[ ..## ]"; --swon:"[ ##.. ]";
}
:is([data-density=compact], body:has(select[name=density] option[value=compact]:checked))
  { --gap:0; --gutter:2 }
:is([data-density=airy], body:has(select[name=density] option[value=airy]:checked))
  { --gap:2; --gutter:4 }
:is([data-canvas="40"],  body:has(select[name=canvas] option[value="40"]:checked))  { --canvas:40 }
:is([data-canvas="64"],  body:has(select[name=canvas] option[value="64"]:checked))  { --canvas:64 }
:is([data-canvas="100"], body:has(select[name=canvas] option[value="100"]:checked)) { --canvas:100 }
:is([data-canvas="120"], body:has(select[name=canvas] option[value="120"]:checked)) { --canvas:120 }

/* ============ grid ==================================================== */
*, *::before, *::after { box-sizing:border-box }

body {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "DejaVu Sans Mono", monospace;
  line-height: 1.45;
  inline-size: calc(var(--canvas) * 1ch);
  max-inline-size: 100%;
  margin-inline: auto;
  padding-block: 2lh;
  container-type: inline-size;
  text-wrap: pretty;
}

:where(h1,h2,h3,p,ul,ol,dl,table,pre,hr,figure,form,fieldset,footer,section,blockquote)
  { margin:0 0 calc(var(--gap) * 1lh); font:inherit; border:0; padding:0 }
li > :is(ul,ol,p) { margin-block-end:0 }   /* a nested list is more rows, not a new block */

/* focus is reverse video, the way a terminal has always shown it. the glyph
   gutters cannot carry focus for links and inputs; this can, and it inverts
   with the colour scheme for free. */
:focus-visible { outline:none; color:Canvas; background:CanvasText }

/* ============ type ==================================================== */
/* lowercase costs a level of hierarchy, so isolation and rule weight carry
   it instead: h2 is a bare word, h3 is a word with a rule under it. */
h1 { letter-spacing:1ch; margin-block-end:calc((var(--gap) + 1) * 1lh) }
h2 { margin-block-start:calc((var(--gap) + 1) * 1lh) }
h3::after { content:var(--rule) / ""; display:block; overflow:clip }
h4 { font:inherit; margin:0 } h4 + * { margin-inline-start:2ch }
:is(small,mark,strong,em,b,i) { font:inherit; background:none; color:inherit }
kbd { font:inherit } kbd::before { content:"[" / "" } kbd::after { content:"]" / "" }
[data-badge]::before { content:"<" / "" } [data-badge]::after { content:">" / "" }

hr { overflow:clip; margin-block:calc(var(--gap) * 1lh) }
hr::before { content:var(--rule) / "" }
hr[data-weight=double]::before { content:var(--rule2) / "" }

/* ============ rails =================================================== */
:is(blockquote,[data-rail]) { position:relative; padding-inline-start:3ch }
:is(blockquote,[data-rail])::before {
  content:var(--col) / ""; position:absolute; inset-block:0; inset-inline-start:0;
  white-space:pre; overflow:clip }

/* ============ leaders ================================================= */
/* the leader is a clipped run, so it always ends exactly on the value */
dl > div { display:flex }
dt { flex:1; display:flex; min-inline-size:0 }
dt::after { content:var(--dots) / ""; flex:1; min-inline-size:0; overflow:clip;
            margin-inline:1ch }
dd { margin:0 }

/* ============ lists and trees ========================================= */
ul { list-style:none; padding-inline-start:2ch }
ul > li::before { content:"- " / "" }
ol { padding-inline-start:4ch }
:is(nav,[role=tree],[data-timeline],[data-plain]) li::before { content:none }
:is(nav,[role=tree],[data-timeline],[data-plain]) ul { padding-inline-start:0 }

:is([role=tree],[data-timeline]) { list-style:none; padding-inline-start:0 }
:is([role=tree],[data-timeline]) li { position:relative }
:is([role=tree],[data-timeline]) li::before { content:var(--branch) / "" }
:is([role=tree],[data-timeline]) li:last-child::before { content:var(--last) / "" }
[role=tree] li :is(ul,ol) { padding-inline-start:3ch }
[role=tree] > :is(p,ul,ol) { margin-block-end:0 }
/* the rail belongs to the item it continues past, so the last item simply
   has none. no mask, no z-index, no dependency on the page background. */
:is([role=tree],[data-timeline]) li:not(:last-child)::after {
  content:var(--col) / ""; position:absolute; inset-block:1lh 0;
  inset-inline-start:0; white-space:pre; overflow:clip }
/* marker plus time is a fixed gutter; wrapped lines hang to it */
[data-timeline] li { padding-inline-start:11ch; text-indent:-11ch }
[data-timeline] time { display:inline-block; inline-size:8ch; text-indent:0 }

/* ============ tables ================================================== */
table { border-collapse:collapse; inline-size:100% }
:is(th,td) { font:inherit; text-align:start; white-space:nowrap;
             padding:0 calc(var(--gutter) * 1ch) 0 0 }
:is(th,td):last-child { padding-inline-end:0 }
thead tr { border-block-end:var(--hair) solid }
tfoot tr { border-block-start:var(--hair) solid }
[data-num] { text-align:end }

/* ============ controls ================================================ */
button { font:inherit; color:inherit; background:none; border:0; padding:0;
         cursor:pointer; text-align:start }
button::before { content:var(--idle) "[ " / "" }
button::after  { content:" ]" / "" }
button:focus-visible::before { content:var(--mark) "[ " / "" }
button:active::before { content:var(--mark) "[(" / "" }
button:active::after  { content:")]" / "" }
button:disabled { text-transform:lowercase; cursor:default }
button:disabled::before { content:var(--idle) "( " / "" }
button:disabled::after  { content:" )" / "" }

input[type=checkbox], input[type=radio] {
  appearance:none; font:inherit; color:inherit; margin:0; inline-size:4ch }
input[type=checkbox]::before { content:var(--off) / "" }
input[type=checkbox]:checked::before { content:var(--on) / "" }
input[type=checkbox]:indeterminate::before { content:var(--mix) / "" }
input[type=radio]::before { content:var(--roff) / "" }
input[type=radio]:checked::before { content:var(--ron) / "" }
[role=switch] { inline-size:9ch }
[role=switch]::before { content:var(--swoff) / "" }
[role=switch]:checked::before { content:var(--swon) / "" }

*:has(> select)::after { content:"  v" / "" }
:is(input,select,textarea):not([type=checkbox],[type=radio]) {
  font:inherit; color:inherit; background:none; border:0; padding:0;
  field-sizing:content; min-inline-size:16ch }

/* the validation gutter is constraint validation, not a prop you pass */
label:has(input:not([type=checkbox],[type=radio])) { display:block }
label:has(input:not([type=checkbox],[type=radio]))::before { content:var(--idle) "[ " / "" }
label:has(input:not([type=checkbox],[type=radio]))::after  { content:" ]" / "" }
label:has(:user-invalid)::before { content:" ! [ " / "" }
label:has(:user-valid)::before   { content:" + [ " / "" }

/* ============ meters ================================================== */
/* one element. two pseudos share a grid cell and the fill is clipped to a
   fractional column, so resolution is continuous, not eight steps. */
[data-meter] { display:inline-grid; vertical-align:baseline; overflow:clip; text-indent:0;
               inline-size:calc(var(--w, 24) * 1ch) }
[data-meter]::before, [data-meter]::after { grid-area:1/1; overflow:clip; white-space:pre }
[data-meter]::before { content:var(--shade) / "" }
[data-meter]::after  { content:var(--full) / ""; inline-size:calc(var(--v) * 1ch) }
[data-skeleton] { display:inline-block; overflow:clip; white-space:pre; text-indent:0;
                  inline-size:calc(var(--w, 20) * 1ch) }
[data-skeleton]::before { content:var(--shade) / "" }

/* ============ notes and diffs ========================================= */
/* the gutter is reserved and the wrap hangs to it, so severity survives a
   screenshot, a grep and a printout */
[data-note] { padding-inline-start:5ch; text-indent:-5ch }
[data-note]::before          { content:" i   " / "note: " }
[data-note=warn]::before     { content:" !   " / "warning: " }
[data-note=error]::before    { content:" x   " / "error: " }
[data-note=success]::before  { content:" +   " / "success: " }

pre :is(ins,del) { display:block; text-decoration:none }
pre del::before { content:"-  " / "removed " }
pre ins::before { content:"+  " / "added " }

/* ============ navigation ============================================== */
:is(nav,[role=tablist]) a { color:inherit; text-decoration:none }
nav li::before { content:var(--idle) / "" }
nav li:has([aria-current])::before { content:var(--mark) / "" }
nav[aria-label=breadcrumb] li { display:inline }
nav[aria-label=breadcrumb] li::before { content:none }
nav[aria-label=breadcrumb] li + li::before { content:"  /  " / " " }

/* brackets are reserved on every tab and page, so marking never reflows */
[role=tablist] { display:flex; gap:calc(var(--gutter) * 1ch);
                 border-block-end:var(--hair) solid }
[role=tab]::before, [role=tab]::after { content:" " / "" }
[role=tab][aria-selected=true]::before { content:"[" / "" }
[role=tab][aria-selected=true]::after  { content:"]" / "" }
nav[aria-label=pagination] ul { display:flex }
nav[aria-label=pagination] li::before, nav[aria-label=pagination] li::after
  { content:" " / "" }
nav[aria-label=pagination] li:has([aria-current])::before { content:"[" / "" }
nav[aria-label=pagination] li:has([aria-current])::after  { content:"]" / "" }

/* ============ boxes =================================================== */
/* a pair of rules costs nothing */
[data-frame]::before, [data-frame]::after {
  content:var(--rule) / ""; display:block; overflow:clip }

/* four corners cost one wrapper element, because each pseudo-element draws
   one run and a box needs four. paint order does the corners: before,
   child::before, child::after, after -- so every corner lands on top of the
   fill it replaces. */
[data-box] { position:relative; padding:1lh 2ch }
[data-box]::before, [data-box]::after,
[data-box] > :first-child::before, [data-box] > :first-child::after {
  position:absolute; white-space:pre; overflow:clip; pointer-events:none }
[data-box]::before { content:var(--tl) var(--rule) "\A" var(--col) / ""; inset:0 }
[data-box][data-title]::before {
  content:var(--tl) var(--rule2) " " attr(data-title) " " var(--rule) "\A" var(--col) / "" }
[data-box] > :first-child::before {
  content:var(--col) var(--bl) var(--rule) / ""; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end }
[data-box] > :first-child::after {
  content:var(--tr) "\A" var(--col) / ""; inset-block:0; inset-inline-end:0; inline-size:1ch }
[data-box]::after {
  content:var(--col) var(--br) / ""; inset-block:0; inset-inline-end:0; inline-size:1ch;
  display:flex; flex-direction:column; justify-content:flex-end }

:is(dialog,[popover]) { font:inherit; color:inherit; background:Canvas; border:0;
  padding:1lh 2ch; inline-size:calc(52 * 1ch); max-inline-size:100% }
:is(dialog,[popover])::before, :is(dialog,[popover])::after {
  content:var(--rule2) / ""; display:block; overflow:clip }
[popover]::before, [popover]::after { content:var(--rule) / "" }
dialog::backdrop { background:none }

details > summary { list-style:none; cursor:pointer }
details > summary::-webkit-details-marker { display:none }
details > summary::before { content:"+  " / "" }
details[open] > summary::before { content:"-  " / "" }
[data-empty] { text-align:center; padding-block:2lh }

/* ============ responsive ============================================== */
/* breakpoints are column counts. a row becomes a stack; a table becomes the
   same data as key/value, leaders intact. */
[data-row] { display:grid; gap:calc(var(--gutter) * 1ch);
             grid-template-columns:repeat(var(--cols, 2), minmax(0, 1fr)) }
[data-row] > * { min-inline-size:0 }

@container (width < 64ch) { [data-row] { display:block } }
@container (width < 56ch) {
  /* the table box itself has to go: a table never shrinks below its
     min-content width, and min-content here includes the whole leader run */
  table[data-collapse] { display:block }
  table[data-collapse] thead { display:none }
  table[data-collapse] :is(tbody,tfoot,tr,td) { display:block }
  table[data-collapse] tr + tr { margin-block-start:1lh }
  table[data-collapse] td { display:flex; padding:0 0 0 2ch }
  table[data-collapse] td::before { content:attr(data-label) / ""; order:-2 }
  table[data-collapse] td::after  { content:var(--dots) / ""; order:-1; flex:1;
                                    min-inline-size:0; overflow:clip; margin-inline:1ch }
  table[data-collapse] td:first-child { padding-inline-start:0 }
  table[data-collapse] td:first-child::before,
  table[data-collapse] td:first-child::after { content:none }
  [data-num] { text-align:start }
}

/* ============ print =================================================== */
/* nothing to undo: no colour to drop, no shadow to flatten, no dark mode to
   invert. this is the medium the substrate was already aimed at. */
@media print {
  body { --canvas:80; padding:0 }
  :is(nav,[data-toast],form:has(select)) { display:none }
  details { display:block } details > summary { display:none }
}

}


/* Orheden Group site composition */
@layer page {
  :root {
    color-scheme: only light;
    --accent:#0047ff;
    --edge-inline: clamp(2rem, 6vw, 7rem);
    --edge-block: clamp(1.75rem, 5vh, 3.75rem);
    --page-gap: clamp(4ch, 7vw, 12ch);
  }

  html { min-block-size: 100%; background:#fff; color:#000; }
  body {
    --canvas: 120;
    inline-size:100%; max-inline-size:none; min-block-size:100dvh;
    margin:0; padding:0; overflow-x:hidden;
    background:#fff; color:#000;
    font-family:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size:clamp(14px,.2vw + 13px,16px); line-height:1.5;
  }
  .viewport {
    min-block-size:100dvh; inline-size:100%;
    padding:var(--edge-block) var(--edge-inline);
    display:grid; grid-template-rows:auto minmax(0,1fr) auto;
  }
  a { color:inherit; }
  header, footer {
    inline-size:100%; margin:0; display:flex; align-items:baseline;
    justify-content:space-between; gap:4ch;
  }
  header { align-self:start; font-size:.92em; line-height:1.2; }
  footer { align-self:end; font-size:.78em; line-height:1.2; letter-spacing:.04em; }
  .brand {
    color:inherit; text-decoration:none; white-space:nowrap;
    font-weight:600; letter-spacing:.34ch;
  }
  .dot { color:var(--accent); }
  .brand .dot {
    position:relative; top:.06em;
    display:inline-block; inline-size:.45ch;
    font-size:3em; line-height:0; letter-spacing:0;
    transform:translateX(-.4ch);
  }
  .home-side dt::after, .detail-panel dt::after { color:var(--accent); }
  header nav { margin:0; }
  header nav ul { display:flex; justify-content:flex-end; gap:3ch; padding:0; margin:0; }
  header nav li { padding:0; }
  header nav li::before { content:none; }
  header nav a {
    font-weight:400; text-decoration:none; text-underline-offset:.28em;
  }
  header nav a:hover, header nav a[aria-current="page"] { text-decoration:underline; }

  main { margin:0; padding:0; min-inline-size:0; }

  /* home */
  .home-main {
    inline-size:100%; block-size:100%; min-block-size:0; align-self:stretch;
    display:grid; grid-template-columns:minmax(0,64ch) minmax(0,40ch);
    column-gap:var(--page-gap); justify-content:space-between; align-items:center;
  }
  .hero { min-inline-size:0; max-inline-size:64ch; }
  .hero h1 {
    margin:0 0 .42em; max-inline-size:12ch;
    font-size:clamp(2.8rem,5.6vw,6.4rem); font-weight:500;
    line-height:.94; letter-spacing:-.055em; text-wrap:balance;
  }
  .lead { inline-size:min(100%,38ch); margin:0; font-size:1.08em; line-height:1.55; letter-spacing:-.01em; }
  .home-side { inline-size:min(100%,40ch); justify-self:end; font-size:.9em; line-height:1.55; }
  .home-side section { margin:0; }
  .home-side section + section { margin-block-start:2.6lh; }
  .home-side h2 { margin:0 0 1lh; font-weight:500; font-size:1em; letter-spacing:.04em; }
  .home-side dt { font-weight:400; }
  .home-side dd { font-weight:500; }
  .home-side ul { padding-inline-start:0; }
  .home-side a { text-underline-offset:.24em; }
  .home-side .contact-email { margin-block-start:1.5lh; }

  /* linked pages */
  .detail-main {
    inline-size:100%; block-size:100%; min-block-size:0; align-self:stretch;
    display:grid; grid-template-columns:minmax(0,1fr) minmax(34ch,46ch);
    column-gap:var(--page-gap); align-items:center;
  }
  .detail-intro { align-self:center; max-inline-size:58ch; }
  .detail-intro h1 {
    margin:0; max-inline-size:10ch;
    font-size:clamp(3rem,6.2vw,6.8rem); font-weight:500;
    line-height:.94; letter-spacing:-.055em; text-wrap:balance;
  }
  .detail-panel { inline-size:min(100%,46ch); justify-self:end; font-size:.94em; }
  .detail-panel > * { margin:0; }
  .detail-panel > * + * { margin-block-start:2.2lh; }
  .detail-panel h2 { margin:0 0 .9lh; font-size:1em; font-weight:500; letter-spacing:.04em; }
  .detail-panel p { max-inline-size:42ch; }
  .detail-panel dl > div { padding-block:.18lh; }
  .detail-panel dt { font-weight:400; }
  .detail-panel dd { font-weight:500; }
  .detail-list { padding:0; margin:0; }
  .detail-list li { margin:0 0 .55lh; }
  .detail-list li::before { content:"- " / ""; }
  .detail-panel hr { margin-block:1.25lh; }
  .back-link { margin-block-start:2.2lh !important; }
  .back-link a, .contact-link { text-decoration:none; font-weight:500; }

  @media (max-width: 980px) {
    :root { --edge-inline:clamp(2rem,5vw,4.5rem); --edge-block:clamp(1.75rem,4vh,3rem); }
    .home-main, .detail-main { grid-template-columns:minmax(0,1fr) minmax(30ch,36ch); column-gap:5ch; }
    .home-side, .detail-panel { inline-size:min(100%,36ch); }
  }

  @media (max-width: 760px) {
    :root { --edge-inline:1.5rem; --edge-block:1.5rem; }
    body { --canvas:64; min-block-size:100svh; font-size:15px; }
    .viewport { min-block-size:100svh; }
    header { display:block; }
    header nav { margin-block-start:1.25lh; }
    header nav ul { justify-content:flex-start; gap:2ch; flex-wrap:wrap; }
    .home-main, .detail-main {
      block-size:auto; align-self:center; display:block; padding-block:3.5lh;
    }
    .hero h1, .detail-intro h1 {
      margin-block:.75em .45em; max-inline-size:12ch;
      font-size:clamp(2.65rem,13vw,4.8rem); line-height:.94;
    }
    .home-side, .detail-panel { inline-size:100%; margin-block-start:4.5lh; }
    footer { gap:2ch; }
  }
}