/*
Theme Name: zeeb44
Theme URI: https://zeeb44.com
Author: James Richardson
Author URI: https://zeeb44.com
Description: Custom one-page theme for zeeb44 — freelance web design and development for small businesses. Full-bleed colour blocks, portfolio driven by a Work post type, and a contact form with layered spam protection. No page builder.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zeeb44
Tags: one-column, custom-colors, custom-logo, custom-menu, portfolio
*/

/* ============================================================
   Palette and type.

   Amber and blue both come from James's own 2010 palette file
   (_Clients/_zeeb44/images/logos/logo info.txt) — not a generic
   accent. Don't swap them for something "cleaner".
   ============================================================ */

:root{
  --amber:      #FFAC47;
  --amber-deep: #E08C22;
  --blue:       #4FB9F8;
  --blue-deep:  #1A6FA1;
  --black:      #121110;
  --white:      #FBFAF8;
  --field:      #16140F;
  --field-lit:  #221F17;
  --field-text: #FFC24F;

  --display:"Bricolage Grotesque", system-ui, sans-serif;
  --body:"Work Sans", system-ui, sans-serif;
  --mono:"Space Mono", ui-monospace, monospace;

  --gutter:clamp(1.15rem, 4.5vw, 4.5rem);
}

/* The flip (James, 2026-10-01): every other visit the two palette colours
   trade places, so the amber hero, bar and contact go blue and the blue logo
   section goes amber. Set by hooks.server.ts as <body class="flip">. Every
   amber/blue in this file goes through these variables for that reason. */
