@import url("site-components.css");

:root{
  --cream:#f6f0e7;
  --cream-dark:#efe6da;
  --cream-deep:#e4dccf;
  --panel:#fffdf7;
  --ink:#201c1a;
  --ink-light:#5c5751;
  --accent:#c8391d;
  --accent-soft:#fde8e3;
  --gold:#f5a800;
  --gold-soft:#fef3d4;
  --highlight:#e07a5f;
  --orange:#c96f4a;
  --slate:#49627a;
  --purple:#7a5ea8;
  --success:#7f9d7a;
  --line:#d8cdbf;
  --blue:#1a6fb0;
  --pink:#d94f7f;
  --radius:14px;
  --radius-sm:8px;
  --shadow:6px 6px 0 rgba(32,28,26,.12);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth;overflow-x:hidden}

body{
  margin:0;
  font-family:"DM Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.5;
  position:relative;
  overflow-x:hidden;
}

h1,h2,h3{
  font-family:"Fraunces","DM Sans",system-ui,sans-serif;
  font-weight:800;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.28;
  background-image:
    linear-gradient(rgba(44,42,38,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44,42,38,.025) 1px, transparent 1px);
  background-size:22px 22px;
  z-index:-1;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9999;
  opacity:.055;
  background-size:180px 180px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{color:inherit}

.shell{
  max-width:1160px;
  margin:0 auto;
  padding:28px 24px 56px;
}

.site-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:22px;
}

.brand-mark{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
  text-decoration:none;
}

.brand-mark::before{
  content:"";
  width:14px;
  height:14px;
  border-radius:3px;
  background:var(--gold);
  border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--accent);
}

.topbar-links{
  display:flex;
  gap:20px;
  align-items:center;
}

.topbar-link{
  font-size:14px;
  color:var(--ink-light);
  text-decoration:none;
}

.topbar-link:hover{color:var(--accent)}

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:8px;
  padding:11px 18px;
  font-size:14px;
  font-weight:700;
  text-decoration:none;
  border:2px solid var(--ink);
  background:#fff;
  box-shadow:3px 3px 0 rgba(32,28,26,.14);
}

.button:hover{transform:translateY(-1px)}

.button.primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}

.button.secondary{
  color:var(--accent);
  background:rgba(255,255,255,.88);
}

.panel{
  background:var(--panel);
  border:2px solid var(--ink);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.overview{
  padding:28px;
  margin-bottom:26px;
  overflow:hidden;
}

.section-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
}

.section-label::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--highlight);
}

.section-label.bold-block{
  background:var(--accent);
  color:#fff;
  padding:7px 14px;
  border-radius:8px;
  font-size:13px;
  box-shadow:3px 3px 0 rgba(0,0,0,.15);
}

.section-label.bold-block::before{
  background:rgba(255,255,255,.5);
}

.overview h2,
.gallery-section h2{
  margin:0 0 10px;
  font-size:28px;
  letter-spacing:-.03em;
}

.overview p,
.gallery-section p{
  margin:0;
  color:var(--ink-light);
}

.sequence{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
  margin-top:20px;
}

.sequence-card{
  background:linear-gradient(180deg,#fff,var(--cream));
  border:1.5px solid var(--cream-deep);
  border-radius:16px;
  padding:18px;
  box-shadow:0 3px 10px rgba(53,43,32,.07);
  transition:transform .18s ease;
  min-width:0;
}

.sequence-card:nth-child(1){transform:rotate(-1.2deg)}
.sequence-card:nth-child(2){transform:rotate(.8deg)}
.sequence-card:nth-child(3){transform:rotate(-0.5deg)}
.sequence-card:nth-child(4){transform:rotate(1.1deg)}
.sequence-card:nth-child(5){transform:rotate(0)}
.sequence-card:hover{transform:rotate(0) translateY(-2px)}

.sequence-card strong{
  display:block;
  margin-bottom:6px;
  font-size:16px;
  color:var(--ink);
}

.sequence-card span{
  display:block;
  font-size:14px;
  color:var(--ink-light);
  line-height:1.4;
}

.sequence-tools{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:10px;
}

.sequence-tools a{
  display:inline-block;
  font-size:10px;
  font-weight:700;
  letter-spacing:.04em;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.7);
  border:1.5px solid rgba(44,42,38,.1);
  color:var(--ink);
  text-decoration:none;
  transition:background .12s,border-color .12s,color .12s;
  max-width:100%;
  line-height:1.2;
  white-space:normal;
}

.sequence-tools a:hover{
  background:#fff;
  border-color:var(--accent);
  color:var(--accent);
}

/* ─── SEQUENCE BRIDGE LINK ─── */
.sequence-bridge{
  display:inline-block;
  margin-top:10px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.04em;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(45,106,79,.08);
  border:1.5px solid rgba(45,106,79,.2);
  color:#2d6a4f;
  text-decoration:none;
  transition:background .12s,border-color .12s;
  max-width:100%;
  line-height:1.2;
  white-space:normal;
}
.sequence-bridge:hover{
  background:rgba(45,106,79,.15);
  border-color:#2d6a4f;
}

