/* ==========================================================================
   Two more skins over exactly the same HTML.

   style.css is the base and the editor skin. This file overrides it for the
   other two, so the content lives in one place and none of it is duplicated.
   Every rule here is scoped to [data-skin="..."], which outranks the base
   selectors on specificity alone, so nothing needs !important.

   Fonts are injected by the script only when a skin is actually chosen. A
   visitor who stays in the editor never downloads Archivo or Plex.
   ========================================================================== */


/* ==========================================================================
   WHAT BELONGS TO WHICH SKIN

   The console is the editor's, and only the editor's. The other two read the
   same content through their own mechanic, so these bits are switched off
   rather than restyled.
   ========================================================================== */

[data-skin="poster"] .console__bar,
[data-skin="poster"] .console__log,
[data-skin="poster"] .console__form,
[data-skin="grid"] .console__prompt,
[data-skin="grid"] .console__log,
[data-skin="grid"] .console__form{ display: none; }

/* Words are coloured in one at a time by the editor's console. Everywhere
   else the text is simply there. */
[data-skin="editor"] .console .w{ color: transparent; }
[data-skin="editor"] .console .w.is-writ{ color: inherit; }


/* ==========================================================================
   POSTER

   Enormous type, hard edges, one loud colour. The listing stops being a table
   and becomes a stack of full-width blocks you fall through, each led by its
   own number.
   ========================================================================== */

[data-skin="poster"]{
  --bg:      #0a0a0a;
  --panel:   #0a0a0a;
  --raised:  #121212;
  --line:    rgba(247, 247, 245, 0.16);
  --line-2:  rgba(247, 247, 245, 0.08);

  --text:    #f7f7f5;
  --muted:   #a8a8a2;
  --comment: #86867f;
  --gutter:  #5c5c56;

  --key:     #f7f7f5;
  --string:  #ff3b1f;
  --number:  #ff3b1f;
  --accent:  #ff3b1f;

  --poster:  "Archivo", "Helvetica Neue", Arial, sans-serif;

  --rail:    0rem;
  --nums:    0rem;
  --pad:     clamp(1.25rem, 5vw, 5rem);
}

[data-skin="poster"] body{
  font-family: var(--poster);
  font-size: 1.0625rem;
  line-height: 1.5;
}

/* No rail. The name is the navigation. */
[data-skin="poster"] .rail{
  position: static;
  width: auto;
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-start;
  gap: var(--pad);
  flex-wrap: wrap;
  border-right: 0;
  border-bottom: 2px solid var(--text);
  padding: var(--s3) var(--pad);
  overflow: visible;
}