body.flip{
  --amber:      #4FB9F8;
  --amber-deep: #1A6FA1;
  --blue:       #FFAC47;
  --blue-deep:  #E08C22;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:var(--body);
  font-size:clamp(1rem, .95rem + .25vw, 1.125rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{ background:var(--amber); color:var(--black); }
:focus-visible{ outline:3px solid var(--amber); outline-offset:2px; }

img{ max-width:100%; height:auto; }

.pad{
  max-width:1680px;
  margin-inline:auto;
  padding-inline:var(--gutter);
}

#work, #marks, #about, #contact{ scroll-margin-top:5rem; }

.screen-reader-text{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

.skip{
  position:absolute; left:-9999px;
  background:var(--amber); color:var(--black);
  font-family:var(--mono); font-weight:700; font-size:.8125rem;
  padding:.75rem 1.25rem; z-index:100;
}
.skip:focus{ left:1rem; top:1rem; }

/* the 44 mark, recoloured from its alpha */
.mark44{
  display:inline-block;
  aspect-ratio:850/666;
  background-color:currentColor;
  -webkit-mask:url(assets/logos/44_icon.png) center/contain no-repeat;
          mask:url(assets/logos/44_icon.png) center/contain no-repeat;
}

/* ---------- colour blocks ---------- */
.block{ padding-block:clamp(3rem, 9vh, 7rem); }
.block--amber{ background:var(--amber); color:var(--black); }
.block--blue{  background:var(--blue);  color:var(--black); }
.block--black{ background:var(--black); color:var(--white); }

.label{
  font-family:var(--mono);
  font-size:.6875rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  margin:0 0 1.5rem;
}

/* ===================== BAR ===================== */
/* Amber, like the hero, with black type (James, 2026-10-01). The black bar
   swallowed the soft-edged 44 mark; black on amber is the strongest pairing
   the palette has. The black rule keeps the bar distinct from the hero. */
.bar{
  position:sticky; top:0; z-index:60;
  background:var(--amber); color:var(--black);
  border-bottom:3px solid var(--black);
}
.bar :focus-visible{ outline-color:var(--black); }
.bar__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem 1.5rem;
  max-width:1680px; margin-inline:auto;
  /* Extra room on top: the 44 rises above the text line and was touching
     the top edge of the screen. */
  padding:2.2rem calc(var(--gutter) + 1rem) 1.1rem;
}
.bar__logo{
  display:inline-flex; align-items:flex-start; gap:.45rem;
  font-family:var(--display);
  font-variation-settings:"opsz" 48, "wdth" 82, "wght" 800;
  font-size:2.5rem; letter-spacing:-.01em;
  text-decoration:none; color:inherit; line-height:1;
  text-transform:uppercase;
}
/* The 44 is a vector (src/lib/Mark44.svelte), traced 2026-10-01 from the
   2535px zeeb44_icon_color.png. It replaced a masked PNG whose soft edges
   needed a drop-shadow stack to look solid, which then looked pixelated. */
.bar__logo .mark44-svg{
  display:block; width:4.7rem; height:auto; aspect-ratio:2535/1989;
  margin-top:-.88rem; flex:none;
  /* Solid black, like ZEEB beside it (James, 2026-10-01). */
  color:currentColor;
}

.bar__nav{ display:flex; gap:2.25rem; margin:0; padding:0; list-style:none; }
.bar__nav a{
  font-family:var(--mono);
  font-size:1rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--black); text-decoration:none;
  padding-block:.3rem;
  border-bottom:3px solid transparent;
  transition:border-color .18s;
  /* Bolder than Space Mono's heaviest weight (700) allows: a hairline stroke
     in the text colour thickens every letter evenly (James, 2026-10-01). */
  -webkit-text-stroke:.45px currentColor;
}
.bar__nav a:hover{ border-bottom-color:var(--black); }
.bar__nav{ align-items:center; }
/* Login: a square-cornered box, never rounded (James, 2026-10-01). */
.bar__nav a.bar__login{
  border:2px solid var(--black); border-radius:0;
  padding:.45rem .95rem;
  transition:background-color .18s, color .18s;
}
.bar__nav a.bar__login:hover{ background:var(--black); color:var(--amber); }
@media (max-width:900px){ .bar__nav{ gap:1.4rem; } .bar__nav a{ font-size:.875rem; letter-spacing:.1em; } }
/* Phones: logo centred on its own line, the menu centred on the line below
   (James, 2026-10-01). */
@media (max-width:640px){
  .bar__in{ flex-wrap:wrap; justify-content:center; padding:2.1rem var(--gutter) .8rem; }
  .bar__logo{ font-size:2rem; }
  .bar__logo .mark44-svg{ width:3.75rem; margin-top:-.7rem; }
  .bar nav{ flex:1 1 100%; }
  .bar__nav{ justify-content:center; flex-wrap:wrap; gap:.4rem 1.1rem; }
  .bar__nav a{ font-size:.8125rem; letter-spacing:.08em; }
  .bar__nav a.bar__login{ padding:.3rem .55rem; }
}
/* Narrow phones (360px): tighter so five items still fit on one line. */
@media (max-width:380px){
  .bar__nav{ gap:.4rem .8rem; }
  .bar__nav a{ font-size:.75rem; letter-spacing:.06em; }
  .bar__nav a.bar__login{ padding:.3rem .45rem; }
}

/* ===================== HERO ===================== */
.hero{
  background:var(--amber); color:var(--black);
  padding:clamp(2.5rem, 7vh, 5rem) 0 clamp(2rem, 5vh, 3.5rem);
  position:relative; overflow:hidden;
}
.hero__type{
  font-family:var(--display);
  font-variation-settings:"opsz" 96, "wdth" 80, "wght" 800;
  font-size:clamp(3.4rem, 18vw, 15.5rem);
  line-height:.86;
  letter-spacing:-.008em;   /* condensed already has tight sidebearings */
  text-transform:uppercase;
  margin:0;
}
.hero__type span{ display:block; }
.hero__type .thin{
  font-variation-settings:"opsz" 96, "wdth" 80, "wght" 250;
  letter-spacing:.002em;
}
.hero__foot{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:2rem; flex-wrap:wrap;
  margin-top:clamp(2rem, 5vh, 3.5rem);
  padding-top:1.5rem;
  border-top:3px solid var(--black);
}
.hero__foot p{
  margin:0; font-size:clamp(1.0625rem, 1.8vw, 1.4rem);
  font-weight:500; max-width:34ch; line-height:1.35;
}
.hero__stamp{
  font-family:var(--mono); font-size:.75rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  border:3px solid var(--black); padding:.5rem .9rem; white-space:nowrap;
}

/* ===================== MARQUEE ===================== */
.marquee{
  background:var(--black); color:var(--white);
  border-block:3px solid var(--amber);
  overflow:hidden; padding-block:.85rem;
}
.marquee__track{ display:flex; width:max-content; animation:slide 42s linear infinite; }
.marquee__track:hover{ animation-play-state:paused; }
.marquee__group{
  display:flex; gap:2.5rem; padding-right:2.5rem;
  font-family:var(--display);
  font-variation-settings:"opsz" 24, "wdth" 88, "wght" 700;
  font-size:1rem; letter-spacing:.02em; text-transform:uppercase; white-space:nowrap;
}
.marquee__group i{ color:var(--amber); font-style:normal; }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ===================== HEADINGS ===================== */
.big{
  font-family:var(--display);
  font-variation-settings:"opsz" 72, "wdth" 82, "wght" 800;
  font-size:clamp(2.25rem, 7.5vw, 5.5rem);
  line-height:.94; letter-spacing:-.012em;
  text-transform:uppercase; margin:0 0 1.5rem;
}
.lede{
  font-size:clamp(1.0625rem, 1.6vw, 1.3125rem);
  max-width:48ch; margin:0 0 clamp(2.5rem, 6vh, 4rem); line-height:1.5;
}

/* ===================== WORK ===================== */
.jobs{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1.25rem;
}
@media (max-width:1040px){ .jobs{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:660px){  .jobs{ grid-template-columns:1fr; } .jobs > .job:nth-child(n+7){ display:none; } }

/* Work cards, redesigned 2026-10-01: each screenshot sits in a slim browser
   frame that names the site, so mismatched captures read as deliberate. A
   quiet 1px border instead of the old 3px white box; status and link share
   one footer line pinned to the bottom so cards in a row align. */
.job{
  position:relative;
  display:flex; flex-direction:column;
  background:#1A1815;
  border:1px solid rgba(251,250,248,.14);
  transition:border-color .25s, transform .35s cubic-bezier(.2,.7,.3,1);
}
.job:hover, .job:focus-within{ border-color:var(--amber); transform:translateY(-4px); }

.job__frame{ background:#0B0A09; border-bottom:1px solid rgba(251,250,248,.14); }
.job__chrome{
  display:flex; align-items:center; gap:.4rem;
  padding:.55rem .8rem;
  border-bottom:1px solid rgba(251,250,248,.08);
}
.job__chrome i{ width:.5rem; height:.5rem; border-radius:50%; background:rgba(251,250,248,.22); flex:none; }
.job__chrome span{
  margin-left:.6rem; min-width:0;
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.04em;
  color:rgba(251,250,248,.55);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.job__art{ aspect-ratio:16/10; overflow:hidden; }
.job__art img{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:top center;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.job:hover .job__art img,
.job:focus-within .job__art img{ transform:scale(1.03); }

.job__body{ padding:1.35rem 1.4rem .25rem; }
.job h3{
  font-family:var(--display);
  font-variation-settings:"opsz" 32, "wdth" 86, "wght" 800;
  font-size:1.5rem; line-height:1.06;
  letter-spacing:-.01em; text-transform:uppercase; margin:0 0 .6rem;
}
.job p{ margin:0; font-size:.9375rem; line-height:1.55; color:rgba(251,250,248,.78); }

.job__foot{
  margin-top:auto;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.25rem 1.4rem 1.35rem;
}
.job__fate{
  font-family:var(--mono); font-size:.625rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  padding:.38rem .65rem; border:2px solid currentColor;
}
.job--on .job__fate{ background:var(--amber); color:var(--black); border-color:var(--amber); }
.job--on .job__fate--soon{ background:transparent; color:var(--amber); }
.job__visit{
  margin-left:auto;
  font-family:var(--mono); font-size:.75rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--white); text-decoration:none;
  border-bottom:2px solid transparent; padding-block:.15rem;
  transition:color .2s, border-color .2s;
}
.job__visit span{ display:inline-block; transition:transform .2s; }
.job__visit:hover{ color:var(--amber); border-bottom-color:var(--amber); }
.job__visit:hover span{ transform:translateX(3px); }

.aside{
  margin:clamp(2rem,5vh,3rem) 0 0;
  font-family:var(--mono); font-size:.8125rem; line-height:1.8;
  max-width:60ch;
  border-left:3px solid var(--amber); padding-left:1.15rem;
  opacity:.8;
}

/* ===================== ROSTER ===================== */
.roster{
  margin-top:clamp(2.75rem, 7vh, 4.5rem);
  padding-top:1.75rem;
  border-top:3px solid var(--amber);
}
.roster h3{
  font-family:var(--display);
  font-variation-settings:"opsz" 48, "wdth" 84, "wght" 800;
  font-size:clamp(1.5rem, 3.4vw, 2.5rem);
  letter-spacing:-.012em; text-transform:uppercase;
  margin:0 0 .6rem; line-height:1;
}
.roster > p{ margin:0 0 2.25rem; max-width:56ch; font-size:1.125rem; opacity:.85; }

/* Grid, not CSS columns. `columns` balances by height, so one wrapped name
   left the three columns ending at different depths. Explicit rows with
   grid-auto-flow:column align every row across all three. Keep the item count
   a multiple of 3 and update --roster-rows to match. */
.roster__list{
  --roster-rows:16;
  display:grid;
  grid-auto-flow:column;
  grid-template-rows:repeat(var(--roster-rows), auto);
  grid-template-columns:repeat(3, minmax(0,1fr));
  column-gap:clamp(1.5rem, 4vw, 3.25rem);
  margin:0; padding:0; list-style:none;
}
.roster__list li{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.72rem 0;
  border-bottom:1px solid rgba(251,250,248,.16);
}
.roster__name{
  font-family:var(--display);
  font-variation-settings:"opsz" 24, "wdth" 88, "wght" 700;
  font-size:1.25rem; letter-spacing:-.008em;
  text-transform:uppercase; line-height:1.2;
}
.roster__meta{
  font-family:var(--mono); font-size:.6875rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  opacity:.6; text-align:right; white-space:nowrap; flex:none;
}
.roster__meta.is-live{ color:var(--amber); opacity:1; }
.roster a{ color:inherit; text-decoration:none; border-bottom:2px solid color-mix(in srgb, var(--amber) 40%, transparent); }
.roster a:hover{ color:var(--amber); border-bottom-color:var(--amber); }
.roster__tail{
  margin:2rem 0 0; padding-top:1.5rem;
  border-top:1px solid rgba(251,250,248,.16);
  max-width:70ch; font-size:1.125rem; font-weight:500;
}
@media (max-width:860px){ .roster__list{ --roster-rows:24; grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ .roster__list{ grid-auto-flow:row; grid-template-rows:none; grid-template-columns:1fr; } }

/* ===================== MARKS ===================== */
.grid-marks{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1rem;
}
@media (max-width:1040px){ .grid-marks{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:660px){  .grid-marks{ grid-template-columns:1fr; } }

.mk{
  border:3px solid var(--black); background:var(--black); margin:0;
  overflow:hidden;
  transition:transform .32s cubic-bezier(.2,.7,.3,1), box-shadow .32s ease;
}
.mk:hover, .mk:focus-within{
  transform:translateY(-5px);
  box-shadow:0 12px 0 -3px rgba(18,17,16,.28);
}
/* contain, not cover — centred presentation boards, don't crop them */
/* Boards in assets/marks-2026 are exactly 16:10 with the logo already centred
   and padded, so they fill the frame; nothing gets cropped. */
.mk img{
  display:block; width:100%; aspect-ratio:16/10;
  object-fit:cover; background:#fff;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.mk:hover img, .mk:focus-within img{ transform:scale(1.04); }
.mk figcaption{
  display:flex; align-items:baseline; justify-content:space-between; gap:.75rem;
  background:var(--blue); color:var(--black);
  border-top:3px solid var(--black);
  padding:.7rem .9rem;
  font-family:var(--display);
  font-variation-settings:"opsz" 18, "wdth" 88, "wght" 700;
  font-size:.875rem; text-transform:uppercase; letter-spacing:-.01em;
  transition:background-color .32s ease;
}
.mk:hover figcaption, .mk:focus-within figcaption{ background:var(--black); color:var(--blue); }
.mk figcaption em{
  font-style:normal; font-family:var(--mono);
  font-size:.5625rem; font-weight:700; letter-spacing:.12em;
  opacity:.6; white-space:nowrap;
}

/* ===================== ABOUT ===================== */
.about-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap:clamp(1.75rem, 4vw, 3.5rem);
}
.about-grid p{ margin:0 0 1.25rem; }
.about-grid p:last-child{ margin-bottom:0; }
.about-grid a{ color:var(--amber); text-decoration:underline; text-underline-offset:3px; }

.rules{ list-style:none; margin:0; padding:0; }
.rules li{
  border-top:2px solid currentColor;
  padding:.9rem 0;
  display:flex; justify-content:space-between; gap:1rem;
  font-family:var(--mono); font-size:.8125rem;
  text-transform:uppercase; letter-spacing:.06em;
}
.rules li b{ font-weight:700; }
.rules li span{ opacity:.6; text-align:right; }

.toolbox{
  margin-top:clamp(2.5rem, 6vh, 4rem);
  padding-top:1.75rem;
  border-top:3px solid var(--amber);
}
.toolbox h3{
  font-family:var(--display);
  font-variation-settings:"opsz" 48, "wdth" 84, "wght" 800;
  font-size:clamp(1.375rem, 3vw, 2rem);
  text-transform:uppercase; letter-spacing:-.012em;
  margin:0 0 .65rem; line-height:1;
}
.toolbox p{ margin:0 0 1.6rem; max-width:62ch; font-size:1.0625rem; opacity:.85; }
.tools{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0; padding:0; list-style:none; }
.tools li{
  font-family:var(--mono); font-size:.75rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  border:2px solid rgba(251,250,248,.3);
  padding:.45rem .8rem;
  transition:border-color .2s, color .2s;
}
.tools li:hover{ border-color:var(--amber); color:var(--amber); }

/* ===================== CONTACT ===================== */
.contact-grid{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:clamp(2rem, 5vw, 4rem);
  align-items:start;
}
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }

.field{ margin-bottom:1.15rem; }
.field label{
  display:block;
  font-family:var(--mono); font-size:.6875rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; margin-bottom:.45rem;
}
.field label .opt{ opacity:.55; }
.field input,
.field textarea{
  width:100%;
  font-family:var(--body); font-size:1.0625rem;
  color:var(--field-text); caret-color:var(--field-text);
  background:var(--field);
  border:3px solid var(--black); border-radius:0;
  padding:.8rem .95rem;
  transition:box-shadow .18s, background-color .18s;
}
.field input::placeholder,
.field textarea::placeholder{ color:rgba(255,194,79,.35); }
.field input::selection,
.field textarea::selection{ background:var(--field-text); color:var(--field); }
.field textarea{ min-height:9rem; resize:vertical; line-height:1.55; }
.field input:focus,
.field textarea:focus{
  outline:none; background:var(--field-lit);
  box-shadow:0 0 0 4px rgba(18,17,16,.45);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"]{
  background:#3A1614; border-color:#8C2A18;
  color:#FF9E8F; caret-color:#FF9E8F;
}

.field__err{
  display:none;
  font-family:var(--mono); font-size:.6875rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; margin-top:.4rem;
}
.field__err.show{ display:block; }

/* honeypot — off-screen, never shown to a person */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.check{
  display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;
  border:3px dashed var(--black);
  padding:.9rem 1rem; margin-bottom:1.4rem;
}
.check label{
  font-family:var(--mono); font-size:.75rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; margin:0;
}
.check input{
  width:5.5rem;
  font-family:var(--body); font-size:1.0625rem;
  color:var(--field-text); caret-color:var(--field-text);
  background:var(--field);
  border:3px solid var(--black); border-radius:0;
  padding:.45rem .6rem;
}
.check input:focus{
  outline:none; background:var(--field-lit);
  box-shadow:0 0 0 4px rgba(18,17,16,.45);
}

.send{
  font-family:var(--display);
  font-variation-settings:"opsz" 32, "wdth" 84, "wght" 800;
  font-size:1.25rem; text-transform:uppercase; letter-spacing:-.01em;
  background:var(--black); color:var(--amber);
  border:3px solid var(--black);
  padding:.85rem 2rem; cursor:pointer;
  transition:background-color .2s, color .2s, transform .2s;
}
.send:hover{ background:transparent; color:var(--black); transform:translateY(-2px); }
.send[disabled]{ opacity:.5; cursor:wait; transform:none; }

.form__note{
  margin:1.15rem 0 0;
  font-family:var(--mono); font-size:.6875rem; line-height:1.8;
  letter-spacing:.04em; opacity:.7; max-width:52ch;
}
.form__error{
  margin:1rem 0 0; padding:.85rem 1rem;
  border:3px solid #8C2A18; background:#3A1614; color:#FF9E8F;
  font-family:var(--mono); font-size:.75rem; letter-spacing:.04em;
  display:none;
}
.form__error.show{ display:block; }

.sent{
  display:none;
  border:3px solid var(--black);
  background:var(--black); color:var(--amber);
  padding:1.5rem;
}
.sent.show{ display:block; }
.sent h3{
  font-family:var(--display);
  font-variation-settings:"opsz" 32, "wdth" 84, "wght" 800;
  font-size:1.5rem; text-transform:uppercase; margin:0 0 .5rem;
}
.sent p{ margin:0; font-size:.9375rem; opacity:.85; }

.aside-card{ border:3px solid var(--black); padding:1.5rem; }
.aside-card h3{
  font-family:var(--display);
  font-variation-settings:"opsz" 24, "wdth" 86, "wght" 800;
  font-size:1.125rem; text-transform:uppercase;
  margin:0 0 1rem; letter-spacing:-.01em;
}
.aside-card ul{ margin:0; padding:0; list-style:none; }
.aside-card li{
  padding:.7rem 0;
  border-top:2px solid rgba(18,17,16,.22);
  font-size:.9375rem; line-height:1.5;
}
.aside-card li:first-child{ border-top:0; padding-top:0; }
.aside-card .mailfallback{
  margin:1.25rem 0 0; padding-top:1rem;
  border-top:2px solid rgba(18,17,16,.22);
  font-family:var(--mono); font-size:.75rem; letter-spacing:.06em;
}

.endnote{
  display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  margin-top:clamp(2.5rem,6vh,4rem);
  padding-top:1.25rem;
  border-top:3px solid var(--black);
  font-family:var(--mono); font-size:.6875rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
}

/* ===================== PRICING ===================== */
.pricing{ margin-top:clamp(2.5rem,6vh,4rem); padding-top:1.75rem; border-top:3px solid var(--amber); }
.pricing h3{ font-family:var(--display); font-variation-settings:"opsz" 48, "wdth" 84, "wght" 800; font-size:clamp(1.375rem,3vw,2rem); text-transform:uppercase; letter-spacing:-.012em; margin:0 0 .65rem; line-height:1; }
.pricing > p{ margin:0 0 1.75rem; max-width:62ch; font-size:1.0625rem; opacity:.85; }
.pricing__rate{ display:inline-flex; align-items:baseline; flex-wrap:wrap; gap:.25rem .75rem; max-width:100%; border:3px solid var(--amber); background:var(--amber); color:var(--black); padding:.85rem 1.35rem; margin-bottom:1.75rem; }
.pricing__num{ font-family:var(--display); font-variation-settings:"opsz" 48, "wdth" 84, "wght" 800; font-size:clamp(1.6rem,4vw,2.5rem); line-height:1.05; letter-spacing:-.012em; white-space:nowrap; }
.pricing__unit{ font-family:var(--mono); font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.pricing__terms{ list-style:none; margin:0; padding:0; max-width:70ch; }
.pricing__terms li{ border-top:2px solid rgba(251,250,248,.18); padding:.9rem 0; font-size:1rem; line-height:1.55; }
.pricing__terms li:last-child{ border-bottom:2px solid rgba(251,250,248,.18); }
.pricing__terms b{ display:block; font-family:var(--mono); font-size:.6875rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; margin-bottom:.3rem; color:var(--amber); }

/* ---------- reviews (2026-10-29) ----------
   Inside the black About block, above the prices. Only rendered when at least
   one review is published. Columns match the count, up to three, set inline as
   --cols: an explicit repeat(), never auto-fit. */
.kind{ margin-top:clamp(2.5rem,6vh,4rem); padding-top:1.75rem; border-top:3px solid var(--amber); }
.kind h3{ font-family:var(--display); font-variation-settings:"opsz" 48, "wdth" 84, "wght" 800; font-size:clamp(1.375rem,3vw,2rem); text-transform:uppercase; letter-spacing:-.012em; margin:0 0 1.25rem; line-height:1; }
.kind__grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(var(--cols,3), minmax(0,1fr)); gap:1.25rem; }
.kind__item{ border:3px solid rgba(251,250,248,.18); padding:1.25rem 1.35rem; display:flex; flex-direction:column; gap:.85rem; }
.kind__stars{ color:var(--amber); font-size:1.25rem; letter-spacing:.12em; line-height:1; }
.kind__item blockquote{ margin:0; font-size:1.0625rem; line-height:1.55; white-space:pre-line; }
.kind__who{ margin-top:auto; font-family:var(--mono); font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.kind__who span{ display:block; opacity:.6; margin-top:.2rem; }
@media (max-width:900px){ .kind__grid{ grid-template-columns:repeat(min(var(--cols,3), 2), minmax(0,1fr)); } }
@media (max-width:660px){ .kind__grid{ grid-template-columns:1fr; } }

/* ---------- halloween (2026-10-30, homepage only) ----------
   On only when hooks.server.ts adds body.halloween: the live window in
   src/lib/seasonal.ts, or the ?theme=halloween preview. Pumpkin orange and
   black: the amber blocks go pumpkin, the blue logo block goes a deeper
   orange, the black blocks stay black. The art is #lib/Halloween.svelte. */
body.halloween{
  --amber:      #FF7518;
  --amber-deep: #C2410C;
  --blue:       #E8590C;
  --blue-deep:  #9A3412;
  --field-text: #FFB067;
  --hw-h: clamp(150px, 21vw, 300px);
  --hw-house: clamp(140px, 19vw, 290px);
}
.halloween .hero{ padding-bottom:calc(var(--hw-h) + 1.25rem); }
.halloween .hero > .pad,
.halloween #marks > .pad,
.halloween #contact > .pad{ position:relative; z-index:1; }
.halloween #marks, .halloween #contact{ position:relative; overflow:hidden; }
.halloween #contact{ padding-bottom:calc(clamp(3rem, 9vh, 7rem) + 64px); }

.hw-hero{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.hw-web{ position:absolute; top:0; width:clamp(90px, 13vw, 200px); height:auto; fill:none; stroke:var(--black); stroke-width:1.1; opacity:.42; pointer-events:none; z-index:0; }
.hw-web--tl{ left:0; }
.hw-web--tr{ right:0; transform:scaleX(-1); }

.hw-spider{ position:absolute; top:0; right:clamp(54px, 15vw, 280px); display:flex; flex-direction:column; align-items:center; transform-origin:top center; animation:hw-bob 4.8s ease-in-out infinite; }
.hw-spider__thread{ display:block; width:1.5px; height:clamp(64px, 13vw, 190px); background:var(--black); opacity:.75; }
.hw-spider__body{ width:clamp(30px, 3.4vw, 48px); height:auto; margin-top:-3px; fill:var(--black); }
.hw-spider__legs path{ fill:none; stroke:var(--black); stroke-width:2.6; stroke-linecap:round; }
.hw-spider__eye{ fill:#FFE08A; }
@keyframes hw-bob{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(12px) rotate(2.5deg); } }

.hw-ground{ position:absolute; left:0; right:0; bottom:0; height:var(--hw-h); }
.hw-hill{ position:absolute; left:0; bottom:0; width:100%; height:42%; fill:var(--black); }
.hw-tree{ position:absolute; left:3%; bottom:14%; width:clamp(62px, 9vw, 140px); height:auto; fill:none; stroke:var(--black); stroke-width:5; stroke-linecap:round; }
.hw-house{ position:absolute; right:5%; bottom:25%; width:var(--hw-house); height:auto; overflow:visible; }
.hw-house__body path{ fill:var(--black); }
.hw-moon{ fill:#FFE7C2; }
.hw-bat{ fill:var(--black); transform-box:fill-box; transform-origin:center; animation:hw-flit 3.6s ease-in-out infinite; }
.hw-bat--b{ animation-duration:4.4s; animation-delay:-1.2s; }
.hw-bat--c{ animation-duration:5.2s; animation-delay:-2.4s; }
@keyframes hw-flit{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(7px,-6px) scale(.92); } }
.hw-window{ fill:#FFD166; filter:drop-shadow(0 0 4px rgba(255,209,102,.9)); animation:hw-glow 3s ease-in-out infinite; }
@keyframes hw-glow{ 0%,100%{ opacity:1; } 45%{ opacity:.82; } 55%{ opacity:.95; } }
.hw-window__bars path{ fill:none; stroke:var(--black); stroke-width:3; }

.hw-pumpkin{ position:absolute; bottom:4%; width:clamp(30px, 4.2vw, 62px); height:auto; overflow:visible; }
.hw-pumpkin__side{ fill:#E8590C; stroke:#7C2D12; stroke-width:1.2; }
.hw-pumpkin__mid{ fill:#FF8A2A; stroke:#7C2D12; stroke-width:1.2; }
.hw-pumpkin__face{ fill:#FFD43B; filter:drop-shadow(0 0 3px rgba(255,212,59,.8)); }
.hw-pumpkin__stem{ fill:#4A3418; }
.hw-pumpkin--a{ left:15%; }
.hw-pumpkin--b{ left:calc(15% + clamp(34px, 4.8vw, 70px)); width:clamp(22px, 3vw, 44px); }
.hw-pumpkin--c{ right:calc(5% + var(--hw-house) + 10px); }

.hw-stamps{ display:flex; flex-wrap:wrap; gap:.6rem; }
.hero__stamp.hw-stamp{ background:var(--black); color:var(--amber); }

.hw-patch{ position:absolute; right:var(--gutter); bottom:1rem; display:flex; align-items:flex-end; gap:.35rem; z-index:0; pointer-events:none; }
.hw-patch .hw-pumpkin{ position:static; width:clamp(34px, 4vw, 54px); }
.hw-patch .hw-pumpkin--p2{ width:clamp(44px, 5.2vw, 72px); }
.hw-patch .hw-pumpkin--p3{ width:clamp(28px, 3.2vw, 44px); }

@media (prefers-reduced-motion:reduce){
  .hw-spider, .hw-bat, .hw-window{ animation:none; }
}

/* ---------- reveal ---------- */
.rise{ opacity:0; translate:0 20px; transition:opacity .6s ease, translate .6s cubic-bezier(.2,.7,.3,1); }
.rise.is-in{ opacity:1; translate:0 0; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .rise{ opacity:1; translate:0 0; transition:none; }
  .marquee__track{ animation:none; }
  .mk:hover, .mk:focus-within, .job:hover, .job:focus-within{ transform:none; box-shadow:none; }
  .mk:hover img, .job:hover .job__art img{ transform:none; }
  *{ transition-duration:.01ms !important; }
}