/* ─── WHERE TO START ─── */
.start-here{
  padding:28px;
  margin-bottom:26px;
}
.start-here-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:20px;
}
.library-stat-bar{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  font-weight:600;
  color:var(--ink-light);
}
.library-stat-bar a{
  color:var(--ink);
  text-decoration:none;
  font-weight:700;
  transition:color .12s;
}
.library-stat-bar a:hover{color:var(--accent)}
.library-stat-bar span{color:var(--ink-light);font-weight:400}
.catalog-shelves{
  margin-top:0;
  padding-top:28px;
  border-top:1px solid var(--line);
}
.catalog-shelves-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}
.catalog-shelves-head h3{
  margin:0 0 4px;
  font-family:"Fraunces",Georgia,serif;
  font-size:24px;
  font-weight:800;
  letter-spacing:0;
  color:var(--ink);
}
.catalog-shelves-head p{
  margin:5px 0 0;
  max-width:64ch;
  font-size:13px;
  color:var(--ink-light);
}
.catalog-shelf-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.catalog-shelf{
  min-width:0;
  padding:14px;
  border:1.5px solid var(--line);
  border-radius:var(--radius-sm);
  background:#fffdf7;
}
.catalog-shelf-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.catalog-shelf h4{
  margin:0;
  font-size:15px;
  font-weight:900;
  color:var(--ink);
  letter-spacing:-.01em;
}
.catalog-shelf p{
  margin:4px 0 0;
  font-size:12.5px;
  line-height:1.4;
  color:var(--ink-light);
}
.shelf-filter-link{
  flex:0 0 auto;
  appearance:none;
  border:1.5px solid var(--ink);
  border-radius:7px;
  background:var(--ink);
  color:#fff;
  padding:6px 10px;
  font:800 10px/1 "DM Mono",ui-monospace,monospace;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:2px 2px 0 rgba(32,28,26,.12);
}
.shelf-filter-link:hover{transform:translateY(-1px)}
.catalog-shelf-items{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.shelf-card{
  display:block;
  min-width:0;
  padding:10px;
  border:1.5px solid var(--line);
  border-left-width:3px;
  border-radius:8px;
  background:#fff;
  color:var(--ink);
  text-decoration:none;
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.shelf-card:hover{
  transform:translateY(-1px);
  border-color:var(--accent);
  box-shadow:2px 2px 0 rgba(224,122,95,.16);
}
.shelf-card span{
  display:block;
  margin-bottom:4px;
  font:800 9.5px/1 "DM Mono",ui-monospace,monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-light);
}
.shelf-card strong{
  display:block;
  font-size:12.5px;
  line-height:1.25;
}
.shelf-card--bridge{border-left-color:#5c4084}
.shelf-card--tool{border-left-color:var(--accent)}
.shelf-card--sketch{border-left-color:var(--gold)}
@media(max-width:1100px){
  .catalog-shelf-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .catalog-shelf-items{grid-template-columns:1fr}
  .catalog-shelf-top{display:block}
  .shelf-filter-link{margin-top:10px}
}

/* ─── CAMP WORDS STRIP ─── */

.camp-words{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  padding:28px 0 8px;
  font-family:"Fraunces","DM Sans",system-ui,sans-serif;
  font-size:clamp(20px,2.8vw,30px);
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--ink-light);
}

.camp-words .word{
  display:inline-block;
}

.camp-words .sep{
  color:var(--line);
  font-weight:400;
  font-family:"DM Sans",sans-serif;
  font-size:.8em;
}

/* ─── TOOL STATIONS ─── */

/* Tool norms callout */
.tool-norms{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 20px;
  max-width:var(--content-width,1180px);
  margin:0 auto 28px;
  padding:16px var(--page-pad,32px);
  border-top:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
  background:var(--gold-soft);
}
.tool-norms-label{
  font:700 0.68rem/1 "DM Sans",system-ui;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-light);
  flex-shrink:0;
  margin-right:4px;
}
.tool-norm{
  font:500 0.84rem/1.4 "DM Sans",system-ui;
  color:var(--ink);
  display:flex;
  align-items:center;
  gap:5px;
}
.tool-norm::before{
  content:"→";
  font-size:0.72rem;
  color:var(--accent);
  flex-shrink:0;
}
@media(max-width:600px){
  .tool-norms{flex-direction:column;gap:10px}
  .tool-norms-label{margin-bottom:4px}
}

/* Global search */
.global-search-wrap{
  max-width:var(--content-width,1180px);
  margin:0 auto 28px;
  padding:0 var(--page-pad,32px);
}
.global-search{
  width:100%;
  max-width:640px;
  padding:12px 20px;
  border-radius:999px;
  border:1.5px solid var(--line);
  background:#fff;
  font-family:"DM Sans",system-ui,sans-serif;
  font-size:15px;
  color:var(--ink);
  outline:none;
  transition:border-color .15s,box-shadow .15s;
  display:block;
}
.global-search:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(200,57,29,.1)}
.global-search::placeholder{color:var(--ink-light)}
.global-search::-webkit-search-cancel-button{-webkit-appearance:none}

.catalog-filter-status{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px 14px;
  margin:12px 0 4px;
  padding:10px 12px;
  border:1.5px solid var(--line);
  border-radius:var(--radius-sm);
  background:#fffdf7;
}
.filter-count{
  font:700 13px/1 "DM Mono",ui-monospace,monospace;
  letter-spacing:0;
  text-transform:none;
  color:var(--ink);
}
.filter-token-list{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:7px;
}
.filter-token{
  display:inline-flex;
  align-items:center;
  gap:7px;
  max-width:240px;
  border:1.5px solid rgba(32,28,26,.18);
  border-radius:999px;
  background:var(--cream);
  color:var(--ink);
  padding:5px 8px 5px 10px;
  font:800 11px/1.1 "DM Sans",system-ui,sans-serif;
  cursor:pointer;
}
.filter-token span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.filter-token b{
  display:inline-grid;
  place-items:center;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--ink);
  color:#fff;
  font-size:11px;
  line-height:1;
}
.filter-token:hover{border-color:var(--accent)}
.filter-empty{
  font-size:12px;
  color:var(--ink-light);
}

.catalog-lens-bar{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px 8px;
  margin:12px 0 10px;
  padding:12px 0 0;
  border-top:1px solid var(--line);
}

.catalog-lens-bar span{
  margin-right:2px;
  font:800 11px/1 "DM Mono",ui-monospace,monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-light);
}

.lens-btn{
  appearance:none;
  border:1.5px solid var(--line);
  border-radius:999px;
  background:transparent;
  color:var(--ink-light);
  padding:6px 14px;
  font:800 12px/1 "DM Sans",system-ui,sans-serif;
  cursor:pointer;
}

.lens-btn:hover,
.lens-btn.active{
  border-color:var(--ink);
  background:var(--ink);
  color:#fff;
}

.catalog-refine-bar{
  display:grid;
  gap:10px;
  margin:0 0 16px;
  padding:12px;
  border:1.5px solid var(--line);
  border-radius:var(--radius-sm);
  background:#fffdf7;
}

.refine-group{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
}

.refine-group > span{
  flex:0 0 74px;
  font:800 11px/1 "DM Mono",ui-monospace,monospace;
  letter-spacing:0;
  text-transform:none;
  color:var(--ink-light);
}

.refine-chip{
  appearance:none;
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:30px;
  border:1.5px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:var(--ink);
  padding:5px 8px 5px 11px;
  font:800 12px/1 "DM Sans",system-ui,sans-serif;
  cursor:pointer;
  transition:background .15s,border-color .15s,color .15s,opacity .15s;
}

.refine-chip b{
  font:inherit;
  min-width:0;
}

.refine-chip em{
  display:inline-grid;
  place-items:center;
  min-width:21px;
  height:20px;
  padding:0 5px;
  border-radius:999px;
  background:var(--cream);
  color:var(--ink);
  font:900 11px/1 "DM Mono",ui-monospace,monospace;
  font-style:normal;
}

.refine-chip:hover,
.refine-chip.active{
  border-color:var(--ink);
  background:var(--ink);
  color:#fff;
}