[data-skin="poster"] .rail__me{
  font-family: var(--poster);
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
[data-skin="poster"] .rail__role,
[data-skin="poster"] .rail__foot,
[data-skin="poster"] .tree__twig,
[data-skin="poster"] .tree__sub,
[data-skin="poster"] .path,
[data-skin="poster"] .rail__toggle{ display: none; }

[data-skin="poster"] .tree{
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s4);
  font-size: 0.9375rem;
}
[data-skin="poster"] .tree__branch{
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s4);
  padding: 0;
}
[data-skin="poster"] .tree a{
  padding: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
[data-skin="poster"] .tree a.is-current{ color: var(--accent); }

[data-skin="poster"] .main{ margin-left: 0; }

[data-skin="poster"] .doc{ padding-left: 0; max-width: none; }

/* Kill the gutter's line numbers, but not the project numbers, which are a
   ::before on .entry and would otherwise be caught by the same rule. */
[data-skin="poster"] .doc > *:not(.entry)::before{ display: none; }

[data-skin="poster"] .section{ padding: var(--s8) var(--pad); }

[data-skin="poster"] .note{
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.75rem;
  color: var(--accent);
}

[data-skin="poster"] .head{
  font-weight: 900;
  font-size: clamp(3rem, 1rem + 11vw, 9rem);
  line-height: 0.85;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  max-width: none;
}

[data-skin="poster"] .hero{
  padding: var(--s7) var(--pad);
  min-height: 88svh;
  align-items: center;
}
[data-skin="poster"] .hero__inner{ max-width: none; }

[data-skin="poster"] .hero__name{
  font-weight: 900;
  font-size: clamp(3.5rem, 0.5rem + 15vw, 13rem);
  line-height: 0.82;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}

[data-skin="poster"] .hero__line{
  font-size: clamp(1.125rem, 0.9rem + 1vw, 1.75rem);
  max-width: 30ch;
  color: var(--text);
  margin-top: var(--s5);
}

[data-skin="poster"] .hero__meta{
  margin-top: var(--s6);
  border-top: 2px solid var(--text);
  padding-top: var(--s3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8125rem;
}
[data-skin="poster"] .hero__meta b{ color: var(--accent); }

[data-skin="poster"] .lede{
  font-size: clamp(1.25rem, 1rem + 1.4vw, 2rem);
  line-height: 1.3;
  max-width: 24ch;
  font-weight: 600;
  letter-spacing: -0.02em;
}
[data-skin="poster"] .body{ max-width: 52ch; }

/* Each project becomes a block, led by a number the size of a headline. */
[data-skin="poster"] .entry{
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--s3) var(--s5);
  padding-block: var(--s5);
  border-bottom: 2px solid var(--line);
  counter-increment: poster;
  align-items: start;
}
[data-skin="poster"] .entry::before{
  content: counter(poster, decimal-leading-zero);
  grid-row: 1 / span 3;
  font-weight: 900;
  font-size: 3rem;
  line-height: 0.8;
  color: var(--accent);
  letter-spacing: -0.04em;
}
[data-skin="poster"] .doc{ counter-reset: poster; }

[data-skin="poster"] .entry__name{
  grid-column: 2;
  font-weight: 900;
  font-size: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--text);
}
[data-skin="poster"] .entry__what{
  grid-column: 2;
  font-size: 1.125rem;
  max-width: 46ch;
}
[data-skin="poster"] .entry .stack{
  grid-column: 2;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  gap: 0 1.4ch;
}
[data-skin="poster"] .entry__year{
  grid-column: 2;
  text-align: left;
  font-weight: 600;
}
[data-skin="poster"] .entry__act{ grid-column: 2; justify-self: start; }

[data-skin="poster"] .entry .showme{
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8125rem;
}

[data-skin="poster"] .console{ grid-column: 1 / -1; }
[data-skin="poster"] .console__inner{ border: 2px solid var(--line); }
[data-skin="poster"] .console__bar{ border-bottom: 2px solid var(--line); }
[data-skin="poster"] .console__prompt,
[data-skin="poster"] .console__sigil,
[data-skin="poster"] .console__input{ font-family: var(--mono); }

[data-skin="poster"] .md-h1,
[data-skin="poster"] .md-h2{
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--text);
}
[data-skin="poster"] .md-h1{ font-size: 1.5rem; }
[data-skin="poster"] .md-h2{ font-size: 1rem; }
[data-skin="poster"] .md-h1::before,
[data-skin="poster"] .md-h2::before{ content: none; }

[data-skin="poster"] .mail{
  font-weight: 900;
  text-transform: none;
  font-size: clamp(1.25rem, 0.6rem + 2.6vw, 2.75rem);
  letter-spacing: -0.03em;
}

[data-skin="poster"] .elsewhere{
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.875rem;
}

[data-skin="poster"] .skinner{
  border: 2px solid var(--line);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
}

@media (max-width: 60rem){
  /* A fifteen-character name at seven rem does not fit a phone. */
  [data-skin="poster"] .console .md-h1{
    font-size: clamp(1.75rem, 6.5vw, 3rem);
    overflow-wrap: anywhere;
  }
  [data-skin="poster"] .console.is-open .console__body{
    padding: var(--s6) var(--pad) var(--s8);
  }

  [data-skin="poster"] .rail{ padding: var(--s3) var(--pad); }
  [data-skin="poster"] .tree{ display: flex; flex: 1 0 100%; padding-top: var(--s2); border: 0; }
  [data-skin="poster"] .entry{ grid-template-columns: 3rem minmax(0, 1fr); gap: var(--s2) var(--s3); }
  [data-skin="poster"] .entry::before{ font-size: 1.75rem; }
  [data-skin="poster"] .entry__name,
  [data-skin="poster"] .entry__what,
  [data-skin="poster"] .entry .stack,
  [data-skin="poster"] .entry__year,
  [data-skin="poster"] .entry__act{ grid-column: 2; }
}


/* A poster is a picture with words on it, so the image is always there and it
   runs the full width, bled to the edges of the block. */
[data-skin="poster"] .shot{
  display: block;
  grid-column: 1 / -1;
  order: 1;
  margin-top: var(--s4);
  border-top: 2px solid var(--line);
  border-bottom: 2px solid var(--line);
}
[data-skin="poster"] .entry .console{ order: 2; }


/* --------------------------------------------------------------------------
   THE SHEET  (poster only)

   Opening a project does not unfold a panel underneath it. It fills the
   screen, the way a poster does, and you flip between them.
   -------------------------------------------------------------------------- */

[data-skin="poster"] .console.is-open{
  position: fixed;
  inset: 0;
  z-index: 70;
  /* The base keeps every console clamped shut; a sheet is the exception. */
  max-height: none;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  margin: 0;
}

[data-skin="poster"] .console.is-open .console__inner{
  border: 0;
  min-height: 100%;
  display: flex;
  align-items: center;
}

[data-skin="poster"] .console.is-open .console__body{
  max-height: none;
  overflow: visible;
  width: 100%;
  padding: var(--s8) var(--pad) var(--s8);
  font-size: 1.0625rem;
  line-height: 1.5;
}

[data-skin="poster"] .console .md-h1{
  font-size: clamp(2.5rem, 1rem + 8vw, 7rem);
  line-height: 0.85;
  margin-bottom: var(--s4);
}
[data-skin="poster"] .console .md-h2{
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin-top: var(--s6) !important;
}
[data-skin="poster"] .console__body p{ max-width: 54ch; font-size: 1.125rem; }
[data-skin="poster"] .console__body .bullets li{ font-size: 1.125rem; padding-block: var(--s1); }
[data-skin="poster"] .console__body .fields{ max-width: 54ch; }


.sheetnav{
  position: fixed;
  z-index: 80;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s3) var(--pad);
  background: #0a0a0a;
  border-top: 2px solid rgba(247, 247, 245, 0.16);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8125rem;
  color: #f7f7f5;
}
.sheetnav[hidden]{ display: none; }