.refine-chip:hover em,
.refine-chip.active em{
  background:#fff;
  color:var(--ink);
}

.refine-chip:disabled{
  opacity:.42;
  cursor:not-allowed;
  border-color:rgba(32,28,26,.16);
  background:rgba(255,255,255,.55);
  color:var(--ink-light);
}

.refine-chip:disabled:hover{
  border-color:rgba(32,28,26,.16);
  background:rgba(255,255,255,.55);
  color:var(--ink-light);
}

/* Camp Press filter/search strip */
.global-search{
  max-width:none;
  border:1.5px solid var(--line);
  border-radius:0;
  background:var(--panel);
  box-shadow:none;
  font-family:"DM Sans",system-ui,sans-serif;
}

.global-search:focus{
  border-color:var(--ink);
  box-shadow:4px 4px 0 rgba(32,28,26,.12);
}

.catalog-filter-status,
.catalog-refine-bar{
  border:1.5px solid var(--line);
  border-radius:0;
  background:var(--panel);
}

.catalog-lens-bar{
  padding:12px;
  border:1.5px solid var(--line);
  background:var(--panel);
}

.lens-btn,
.refine-chip,
.filter-token{
  border:1.5px solid var(--line);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.lens-btn:hover,
.lens-btn.active,
.refine-chip:hover,
.refine-chip.active,
.filter-token:hover{
  border:2px solid var(--ink);
  background:var(--ink);
  color:var(--cream);
}

.refine-chip em,
.filter-token b{
  border-radius:0;
}

.lens-btn.active,
.refine-chip.active{
  color:var(--cream);
}

.refine-chip:disabled em{
  background:rgba(32,28,26,.08);
  color:var(--ink-light);
}

.catalog-lens-panel{
  margin:0 0 18px;
}

.catalog-lens-groups{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.catalog-lens-group{
  min-width:0;
  padding:14px;
  border:1.5px solid var(--line);
  border-radius:var(--radius-sm);
  background:#fffdf7;
}

.catalog-lens-group header{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(32,28,26,.1);
  margin-bottom:10px;
}

.catalog-lens-group h3{
  margin:0;
  font-size:15px;
  font-weight:900;
  letter-spacing:-.01em;
  color:var(--ink);
}

.catalog-lens-group p{
  margin:4px 0 0;
  font-size:12.5px;
  color:var(--ink-light);
  line-height:1.35;
}

.catalog-lens-group header > span{
  flex:0 0 auto;
  display:inline-grid;
  place-items:center;
  min-width:30px;
  height:30px;
  border-radius:50%;
  background:var(--cream);
  border:1.5px solid var(--line);
  color:var(--ink);
  font:900 12px/1 "DM Mono",ui-monospace,monospace;
}

.catalog-lens-links{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.lens-link{
  display:block;
  min-width:0;
  padding:9px 10px;
  border:1.5px solid var(--line);
  border-left-width:3px;
  border-radius:8px;
  background:#fff;
  color:var(--ink);
  text-decoration:none;
  transition:transform .12s ease, border-color .12s ease;
}

.lens-link:hover{
  transform:translateY(-1px);
  border-color:var(--accent);
}

.lens-link span{
  display:block;
  margin-bottom:4px;
  font:800 9px/1 "DM Mono",ui-monospace,monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-light);
}

.lens-link strong{
  display:block;
  font-size:12.5px;
  line-height:1.25;
}

.lens-link--bridge{border-left-color:#5c4084}
.lens-link--tool{border-left-color:var(--accent)}
.lens-link--sketch{border-left-color:var(--gold)}

.lens-more{
  margin-top:8px;
  font-size:12px;
  font-weight:700;
  color:var(--ink-light);
}

.catalog-lens-empty{
  padding:16px;
  border:1.5px dashed var(--line);
  border-radius:var(--radius-sm);
  color:var(--ink-light);
  background:#fffdf7;
}

.catalog-lens-empty strong{
  display:block;
  color:var(--ink);
}

@media(max-width:900px){
  .catalog-lens-groups{grid-template-columns:1fr}
}

@media(max-width:560px){
  .catalog-filter-status{display:block}
  .filter-token-list{justify-content:flex-start;margin-top:8px}
  .catalog-lens-links{grid-template-columns:1fr}
}

/* Search-active: override all collapsed-section hide rules */
body.search-active #interactive-tools.is-collapsible:not(.is-open) .station-list,
body.search-active #concept-bridges.is-collapsible:not(.is-open) .station-list{display:block !important}
body.search-active .station.is-collapsible:not(.is-open) .tool-grid{display:flex !important;flex-wrap:wrap}
body.search-active .station.is-collapsible:not(.is-open) .tool-grid .tool-card{display:flex !important}
body.search-active #starter-sketches.is-collapsible:not(.is-open) .tool-grid{display:flex !important;flex-wrap:wrap}
body.search-active #starter-sketches.is-collapsible:not(.is-open) .tool-grid .tool-card{display:flex !important}
body.search-active .station-peek-trigger{display:none !important}

/* Legacy alias kept for any remaining references */
.tool-search-wrap{margin-bottom:14px}
.tool-search{
  width:100%;
  max-width:520px;
  padding:9px 16px;
  border-radius:999px;
  border:1.5px solid var(--line);
  background:#fff;
  font-family:"DM Sans",system-ui,sans-serif;
  font-size:14px;
  color:var(--ink);
  outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.tool-search:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(200,57,29,.1)}
.tool-search::placeholder{color:var(--ink-light)}
.tool-search::-webkit-search-cancel-button{-webkit-appearance:none}

/* Pairs-with link */
.pairs-link{font-size:12px;color:var(--ink-light);margin-top:2px;margin-bottom:6px}
.pairs-link a{color:var(--accent);text-decoration:none;font-weight:600}
.pairs-link a:hover{text-decoration:underline}

.suit-legend{
  margin:8px 0 0;
  font-size:11px;
  color:var(--ink-light);
  line-height:1.5;
}

.station-list{
  display:flex;
  flex-direction:column;
  gap:0;
}

.station{
  padding:30px 0;
  border-top:1px solid var(--line);
}

.station:first-child{border-top:none;padding-top:0}

.station-header{
  display:flex;
  align-items:baseline;
  gap:14px;
  margin-bottom:20px;
  flex-wrap:wrap;
}

.station.is-collapsible .station-header,
#starter-sketches.is-collapsible .gallery-header,
#interactive-tools.is-collapsible .gallery-header,
#concept-bridges.is-collapsible .gallery-header{
  align-items:center;
  cursor:pointer;
  padding:14px 16px;
  margin-bottom:16px;
  border:1px solid rgba(44,42,38,.08);
  border-radius:16px;
  background:rgba(255,255,255,.66);
  transition:border-color .16s ease, background .16s ease, transform .16s ease;
}

.station.is-collapsible .station-header:hover,
.station.is-collapsible .station-header:focus-visible,
#starter-sketches.is-collapsible .gallery-header:hover,
#starter-sketches.is-collapsible .gallery-header:focus-visible,
#interactive-tools.is-collapsible .gallery-header:hover,
#interactive-tools.is-collapsible .gallery-header:focus-visible,
#concept-bridges.is-collapsible .gallery-header:hover,
#concept-bridges.is-collapsible .gallery-header:focus-visible{
  border-color:rgba(200,57,29,.2);
  background:#fff;
  transform:translateY(-1px);
  outline:none;
}

/* Station collapsed: no header button — the peek trigger is the CTA */
/* Station open: show "Hide tools" */
.station.is-collapsible.is-open .station-header::after{
  content:"Hide tools";
  margin-left:auto;
  padding:6px 10px;
  border-radius:999px;
  background:var(--cream);
  color:var(--accent);
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
}

/* Concept bridge stations: label says "bridges" */
#concept-bridges .station.is-collapsible.is-open .station-header::after{
  content:"Hide bridges";
}