.sheetnav__go,
.sheetnav__shut{
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0.3rem 0;
  cursor: pointer;
}
.sheetnav__go:hover,
.sheetnav__shut:hover{ color: #ff3b1f; }
.sheetnav__go[disabled]{ opacity: 0.3; cursor: default; }
.sheetnav__count{ color: #86867f; font-variant-numeric: lining-nums tabular-nums; }
.sheetnav__shut{ margin-left: auto; color: #ff3b1f; }


/* ==========================================================================
   GRID

   Light, systematic, ruled columns. The work is a set of cards you scan
   rather than a document you read, and a card widens to the full width when
   its console opens so the output has room.
   ========================================================================== */

[data-skin="grid"]{
  --bg:      #f2f2f0;
  --panel:   #eaeae7;
  --raised:  #e6e6e2;
  --line:    rgba(20, 20, 18, 0.16);
  --line-2:  rgba(20, 20, 18, 0.08);

  --text:    #141412;
  --muted:   #4a4a45;
  --comment: #6c6c65;
  --gutter:  #9a9a92;

  --key:     #141412;
  --string:  #7a3a10;
  --number:  #c22c08;
  --accent:  #c22c08;

  --swiss:   "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;

  --rail:    0rem;
  --nums:    0rem;
  --pad:     clamp(1.25rem, 3.5vw, 3.5rem);
}

[data-skin="grid"] body{
  font-family: var(--swiss);
  font-size: 1rem;
  line-height: 1.55;
}

/* The rail lies down as a ruled top bar. */
[data-skin="grid"] .rail{
  position: sticky;
  top: 0;
  bottom: auto;
  width: auto;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s3);
  padding: var(--s2) var(--pad);
  background: var(--bg);
  border-right: 0;
  border-bottom: 1px solid var(--text);
  overflow: visible;
}

[data-skin="grid"] .rail__me{
  font-family: var(--swiss);
  font-weight: 600;
  letter-spacing: -0.02em;
}
[data-skin="grid"] .rail__role,
[data-skin="grid"] .rail__foot,
[data-skin="grid"] .tree__twig,
[data-skin="grid"] .tree__sub,
[data-skin="grid"] .path,
[data-skin="grid"] .rail__toggle{ display: none; }

[data-skin="grid"] .tree{ font-size: 0.9375rem; }
[data-skin="grid"] .tree__branch{ display: flex; gap: var(--s4); padding: 0; }
[data-skin="grid"] .tree a{ padding: 0; color: var(--muted); }
[data-skin="grid"] .tree a.is-current{ color: var(--accent); }

[data-skin="grid"] .main{ margin-left: 0; }

/* The column rules that give the skin its name. */
[data-skin="grid"] .section{
  padding: var(--s7) var(--pad);
  background-image: repeating-linear-gradient(
    to right,
    var(--line-2) 0 1px,
    transparent 1px calc(100% / 6)
  );
  background-position: var(--pad) 0;
  background-size: calc(100% - var(--pad) * 2) 100%;
  background-repeat: no-repeat;
}

[data-skin="grid"] .doc{ padding-left: 0; max-width: none; }
[data-skin="grid"] .doc > *:not(.entry)::before{ display: none; }

[data-skin="grid"] .note{
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  color: var(--accent);
}

[data-skin="grid"] .head{
  font-weight: 600;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
}

[data-skin="grid"] .hero{
  padding: var(--s7) var(--pad);
  min-height: 80svh;
}
[data-skin="grid"] .hero__inner{ max-width: none; }

[data-skin="grid"] .hero__name{
  font-weight: 600;
  font-size: clamp(2.5rem, 0.5rem + 8vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
}

[data-skin="grid"] .hero__line{
  font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.375rem);
  max-width: 38ch;
  margin-top: var(--s4);
}

[data-skin="grid"] .hero__meta{
  margin-top: var(--s6);
  border-top: 1px solid var(--text);
  padding-top: var(--s3);
  font-size: 0.875rem;
}

[data-skin="grid"] .lede{
  font-size: clamp(1.125rem, 1rem + 0.8vw, 1.5rem);
  line-height: 1.4;
  max-width: 34ch;
  letter-spacing: -0.015em;
}
[data-skin="grid"] .body{ max-width: 56ch; }

/* Projects become cards. */
[data-skin="grid"] .doc:has(.entry){
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: var(--s3);
  align-items: start;
}
[data-skin="grid"] .doc > .note,
[data-skin="grid"] .doc > .head,
[data-skin="grid"] .doc > .body,
[data-skin="grid"] .doc > .filters{ grid-column: 1 / -1; }

[data-skin="grid"] .entry{
  display: flex;
  flex-direction: column;
  /* The base rule is a grid with align-items: baseline. Left inherited, a
     column flex container sizes its children to their own content instead of
     stretching them, and the console spills out of the card. */
  align-items: stretch;
  min-width: 0;
  gap: var(--s2);
  padding: var(--s3);
  border: 1px solid var(--line);
  background: var(--bg);
  transition: border-color 0.18s ease;
}
[data-skin="grid"] .entry:hover{ background: var(--bg); border-color: var(--text); }

/* Opening a console widens the card to the whole row, so the output is not
   squeezed into a third of the screen. */
[data-skin="grid"] .entry.is-showing{ grid-column: 1 / -1; }

/* The grid turns into a real portfolio: every card leads with its picture,
   pulled out to the card's edges. */
[data-skin="grid"] .shot{
  display: block;
  margin: calc(var(--s3) * -1) calc(var(--s3) * -1) var(--s2);
  border-bottom: 1px solid var(--line);
}

[data-skin="grid"] .entry__name{
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--text);
}
[data-skin="grid"] .entry__what{ flex: 1 0 auto; }
[data-skin="grid"] .entry__year{ text-align: left; font-weight: 500; }
[data-skin="grid"] .entry .stack{ font-size: 0.8125rem; gap: 0 1.2ch; }
[data-skin="grid"] .entry__act{ justify-self: start; margin-top: var(--s2); }

[data-skin="grid"] .console,
[data-skin="grid"] .console__inner,
[data-skin="grid"] .console__body{ min-width: 0; }
[data-skin="grid"] .console__inner{ background: var(--panel); }
[data-skin="grid"] .console__bar{ background: var(--raised); }
[data-skin="grid"] .console__prompt,
[data-skin="grid"] .console__sigil,
[data-skin="grid"] .console__input,
[data-skin="grid"] .console__log{ font-family: var(--mono); }

[data-skin="grid"] .md-h1,
[data-skin="grid"] .md-h2{ font-weight: 600; color: var(--text); }
[data-skin="grid"] .md-h1::before,
[data-skin="grid"] .md-h2::before{ color: var(--accent); }

[data-skin="grid"] .fields > div{ border-bottom-color: var(--line-2); }

[data-skin="grid"] .mail{
  font-weight: 600;
  font-size: clamp(1.125rem, 0.7rem + 1.8vw, 2rem);
  letter-spacing: -0.025em;
}

[data-skin="grid"] .skinner{
  background: var(--bg);
  border-color: var(--text);
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   FILTERING  (grid only)

   A grid is a system, so the mechanic is a systematic one: reduce the set.
   The bar is built by the script from whatever stack tokens exist, so a new
   project joins the filters the moment you add its row.
   -------------------------------------------------------------------------- */

.filters{ display: none; }

[data-skin="grid"] .filters{
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) var(--s2);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s2);
}