/* Starter sketches section: label */
#starter-sketches.is-collapsible.is-open .gallery-header::after{
  content:"Hide sketches";
  margin-left:auto;
  padding:6px 10px;
  border-radius:999px;
  background:var(--cream);
  color:var(--accent);
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
}

/* Workshop tools section: label */
#interactive-tools.is-collapsible.is-open .gallery-header::after{
  content:"Hide tools";
  margin-left:auto;
  padding:6px 10px;
  border-radius:999px;
  background:var(--cream);
  color:var(--accent);
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
}

/* Concept bridges section: label */
#concept-bridges.is-collapsible.is-open .gallery-header::after{
  content:"Hide bridges";
  margin-left:auto;
  padding:6px 10px;
  border-radius:999px;
  background:var(--cream);
  color:var(--accent);
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
}

.station.is-collapsible.is-open .station-header,
#starter-sketches.is-collapsible.is-open .gallery-header,
#interactive-tools.is-collapsible.is-open .gallery-header,
#concept-bridges.is-collapsible.is-open .gallery-header{
  margin-bottom:20px;
}

/* Station collapsed: show first 3 cards as a peek, hide the rest */
.station.is-collapsible:not(.is-open) .tool-grid .tool-card:nth-child(n+4){
  display:none;
}

/* Starter sketches: show first 3 cards as a peek */
#starter-sketches.is-collapsible:not(.is-open) .tool-grid .tool-card:nth-child(n+4){
  display:none;
}

/* Section-level collapse: hide station-list and filter bars */
#interactive-tools.is-collapsible:not(.is-open) .station-list,
#interactive-tools.is-collapsible:not(.is-open) .tool-search-wrap,
#interactive-tools.is-collapsible:not(.is-open) .suit-legend,
#concept-bridges.is-collapsible:not(.is-open) .station-list{
  display:none;
}

/* Peek trigger — spans remaining grid columns next to the first card */
.station-peek-trigger{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  border:1.5px dashed rgba(44,42,38,.13);
  background:rgba(255,255,255,.38);
  cursor:pointer;
  padding:12px 20px;
  transition:background .15s ease, border-color .15s ease;
}

.station-peek-trigger:hover{
  background:#fff;
  border-color:var(--suit-color,var(--accent));
  border-style:solid;
}

.station.is-collapsible.is-open .station-peek-trigger,
#starter-sketches.is-collapsible.is-open .station-peek-trigger{
  display:none;
}

/* Hide full gallery-peek container when section is expanded */
#interactive-tools.is-collapsible.is-open .gallery-peek,
#concept-bridges.is-collapsible.is-open .gallery-peek{
  display:none;
}

.gallery-peek{margin-bottom:8px}

/* Solo station (1 card): constrain width so no empty gap appears */
.station[data-card-count="1"]:not(#station-support) .tool-grid{
  grid-template-columns:minmax(0,380px);
}
/* Two-card station: even columns */
.station[data-card-count="2"] .tool-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.station-peek-btn{
  font-family:"DM Sans",sans-serif;
  font-size:13px;
  font-weight:700;
  color:var(--suit-color,var(--accent));
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
  pointer-events:none;
}

.station-name{
  font-family:"Fraunces","DM Sans",system-ui,sans-serif;
  font-size:24px;
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--ink);
  white-space:nowrap;
}