[data-skin="grid"] .filter{
  font: inherit;
  font-size: 0.8125rem;
  color: var(--muted);
  background: none;
  border: 1px solid var(--line);
  padding: 0.15rem 0.7ch;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
[data-skin="grid"] .filter:hover{ color: var(--text); border-color: var(--text); }

[data-skin="grid"] .filter.is-on{
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

[data-skin="grid"] .filter b{
  font-weight: 400;
  opacity: 0.6;
  margin-left: 0.6ch;
  font-variant-numeric: lining-nums tabular-nums;
}

[data-skin="grid"] .filters__guides{ margin-left: auto; }

[data-skin="grid"] .entry.is-filtered{ display: none; }

/* The designer's guides, on request. */
[data-skin="grid"].guides .section{
  background-image:
    repeating-linear-gradient(to right, rgba(194, 44, 8, 0.22) 0 1px, transparent 1px calc(100% / 12)),
    repeating-linear-gradient(to bottom, rgba(194, 44, 8, 0.10) 0 1px, transparent 1px 1.5rem);
}

/* Without :has, the cards simply never widen; everything else still works. */
@supports not (selector(:has(*))){
  [data-skin="grid"] .doc{ display: block; }
  [data-skin="grid"] .entry{ margin-bottom: var(--s3); }
}

@media (max-width: 60rem){
  [data-skin="grid"] .tree{ flex: 1 0 100%; padding-top: var(--s2); border: 0; }
  [data-skin="grid"] .tree__branch{ flex-wrap: wrap; gap: var(--s3); }
  [data-skin="grid"] .section{ background-image: none; }
}