.station-name::before{
  font-size:.7em;
}
.station[data-suit="marks"]  .station-name::before{content:"✦ ";color:#c8391d}
.station[data-suit="motion"] .station-name::before{content:"◎ ";color:#b07d00}
.station[data-suit="systems"].station-name::before,.station[data-suit="systems"] .station-name::before{content:"⬡ ";color:#2d6a4f}
.station[data-suit="data"]   .station-name::before{content:"▦ ";color:#1a5fa0}
.station[data-suit="open"]   .station-name::before{content:"☽ ";color:#5c4084}
.station[data-suit="support"].station-name::before,.station[data-suit="support"] .station-name::before{content:"⊕ ";color:var(--ink-light)}

.station-desc{
  margin:0;
  color:var(--ink-light);
  font-size:13px;
  line-height:1.4;
}

/* ─── GALLERY ─── */

.gallery{
  display:grid;
  gap:24px;
}

.gallery-section{
  padding:28px;
}

.gallery-header{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:18px;
  margin-bottom:18px;
}

.gallery-header-copy{
  max-width:720px;
}

.resource-rhythm{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-top:16px;
}

.resource-rhythm span{
  display:block;
  padding:10px 12px;
  border:2px solid var(--line);
  border-radius:var(--radius-sm);
  background:#fff;
  color:var(--ink-light);
  font-size:12px;
  line-height:1.35;
}

.resource-rhythm strong{
  display:block;
  color:var(--ink);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:3px;
}

.gallery-count{
  flex-shrink:0;
  padding:8px 12px;
  border-radius:7px;
  background:var(--gold-soft);
  border:2px solid var(--ink);
  color:var(--accent);
  font-size:12px;
  font-weight:700;
}

.tool-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.tool-card{
  position:relative;
  overflow:hidden;
  background:#fffdf7;
  border:2px solid var(--ink);
  border-radius:var(--radius-sm);
  padding:22px;
  min-height:390px;
  display:flex;
  flex-direction:column;
  gap:14px;
  --card-tilt:0deg;
  transform:rotate(var(--card-tilt));
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

@keyframes cardFallIn{
  from{opacity:0;transform:rotate(var(--card-tilt)) translateY(-110px) scale(.76)}
  to{opacity:1;transform:rotate(var(--card-tilt)) translateY(0) scale(1)}
}

.tool-card{animation:cardFallIn .7s cubic-bezier(.15,.7,0,1.22) both}
.tool-card:nth-child(1){animation-delay:.06s}
.tool-card:nth-child(2){animation-delay:.14s}
.tool-card:nth-child(3){animation-delay:.22s}
.tool-card:nth-child(4){animation-delay:.3s}
.tool-card:nth-child(5){animation-delay:.38s}
.tool-card:nth-child(6){animation-delay:.46s}
.tool-card:nth-child(7){animation-delay:.54s}
.tool-card:nth-child(8){animation-delay:.62s}
.tool-card:nth-child(9){animation-delay:.7s}
.tool-card:nth-child(n+10){animation-delay:.78s}

.tool-card:nth-child(3n+1){--card-tilt:-.4deg}
.tool-card:nth-child(3n+2){--card-tilt:.5deg}
.tool-card:nth-child(3n){--card-tilt:-.2deg}

.tool-card:hover{
  transform:rotate(var(--card-tilt)) translateY(-4px) scale(1.008);
  box-shadow:7px 7px 0 rgba(32,28,26,.16);
  border-color:var(--ink);
}

.tool-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:8px;
  background:var(--accent);
}

/* ── tarot suit treatment ── */
.suit-marks  {--suit-color:#c8391d;--suit-border:rgba(200,57,29,.18);--suit-bg:rgba(200,57,29,.07)}
.suit-motion {--suit-color:#b07d00;--suit-border:rgba(176,125,0,.18);--suit-bg:rgba(176,125,0,.07)}
.suit-systems{--suit-color:#2d6a4f;--suit-border:rgba(45,106,79,.18);--suit-bg:rgba(45,106,79,.07)}
.suit-data   {--suit-color:#1a5fa0;--suit-border:rgba(26,95,160,.18);--suit-bg:rgba(26,95,160,.07)}
.suit-open   {--suit-color:#5c4084;--suit-border:rgba(92,64,132,.18);--suit-bg:rgba(92,64,132,.07)}
.suit-support{--suit-color:#6b6560;--suit-border:rgba(107,101,96,.18);--suit-bg:rgba(107,101,96,.07)}

.tool-card[class*="suit-"]::before{background:var(--suit-color)}
.tool-card[class*="suit-"]:hover{border-color:var(--suit-border)}

.tool-card[class*="suit-"] .pill.session{
  color:var(--suit-color);
  border-color:var(--suit-color);
  background:var(--suit-bg);
}

.card-pip,.card-pip-br{
  position:absolute;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  line-height:1;
  gap:4px;
  min-width:30px;
  min-height:40px;
  padding:7px 8px;
  border-radius:7px;
  background:#fff;
  border:1.5px solid rgba(32,28,26,.55);
  box-shadow:2px 2px 0 rgba(32,28,26,.08);
  color:var(--suit-color,var(--accent));
  font-family:"DM Mono",ui-monospace,monospace;
  pointer-events:none;
  z-index:2;
}
.card-pip{top:14px;left:16px}
.card-pip-br{bottom:14px;right:16px}
.card-pip .pip-num,.card-pip-br .pip-num{font-size:13px;font-weight:800;letter-spacing:.03em}
.card-pip .pip-sym,.card-pip-br .pip-sym{font-size:11px}

#starter-sketches .tool-card::before{
  background:repeating-linear-gradient(
    90deg,
    var(--gold) 0 18px,
    var(--highlight) 18px 36px,
    var(--accent) 36px 54px
  );
}

.tool-preview{
  position:relative;
  height:132px;
  margin-bottom:2px;
  border-radius:8px;
  overflow:hidden;
  border:2px solid var(--ink);
  background:
    radial-gradient(circle at 20% 20%, rgba(224,122,95,.16), transparent 34%),
    radial-gradient(circle at 80% 10%, rgba(129,178,154,.16), transparent 30%),
    linear-gradient(180deg, #fffdf8, #f4eee3);
  transform-origin:center;
  transition:transform .18s ease, box-shadow .18s ease;
}

.tool-preview canvas{
  display:block;
  width:100%;
  height:100%;
}

.tool-card:hover .tool-preview{
  transform:rotate(-.4deg) scale(1.01);
  box-shadow:inset 0 0 0 1px rgba(61,90,128,.18);
}

.preview-badge{
  position:absolute;
  bottom:10px;
  left:10px;
  z-index:1;
  border-radius:6px;
  padding:4px 8px;
  background:rgba(255,255,255,.84);
  border:1.5px solid var(--ink);
  color:var(--accent);
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-family:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

.tool-preview::after{
  content:"";
  position:absolute;
  inset:auto 12px 12px auto;
  width:34px;
  height:34px;
  border-radius:999px;
  background:rgba(255,255,255,.48);
  border:1px solid rgba(44,42,38,.06);
  pointer-events:none;
  opacity:0;
  transition:opacity .2s ease;
}
.tool-card:hover .tool-preview::after{opacity:1}

.tool-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.pill{
  display:inline-flex;
  align-items:center;
  border-radius:6px;
  padding:3px 8px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  border:1.5px solid;
  box-shadow:1px 1px 0 rgba(0,0,0,.1);
}

.pill.session{
  background:#fff;
  color:var(--accent);
  border-color:var(--accent);
}

.pill.type{
  background:#fff;
  color:var(--slate);
  border-color:var(--slate);
}

.pill.seed{
  background:#fff;
  color:var(--purple);
  border-color:var(--purple);
}

.pill.bridge{
  background:#fff;
  color:var(--purple);
  border-color:var(--purple);
}

.pill.core{
  background:linear-gradient(135deg,var(--accent),var(--gold));
  color:#fff;
  border-color:transparent;
  box-shadow:0 1px 4px rgba(200,57,29,.25);
}
.pill.beginner{background:rgba(45,106,79,.09);color:#2d6a4f;border-color:rgba(45,106,79,.35)}
.pill.extension{background:rgba(176,125,0,.09);color:#8c6400;border-color:rgba(176,125,0,.35)}
.pill.capstone{background:rgba(92,64,132,.09);color:#5c4084;border-color:rgba(92,64,132,.35)}

.tool-card[data-core]{
  border-color:rgba(200,57,29,.15);
}

.tool-card h3{
  margin:0;
  font-size:24px;
  line-height:1.08;
  letter-spacing:-.03em;
}

.tool-description{
  margin:0;
  color:var(--ink-light);
  font-size:15px;
}

.catalog-card-cue{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:36px;
  margin-top:auto;
  padding:9px 10px;
  border:1.5px solid var(--line);
  border-radius:8px;
  background:var(--paper);
  color:var(--ink);
  font-family:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;
  line-height:1.2;
}

.catalog-card-cue--bridge{
  border-color:rgba(92,64,132,.24);
  background:rgba(92,64,132,.055);
}

.catalog-card-cue--tool{
  border-color:var(--suit-border, var(--line));
  background:var(--suit-bg, var(--paper));
}

.catalog-card-cue--sketch{
  border-color:rgba(32,28,26,.22);
  background:#211f1c;
  color:#fff8ea;
}

.cue-idea,
.cue-label{
  color:var(--ink-light);
  font-family:"DM Sans",system-ui,sans-serif;
  font-style:italic;
  white-space:nowrap;
}

.cue-arrow{
  color:var(--accent);
  font-weight:800;
}

.cue-code{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--ink);
  font-weight:700;
}

.cue-track{
  position:relative;
  flex:1 1 auto;
  min-width:70px;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--suit-color,var(--accent)) 0 46%, var(--line) 46% 100%);
}

.cue-knob{
  position:absolute;
  left:46%;
  top:50%;
  width:13px;
  height:13px;
  border:1.5px solid var(--ink);
  border-radius:50%;
  background:#fff;
  transform:translate(-50%,-50%);
  box-shadow:1px 1px 0 rgba(32,28,26,.14);
}

.cue-dots{
  color:var(--suit-color,var(--accent));
  letter-spacing:.08em;
  white-space:nowrap;
}

.catalog-card-cue--sketch code{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:inherit;
}

.catalog-card-cue--sketch mark{
  padding:1px 4px;
  border-radius:4px;
  background:var(--gold);
  color:#211f1c;
}

.tag-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:0;
}

.tag{
  display:inline-flex;
  align-items:center;
  border-radius:5px;
  padding:3px 8px;
  background:#fff;
  border:1.5px solid var(--line);
  color:var(--ink-light);
  font-size:11px;
  font-weight:600;
  letter-spacing:.02em;
  box-shadow:1px 1px 0 rgba(0,0,0,.07);
}

.tool-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:2px;
}

.tool-actions .button{
  padding:10px 14px;
}

.tool-actions .button.primary{
  background:var(--suit-color,var(--accent));
  border-color:var(--suit-color,var(--accent));
  color:#fff;
}
.tool-card.suit-motion .tool-actions .button.primary{color:#211f1c}

/* Camp Press catalog card grammar */
.tool-card{
  overflow:visible;
  border:2px solid var(--ink);
  border-radius:0;
  background:var(--panel);
  box-shadow:7px 7px 0 rgba(32,28,26,.14);
  transform:none;
}

.tool-card:nth-child(n){--card-tilt:0deg}

.tool-card:hover{
  transform:translateY(-3px);
  border-color:var(--ink);
  box-shadow:9px 9px 0 rgba(32,28,26,.16);
}

.tool-card[class*="suit-"]:hover{border-color:var(--ink)}

.card-pip,
.card-pip-br{
  display:none;
}

.tool-card h3{
  font-family:"Fraunces","DM Sans",system-ui,sans-serif;
  font-weight:800;
  letter-spacing:-.02em;
}

.tool-card .pill{
  border-radius:0;
  box-shadow:none;
  font-family:"DM Mono",ui-monospace,monospace;
  font-size:9px;
  letter-spacing:.08em;
}

.tool-card .pill.bridge,
.tool-card .pill.type,
.tool-card .pill.seed{
  color:#fff;
  border-color:transparent;
}

.tool-card .pill.bridge{background:var(--purple)}
.tool-card .pill.type{background:var(--highlight)}
.tool-card .pill.seed{background:var(--success)}

.tool-card[class*="suit-"] .pill.session{
  border-color:var(--line);
  background:transparent;
  color:var(--ink-light);
}

.tag-row .tag{
  border-radius:0;
  background:transparent;
}

.tool-actions .button{
  border-radius:0;
  box-shadow:3px 3px 0 rgba(32,28,26,.14);
}

.button.text-link{
  background:transparent;
  color:var(--accent);
  border-color:transparent;
  padding-left:0;
  box-shadow:none;
}

.about-page{
  display:grid;
  gap:22px;
}

/* hero */
.about-hero{
  border:2px solid var(--ink);
  background:var(--panel);
  box-shadow:7px 7px 0 rgba(32,28,26,.12);
  padding:38px;
}

.about-eyebrow{
  font:600 11px/1 "DM Mono",ui-monospace,monospace;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:14px;
}

.about-hero h1{
  max-width:18ch;
  margin:0 0 14px;
  font-weight:900;
  font-size:clamp(34px,5vw,58px);
  line-height:.98;
  letter-spacing:-.025em;
}

.about-hero .lede{
  margin:0;
  max-width:60ch;
  font-size:clamp(16px,1.8vw,19px);
  line-height:1.55;
  color:var(--ink-light);
}

/* about cards grid */
.about-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.about-card{
  border:2px solid var(--ink);
  background:var(--panel);
  box-shadow:7px 7px 0 rgba(32,28,26,.12);
  overflow:hidden;
}

.about-card.wide{grid-column:1 / -1}

.acard-bar{
  height:10px;
  background:var(--sa, var(--gold));
}

.acard-in{padding:20px 22px 22px}

.acard-key{
  font:600 9.5px/1 "DM Mono",ui-monospace,monospace;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink-light);
  display:flex;
  align-items:center;
  gap:8px;
}

.acard-glyph{
  color:var(--sa, var(--gold));
  font-size:14px;
}

.about-card h2{
  font-weight:800;
  font-size:22px;
  line-height:1.06;
  margin:10px 0 0;
}

.about-card p{
  margin:11px 0 0;
  font-size:14.5px;
  line-height:1.5;
  color:var(--ink-light);
}

.about-card p a{
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px solid rgba(200,57,29,.35);
}

/* note from saber */
.about-note{
  border:2px solid var(--ink);
  border-left:6px solid var(--accent);
  background:var(--panel);
  box-shadow:7px 7px 0 rgba(32,28,26,.12);
  padding:26px 28px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:24px;
  align-items:start;
}

.about-note-mark{
  font-family:"Fraunces",serif;
  font-weight:900;
  font-size:64px;
  line-height:.7;
  color:var(--accent);
}

.about-note h2{
  font-weight:800;
  font-size:22px;
  margin:0 0 8px;
}

.about-note p{
  margin:0;
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  max-width:60ch;
}

.about-note-by{
  margin-top:12px;
  font:500 11px/1 "DM Mono",ui-monospace,monospace;
  color:var(--ink-light);
}

.about-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.site-footer{
  margin-top:26px;
  padding:20px;
  border:2px solid var(--ink);
  border-radius:var(--radius);
  background:#fffdf7;
  color:var(--ink-light);
  font-size:13px;
  text-align:center;
}

.site-footer p{margin:0}

.footer-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 14px;
  margin-top:10px;
}

.footer-links a{
  color:var(--accent);
  font-weight:700;
  text-decoration:none;
}

.footer-links a:hover{text-decoration:underline}

@media(max-width:980px){
  .tool-grid,
  .sequence{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:720px){
  .shell{padding:20px 16px 48px}
  .overview,
  .gallery-section{padding:22px}
  .tool-grid,
  .sequence{grid-template-columns:1fr}
  #station-support .tool-grid{grid-template-columns:1fr}
  .gallery-header,
  .site-topbar{display:block}
  .resource-rhythm{grid-template-columns:1fr}
  .about-hero{padding:24px}
  .about-grid{grid-template-columns:1fr}
  .about-card.wide{grid-column:1}
  .about-note{grid-template-columns:1fr}
  .about-note-mark{display:none}
  .about-actions{display:grid}
  .about-actions .button{width:100%}
  .gallery-count{display:inline-flex;margin-top:12px}
  .topbar-link{display:inline-block;margin-top:10px}
  .tool-card{min-height:unset}
  /* Flatten rotated full-width elements
     paint outside their layout box and defeat overflow containment */
  .sequence-card:nth-child(n){transform:none}
}

/* ── Camp Press Homepage ─────────────────────────────────────────────────── */

/* sticky topbar override */
.hp-topbar{position:sticky;top:0;z-index:50;background:var(--cream);border-bottom:2px solid var(--ink);margin-bottom:0;padding:13px 0}
.hp-topbar .brand-mark::before{display:none}
.hp-topbar .topbar-link{font:500 12px/1 "DM Mono",ui-monospace,monospace;color:var(--ink-light);text-decoration:none}
.hp-topbar .topbar-link:hover{color:var(--accent)}
@media(max-width:760px){.hp-gh{display:none}}

/* hero flyer */
.hp-flyer{margin:0;border:2.5px solid var(--ink);background:var(--panel);box-shadow:14px 14px 0 rgba(32,28,26,.14)}
.hp-flyer-bar{background:var(--gold);display:flex;align-items:center;justify-content:space-between;padding:9px 20px;border-bottom:2.5px solid var(--ink)}
.hp-flyer-bar span{font:500 10px/1 "DM Mono",ui-monospace,monospace;letter-spacing:.2em;text-transform:uppercase;color:#3a2a08}
.hp-flyer-body{display:grid;grid-template-columns:1.05fr .95fr}
@media(max-width:860px){.hp-flyer-body{grid-template-columns:1fr}}
.hp-flyer-text{padding:46px 44px 40px;border-right:2.5px solid var(--ink)}
@media(max-width:860px){.hp-flyer-text{border-right:none;border-bottom:2.5px solid var(--ink)}}
.hp-eye{font:600 11px/1 "DM Mono",ui-monospace,monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.hp-flyer-text h1{font-family:"Fraunces",serif;font-weight:900;font-size:clamp(40px,5.4vw,68px);line-height:.9;letter-spacing:-.035em;margin:18px 0 0}
.hp-flyer-text h1 em{font-style:normal;color:var(--accent)}
.hp-lede{margin:22px 0 0;max-width:40ch;font-size:16px;line-height:1.55;color:var(--ink-light)}
.hp-cta{margin-top:28px;display:flex;gap:13px;flex-wrap:wrap;align-items:center}
.hp-btn{font:700 13px/1 "DM Sans",system-ui,sans-serif;padding:13px 20px;text-decoration:none;border:2px solid var(--ink);background:var(--ink);color:var(--cream)}
.hp-btn:hover{background:var(--accent);border-color:var(--accent)}
.hp-tlink{font:600 12.5px/1 "DM Sans",system-ui,sans-serif;text-decoration:none;border-bottom:2px solid var(--line);padding-bottom:3px}
.hp-tlink:hover{border-color:var(--accent);color:var(--accent)}
.hp-flyer-sketch{position:relative;min-height:430px}
.hp-sketch-host{position:absolute;inset:0}
.hp-sketch-tag{position:absolute;left:16px;bottom:14px;z-index:2;font:500 10px/1 "DM Mono",ui-monospace,monospace;color:var(--ink-light);background:rgba(246,240,231,.72);border:1px solid var(--line);padding:6px 10px;display:flex;align-items:center;gap:7px}
.hp-sketch-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);animation:hp-pulse 1.6s ease-in-out infinite}
@keyframes hp-pulse{0%,100%{opacity:1}50%{opacity:.3}}
@media(prefers-reduced-motion:reduce){.hp-sketch-tag::before{animation:none}}

/* counts ribbon */
.hp-ribbon{display:grid;grid-template-columns:repeat(4,1fr);border:2px solid var(--ink);border-top:none;background:var(--panel)}
@media(max-width:760px){.hp-ribbon{grid-template-columns:repeat(2,1fr)}}
.hp-ribbon>div{padding:18px 22px;border-left:1px solid var(--line)}
.hp-ribbon>div:first-child{border-left:none}
.hp-ribbon strong{font-family:"Fraunces",serif;font-weight:900;font-size:34px;letter-spacing:-.03em;color:var(--accent);display:block;line-height:.9}
.hp-ribbon span{display:block;margin-top:7px;font:600 12px/1.2 "DM Sans",system-ui,sans-serif}
.hp-ribbon small{display:block;margin-top:3px;font:500 10.5px/1.3 "DM Mono",ui-monospace,monospace;color:var(--ink-light)}

/* section frame */
.hp-sec{padding:58px 0 0}
.hp-sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.hp-k{font:600 11px/1 "DM Mono",ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.hp-sec-h h2{font-family:"Fraunces",serif;font-weight:800;font-size:clamp(24px,3.2vw,36px);letter-spacing:-.025em;margin:8px 0 0}
.hp-more{font:600 12px/1 "DM Mono",ui-monospace,monospace;color:var(--ink-light);text-decoration:none;white-space:nowrap}
.hp-more:hover{color:var(--accent)}
.hp-intro{margin:10px 0 0;max-width:60ch;font-size:15px;line-height:1.5;color:var(--ink-light)}

/* arc */
.hp-arc{margin-top:28px;display:flex;align-items:flex-start}
.hp-acol{flex:1;display:flex;flex-direction:column;align-items:center;text-decoration:none;position:relative;padding:0 6px}
.hp-aln{position:absolute;top:18px;left:-50%;width:100%;height:2px;background:var(--line)}
.hp-acol:first-child .hp-aln{display:none}
.hp-and{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;z-index:1;box-shadow:0 0 0 4px var(--cream)}
.hp-ann{font:500 10px/1 "DM Mono",ui-monospace,monospace;color:var(--ink-light);margin-top:13px}
.hp-att{font:600 13px/1.2 "DM Sans",system-ui,sans-serif;text-align:center;margin-top:5px;letter-spacing:-.01em;max-width:14ch}
@media(max-width:680px){.hp-att{display:none}}

/* shelves */
.hp-shelf{margin-top:26px}
.hp-shelf-h{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.hp-st{font-family:"Fraunces",serif;font-weight:700;font-size:19px;letter-spacing:-.015em}
.hp-sd{font-size:12.5px;color:var(--ink-light)}
.hp-shelf-row{display:flex;gap:12px;overflow:auto;padding-bottom:6px;scroll-snap-type:x proximity}
.hp-scard{flex:0 0 210px;border:1.5px solid var(--line);background:var(--panel);padding:15px;text-decoration:none;display:flex;flex-direction:column;gap:9px;scroll-snap-align:start;transition:border-color .15s,box-shadow .15s,transform .15s}
.hp-scard:hover{border-color:var(--ink);box-shadow:5px 5px 0 rgba(32,28,26,.12);transform:translateY(-2px)}
.hp-sk{font:600 9px/1 "DM Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:6px;color:var(--ink-light)}
.hp-dot{width:7px;height:7px;border-radius:50%}
.hp-sk.sketch .hp-dot{background:transparent!important;border:1.5px solid currentColor}
.hp-snm{font:700 15px/1.15 "DM Sans",system-ui,sans-serif;letter-spacing:-.01em}
.hp-smeta{margin-top:auto;font:500 10.5px/1 "DM Mono",ui-monospace,monospace;color:var(--ink-light)}
.hp-sgo{font:600 10.5px/1 "DM Mono",ui-monospace,monospace;color:var(--accent)}

/* card grammar gallery */
.hp-cards{margin-top:24px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:880px){.hp-cards{grid-template-columns:1fr}}
.hp-card{border:2px solid var(--ink);background:var(--panel);box-shadow:6px 6px 0 rgba(32,28,26,.12);padding:18px 18px 16px;display:flex;flex-direction:column}
.hp-pills{display:flex;gap:7px;margin-bottom:11px}
.hp-pill{font:600 9px/1 "DM Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;border:1.5px solid var(--line);white-space:nowrap}
.hp-kind{color:#fff;border-color:transparent}
.hp-bridge{background:var(--purple)}.hp-tool{background:var(--highlight)}.hp-sketch{background:var(--success)}
.hp-suit{color:var(--ink-light)}
.hp-card h3{font-family:"Fraunces",serif;font-weight:700;font-size:19px;line-height:1.08;margin:0;letter-spacing:-.015em}
.hp-desc{margin:9px 0 0;font-size:13px;line-height:1.45;color:var(--ink-light)}
.hp-cue{margin-top:13px;border-top:1px dashed var(--line);padding-top:12px}
.hp-cue-bridge{display:flex;align-items:center;gap:9px;font:500 12px/1 "DM Mono",ui-monospace,monospace;color:var(--ink-light)}
.hp-ca{color:var(--ink)}.hp-cx{color:var(--accent)}
.hp-cue-tool{display:flex;flex-direction:column;gap:8px}
.hp-ctrl-row{display:grid;grid-template-columns:54px 1fr;gap:10px;align-items:center}
.hp-rl{font:500 10px/1 "DM Mono",ui-monospace,monospace;color:var(--ink-light)}
.hp-sl{position:relative;height:3px;background:var(--line)}
.hp-sl i{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;background:var(--highlight);transform:translate(-50%,-50%);border:2px solid var(--panel);box-shadow:0 0 0 1px var(--ink)}
.hp-cue-code{font-family:"DM Mono",ui-monospace,monospace;font-size:11.5px;line-height:1.6;background:#241f1c;color:#e8dfd4;padding:11px 13px;white-space:pre;overflow:auto;border:1.5px solid var(--ink)}
.hp-hl{background:rgba(245,168,0,.26);color:#ffd27a;padding:1px 4px;border-radius:3px}
.hp-cm{color:#7e756b}
.hp-act{margin-top:14px;display:flex;align-items:center;justify-content:space-between}
.hp-open{font:700 11.5px/1 "DM Mono",ui-monospace,monospace;color:var(--ink);text-decoration:none}
.hp-open:hover{color:var(--accent)}
.hp-tags{display:flex;gap:6px;flex-wrap:wrap}
.hp-tag{font:500 10px/1 "DM Mono",ui-monospace,monospace;color:var(--ink-light);border:1px solid var(--line);padding:3px 6px}

/* tool norms */
.hp-norms{margin-top:46px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center}
.hp-nl{font:600 9.5px/1 "DM Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.hp-n{font-size:13px;color:var(--ink-light)}
.hp-n::before{content:"·";margin-right:12px;color:var(--line)}

/* closing band */
.hp-closing{margin-top:54px;border:2.5px solid var(--ink);background:var(--ink);color:var(--cream);padding:44px 40px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;box-shadow:14px 14px 0 rgba(32,28,26,.14)}
.hp-closing h2{font-family:"Fraunces",serif;color:var(--cream);font-weight:800;font-size:clamp(24px,3.2vw,38px);margin:0;max-width:18ch;letter-spacing:-.025em}
.hp-closing h2 em{font-style:normal;color:var(--gold)}
.hp-closing-cta{display:flex;gap:12px;flex-wrap:wrap}
.hp-btn-l{font:700 13px/1 "DM Sans",system-ui,sans-serif;padding:14px 22px;text-decoration:none;background:var(--gold);color:#3a2a08;border:2px solid var(--gold)}
.hp-btn-l:hover{background:#ffc23d;border-color:#ffc23d}
.hp-btn-o{font:700 13px/1 "DM Sans",system-ui,sans-serif;padding:14px 22px;text-decoration:none;background:transparent;color:var(--cream);border:2px solid rgba(246,240,231,.4)}
.hp-btn-o:hover{border-color:var(--cream)}

/* catalog divider */
.hp-catalog-divider{margin-top:60px;border-top:2px solid var(--ink);padding-top:18px;margin-bottom:18px}
.hp-catalog-divider span{font:600 10px/1 "DM Mono",ui-monospace,monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-light)}