/* ============================================================
   Signature features. Loaded last.
   1. Magazine gallery wall (reveal on scroll + editorial numbering)
   2. Self-drawing line icons
   3. Live design-system toy
   All degrade gracefully without JS and respect reduced motion.
   ============================================================ */

/* ---------- 1. Gallery wall ---------- */

/* Reveal only applies when JS is present, so no-JS users see everything. */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  will-change: opacity, transform;
}
html.js [data-reveal][data-shown="true"] {
  opacity: 1;
  transform: none;
}

/* Editorial treatment: hairline rule + oversized ghost issue number. */
.fragments .fragment {
  border-top: 1px solid var(--line);
  padding-top: clamp(1.5rem, 4vw, 2.5rem);
}
.fragments .fragment::before {
  content: attr(data-n);
  position: absolute;
  top: clamp(0.75rem, 2vw, 1.25rem);
  right: 0;
  font-family: var(--serif);
  font-weight: 450;
  font-size: clamp(3.5rem, 10vw, 7rem);
  line-height: 0.8;
  color: var(--teal);
  opacity: 0.09;
  pointer-events: none;
  z-index: 0;
}
.fragments .fragment > * { position: relative; z-index: 1; }

/* ---------- 2. Self-drawing icons ---------- */
html.js .frag-icons[data-draw] :is(path, line, circle) {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
html.js .frag-icons[data-draw].is-drawn :is(path, line, circle) {
  animation: draw-on 1.5s var(--ease) forwards;
}
.frag-icons[data-draw].is-drawn .frag-icons__cell:nth-child(2) :is(path, line, circle) { animation-delay: 0.12s; }
.frag-icons[data-draw].is-drawn .frag-icons__cell:nth-child(3) :is(path, line, circle) { animation-delay: 0.24s; }
.frag-icons[data-draw].is-drawn .frag-icons__cell:nth-child(4) :is(path, line, circle) { animation-delay: 0.36s; }
@keyframes draw-on {
  to { stroke-dashoffset: 0; }
}

/* ---------- 3. Live design-system toy ---------- */
.studio-toy { background: var(--cloud); }
.toy {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 2.5rem;
  align-items: start;
}
.toy__controls { display: grid; gap: 1.5rem; }
.toy fieldset { border: 0; margin: 0; padding: 0; }
.toy legend {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--driftwood);
  opacity: 0.7;
  margin-bottom: 0.6rem;
  padding: 0;
}
.toy__opts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.toy__opt {
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 500;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--driftwood);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.toy__opt:hover { border-color: var(--teal); }
.toy__opt[aria-pressed="true"] {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--teal-ink-contrast);
}

/* The live preview "mini-site" */
.toy__preview {
  --toy-bg: var(--cloud);
  --toy-ink: var(--ink);
  --toy-sub: var(--driftwood);
  --toy-accent: var(--teal);
  --toy-s1: var(--seaglass);
  --toy-s2: var(--limewash);
  --toy-head: var(--serif);
  --toy-head-weight: 450;
  --toy-head-ls: -0.01em;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 340px;
  background: var(--toy-bg);
  transition: background 0.5s var(--ease);
}
.toy__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid color-mix(in srgb, var(--toy-ink) 12%, transparent);
}
.toy__dot { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--toy-ink) 24%, transparent); }
.toy__site {
  padding: clamp(1.75rem, 5vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: align-items 0.4s var(--ease);
}
.toy__tag {
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--toy-accent);
  transition: color 0.5s var(--ease);
}
.toy__headline {
  font-family: var(--toy-head);
  font-weight: var(--toy-head-weight);
  letter-spacing: var(--toy-head-ls);
  font-size: clamp(1.9rem, 5vw, 3rem);
  line-height: 1.05;
  color: var(--toy-ink);
  margin: 0;
  transition: color 0.5s var(--ease);
}
.toy__line { color: var(--toy-sub); max-width: 36ch; margin: 0; transition: color 0.5s var(--ease); }
.toy__swatches { display: flex; gap: 8px; }
.toy__swatch { width: 30px; height: 30px; border-radius: 3px; transition: background 0.5s var(--ease); }
.toy__btn {
  align-self: start;
  font-size: var(--fs-small);
  font-weight: 600;
  padding: 0.7rem 1.3rem;
  border-radius: var(--radius);
  background: var(--toy-accent);
  color: var(--toy-bg);
  transition: background 0.5s var(--ease), color 0.5s var(--ease);
}

/* Layout variants */
.toy__preview[data-layout="centred"] .toy__site { align-items: center; text-align: center; }
.toy__preview[data-layout="centred"] .toy__btn { align-self: center; }
.toy__preview[data-layout="editorial"] .toy__site { align-items: flex-start; text-align: left; }

/* Type variants */
.toy__preview[data-type="grotesque"] { --toy-head: var(--sans); --toy-head-weight: 600; --toy-head-ls: -0.03em; }
.toy__preview[data-type="serif"] { --toy-head: var(--serif); --toy-head-weight: 450; --toy-head-ls: -0.01em; }

/* Palette variants (the studio's range, default Coastal) */
.toy__preview[data-palette="coastal"] { --toy-bg: #f6f3ed; --toy-ink: #2c2722; --toy-sub: #5b5147; --toy-accent: #1f4e4a; --toy-s1: #9db2a3; --toy-s2: #d8cdbb; }
.toy__preview[data-palette="atelier"] { --toy-bg: #efe7dc; --toy-ink: #3a2f25; --toy-sub: #6b5a48; --toy-accent: #b5573a; --toy-s1: #c9a892; --toy-s2: #8a6f57; }
.toy__preview[data-palette="gallery"] { --toy-bg: #14181c; --toy-ink: #f6f3ed; --toy-sub: #9db2a3; --toy-accent: #9db2a3; --toy-s1: #1f4e4a; --toy-s2: #45413a; }

@media (max-width: 760px) {
  .toy { grid-template-columns: 1fr; }
}

/* ---------- Service grid cards (icon cards) ---------- */
.svc-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2rem;
}
.svc-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.svc-card:hover {
  border-color: color-mix(in srgb, var(--teal) 45%, var(--line));
  transform: translateY(-3px);
}
.svc-card__icon { width: 60px; height: 60px; color: var(--teal); margin-bottom: 1.5rem; }
.svc-card__num { font-family: var(--serif); font-style: italic; font-size: 0.95rem; color: var(--teal); margin-bottom: 0.5rem; }
.svc-card h3 { font-size: 1.4rem; margin: 0 0 0.35rem; }
.svc-card__price { font-family: var(--serif); font-style: italic; color: var(--teal); font-size: 1.15rem; margin-bottom: 1rem; }
.svc-card p { font-size: var(--fs-small); margin: 0; }
@media (max-width: 880px) { .svc-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .svc-cards { grid-template-columns: 1fr; } }

/* ---------- Multi-element project showcase (trio) ---------- */
.trio { display: flex; flex-direction: column; gap: 2.25rem; }
.trio__cell { margin: 0; }
.trio__cap { margin: 0.9rem 0 0; font-size: var(--fs-small); color: var(--driftwood); max-width: 62ch; line-height: 1.6; }
.trio__cap strong { color: var(--ink); font-weight: 600; }
.trio__img-el { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; }
.trio__img-el img { width: 100%; height: 100%; object-fit: cover; }

/* Japonica hero recreation */
.jhero {
  background: linear-gradient(180deg, #efeae0, #e7e0d4);
  border-radius: var(--radius);
  padding: clamp(2rem, 5vw, 3.5rem);
  min-height: 340px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.5rem; text-align: center;
}
.jhero__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1rem, 3vw, 2.25rem); font-size: 0.66rem; letter-spacing: 0.26em; text-transform: uppercase; color: #4a3d43; }
.jhero__rule { width: 46px; height: 1px; background: #a99ca0; }
.jhero__mark { font-family: "Cormorant Garamond", serif; font-weight: 300; text-transform: uppercase; font-size: clamp(2.5rem, 8vw, 5rem); letter-spacing: 0.16em; color: #3a2e35; line-height: 1; }
.jhero__sub { font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase; color: #9a8d8f; }
.jhero__scroll { font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; color: #8a7d80; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.jhero__scroll::after { content: ""; width: 1px; height: 26px; background: #b3a7a9; }
html.js .jhero__mark { opacity: 0; letter-spacing: 0.42em; transition: opacity 1.2s var(--ease), letter-spacing 1.5s var(--ease); }
html.js .fragment[data-shown="true"] .jhero__mark { opacity: 1; letter-spacing: 0.16em; }

/* Japonica footer recreation */
.jfooter { background: #3a2e38; border-radius: var(--radius); padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 2.5rem); }
.jfooter__mark { text-align: center; font-family: "Cormorant Garamond", serif; font-weight: 300; text-transform: uppercase; font-size: clamp(1.6rem, 4vw, 2.4rem); letter-spacing: 0.16em; color: #f1e9ea; margin: 0 0 0.6rem; }
.jfooter__tag { text-align: center; font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 1.15rem; color: #b9a9af; margin: 0 0 1.75rem; max-width: none; }
.jfooter__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 1.75rem; text-align: center; }
.jfooter__col h4 { font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.26em; text-transform: uppercase; color: #9a8a90; font-weight: 600; margin: 0 0 0.75rem; }
.jfooter__col p { font-family: "Cormorant Garamond", serif; font-size: 1.05rem; color: #e3d8db; margin: 0.25rem 0; max-width: none; }
.jfooter__base { text-align: center; margin: 1.75rem 0 0; font-size: 0.68rem; letter-spacing: 0.05em; color: #8a7a80; }
@media (max-width: 600px) { .jfooter__cols { grid-template-columns: 1fr; gap: 1.25rem; } }

/* Alvo clarity blog recreation */
.alvo-blog { display: grid; grid-template-columns: repeat(3, 1fr); background: #162937; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius); overflow: hidden; }
.alvo-blog__card { display: flex; flex-direction: column; padding: clamp(1.5rem, 2.5vw, 2rem); border-right: 1px solid rgba(255, 255, 255, 0.1); }
.alvo-blog__card:last-child { border-right: 0; }
.alvo-blog__tag { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: #2bafaf; margin-bottom: 1rem; }
.alvo-blog__stat { font-family: var(--sans); font-weight: 300; font-size: clamp(2.5rem, 5vw, 3.5rem); color: #f7f9fa; line-height: 1; margin-bottom: 1rem; font-variant-numeric: tabular-nums; }
.alvo-blog__src { font-size: 0.78rem; color: #9fb0bb; line-height: 1.5; margin-bottom: 1.25rem; }
.alvo-blog__title { font-size: 1.05rem; color: #eef3f5; line-height: 1.3; margin-bottom: auto; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.alvo-blog__more { font-size: 0.8rem; color: #2bafaf; margin-top: 1.25rem; }
@media (max-width: 700px) {
  .alvo-blog { grid-template-columns: 1fr; }
  .alvo-blog__card { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .alvo-blog__card:last-child { border-bottom: 0; }
}

/* Alvo assistant (navy variant) */
.frag-assistant--dark { background: #162937; border-color: rgba(255, 255, 255, 0.12); max-width: none; }
.frag-assistant--dark .bubble--in { background: #21384a; color: #cdd9e0; }

/* ============================================================
   Scrapbook work scenes (current layout)
   ============================================================ */
.work__head { margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.work__head h2 { font-size: var(--fs-h2); margin: 0; }

.scenes { display: flex; flex-direction: column; gap: clamp(5rem, 11vw, 9rem); }

.scene { display: grid; grid-template-columns: 0.68fr 1.32fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.scene--alt .scene__text { order: 2; }
.scene--full { display: block; }

.scene__label { display: flex; gap: 0.6rem; align-items: baseline; font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--driftwood); margin-bottom: 0.9rem; }
.scene__num { font-family: var(--serif); font-style: italic; color: var(--teal); text-transform: none; letter-spacing: 0; font-size: 1rem; }
.scene__name { font-family: var(--serif); font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 1.1rem; }
.scene__blurb { color: var(--driftwood); max-width: 48ch; }
.scene__text--center { text-align: center; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.scene__link { display: inline-flex; gap: 0.4rem; margin-top: 1.25rem; font-size: var(--fs-small); font-weight: 600; color: var(--teal); text-decoration: none; }
.scene__link:hover { color: var(--teal-hover); }

/* the scrapbook cluster: three differently-sized overlapping pieces */
.scrap { position: relative; width: 100%; padding-top: 82%; }
.scrap--cluster { padding-top: 114%; }
.scrap__piece {
  position: absolute; margin: 0;
  width: calc(var(--w) * 1%);
  top: calc(var(--t) * 1%);
  left: calc(var(--l) * 1%);
  transform: rotate(calc(var(--r) * 1deg));
  border-radius: var(--radius);
  transition: transform 0.5s var(--ease);
}
.scrap__piece--photo { background: #fff; border: 7px solid #fff; box-shadow: 0 16px 38px rgba(40, 30, 20, 0.2); border-radius: 2px; }
.scrap__piece--photo img { width: 100%; height: auto; display: block; border-radius: 1px; }
.scrap__piece--ui { filter: drop-shadow(0 16px 32px rgba(40, 30, 20, 0.22)); }
.scrap__piece--ui > * { border-radius: var(--radius); overflow: hidden; width: 100%; }
.scrap__piece:hover { transform: rotate(0deg) scale(1.03); z-index: 50 !important; }
.scrap__piece .frag-assistant { max-width: none; width: 100%; }

/* piece components */
.brand-tile { background: var(--ground, var(--ink)); padding: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1rem; aspect-ratio: 1 / 1; }
.brand-tile__logo { width: 62%; height: auto; filter: brightness(0) invert(1); }
.brand-tile__tag { font-family: var(--serif); font-style: italic; color: #f7f9fa; opacity: 0.92; font-size: 0.95rem; margin: 0; }
.brand-tile--light { background: #fff; }
.brand-tile__icon { width: 52px; height: 52px; }
.brand-tile__word { font-family: var(--sans); font-weight: 600; font-size: 1.6rem; color: #1c4a48; letter-spacing: -0.01em; }
.brand-tile__sub { font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: #2ab5af; }

.alvo-card { background: #162937; padding: clamp(1.25rem, 2.5vw, 1.75rem); display: flex; flex-direction: column; min-height: 210px; }
.alvo-card__tag { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: #2bafaf; margin-bottom: 0.75rem; }
.alvo-card__stat { font-family: var(--sans); font-weight: 300; font-size: clamp(2rem, 4vw, 2.75rem); color: #f7f9fa; line-height: 1; margin-bottom: 0.75rem; font-variant-numeric: tabular-nums; }
.alvo-card__src { font-size: 0.7rem; color: #9fb0bb; line-height: 1.5; margin-bottom: 1rem; }
.alvo-card__title { font-size: 0.95rem; color: #eef3f5; line-height: 1.3; margin-bottom: auto; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.alvo-card__more { font-size: 0.72rem; color: #2bafaf; margin-top: 1rem; }

.caps { background: #fff; padding: clamp(1.25rem, 2.5vw, 1.75rem); border: 1px solid var(--line); min-height: 180px; }
.caps__title { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent, #1c4a48); display: block; margin-bottom: 1rem; }
.caps ul { list-style: none; margin: 0; padding: 0; }
.caps li { font-family: var(--serif); font-size: 1.1rem; color: var(--ink); padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.caps li:last-child { border-bottom: 0; }

.hp-arch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.hp-arch__tile { background: var(--cloud); padding: 0.9rem 0.75rem; min-height: 62px; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.2rem; }
.hp-arch__place { font-family: var(--serif); font-size: 0.95rem; color: var(--ink); line-height: 1.05; }
.hp-arch__year { font-size: 0.58rem; letter-spacing: 0.08em; color: var(--driftwood); opacity: 0.7; }

.materials { background: #fff; padding: clamp(1rem, 2vw, 1.5rem); border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; gap: 0.75rem; }
.materials__row { display: flex; align-items: center; gap: 0.75rem; }
.materials__sw { width: 30px; height: 30px; border-radius: 3px; flex: none; }
.materials__n { font-size: 0.8rem; color: var(--driftwood); }

/* ============================================================
   Calm editorial spreads (current work layout)
   ============================================================ */
.spreads { display: flex; flex-direction: column; gap: clamp(5.5rem, 12vw, 10rem); }
.spread { display: block; }

/* full-bleed band, edge to edge */
.bleed { width: 100%; margin-bottom: clamp(1.5rem, 3vw, 2.75rem); }
.bleed img { width: 100%; height: clamp(320px, 56vh, 660px); object-fit: cover; display: block; }
.bleed .frag-placeholder { width: 100%; height: clamp(320px, 56vh, 660px); }
.bleed--overlay { position: relative; }
.bleed--overlay::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 20, 18, 0.62), rgba(20, 20, 18, 0) 46%); }
.bleed__cap { position: absolute; left: clamp(1.5rem, 6vw, 5rem); right: clamp(1.5rem, 6vw, 5rem); bottom: clamp(1.5rem, 4vw, 3rem); z-index: 2; }

/* heading beneath (Japonica, Foleo) */
.spread__under { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: end; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.spread__under-body .spread__blurb { margin: 0; }
.spread__under .spread__link { margin-top: 1rem; }

/* heading beside (Alvo) */
.spread__sidegrid { display: grid; grid-template-columns: 0.6fr 1.4fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }

/* two-up row */
.spread__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.75rem, 1.5vw, 1rem); }

.spread__bannerpiece { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.spread__metacard { display: flex; align-items: flex-end; padding: 1.5rem; background: var(--limewash); border-radius: 3px; }

/* light text over a dark bleed */
.spread__name--light { color: var(--cloud); }
.spread__label--light { color: rgba(246, 243, 237, 0.85); opacity: 1; }
.spread__num--light { color: var(--seaglass); }
.spread__blurb--wide { max-width: 62ch; font-size: 1.15rem; line-height: 1.6; margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem); }
.spread__head { padding-top: 0.4rem; }
.spread__head--center { text-align: center; max-width: 60ch; margin: 0 auto clamp(2rem, 5vw, 3.5rem); }
.spread__label { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--driftwood); opacity: 0.8; margin-bottom: 1rem; }
.spread__num { font-family: var(--serif); font-style: italic; color: var(--teal); letter-spacing: 0; text-transform: none; font-size: 1rem; margin-right: 0.4rem; }
.spread__name { font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 4.5vw, 3.5rem); line-height: 1.04; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 1.25rem; }
.spread__blurb { color: var(--driftwood); max-width: 36ch; font-size: 1.05rem; line-height: 1.65; }
.spread__link { display: inline-block; margin-top: 1.5rem; font-size: var(--fs-small); font-weight: 500; color: var(--teal); text-decoration: none; border-bottom: 1px solid var(--teal); padding-bottom: 3px; }
.spread__link:hover { color: var(--teal-hover); border-color: var(--teal-hover); }

.spread__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.75rem, 1.5vw, 1rem); }
.piece { border-radius: 3px; overflow: hidden; background: #fff; }
.piece > * { width: 100%; height: 100%; min-height: 0; }
.piece--wide { grid-column: 1 / -1; }
.piece--photo { background: var(--limewash); }
.piece--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.piece--wide.piece--photo { aspect-ratio: 16 / 9; }
.piece--half { aspect-ratio: 4 / 3; }

/* recreations, sized to sit calmly in a piece */
.piece .jhero { gap: 0.9rem; padding: 1.5rem; justify-content: center; }
.piece .jhero__nav { gap: 0.9rem; font-size: 0.56rem; }
.piece .jhero__mark { font-size: clamp(1.6rem, 4vw, 2.4rem); letter-spacing: 0.14em; }
.piece .jhero__scroll { display: none; }
.piece .jfooter { padding: 1.5rem 1.25rem; display: flex; flex-direction: column; justify-content: center; }
.piece .jfooter__mark { font-size: 1.4rem; }
.piece .jfooter__tag { font-size: 0.95rem; margin-bottom: 1rem; }
.piece .jfooter__cols { padding-top: 1rem; gap: 0.6rem; }
.piece .jfooter__col h4 { font-size: 0.52rem; }
.piece .jfooter__col p { font-size: 0.82rem; }
.piece .alvo-blog { height: 100%; }
.piece .frag-assistant { display: flex; flex-direction: column; }
.piece .frag-assistant__body { flex: 1; }
.piece .caps { display: flex; flex-direction: column; justify-content: center; }

/* Foleo wide banner */
.foleobanner { background: var(--accent, #1c4a48); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 1.5rem; aspect-ratio: 16 / 9; }
.foleobanner img { width: 58px; height: 58px; background: #fff; border-radius: 12px; padding: 8px; box-sizing: border-box; }
.foleobanner__word { font-family: var(--sans); font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.2rem); color: #fff; letter-spacing: -0.01em; }
.foleobanner__sub { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: #9fd6cf; }

@media (max-width: 860px) {
  .spread { grid-template-columns: 1fr; gap: 1.75rem; }
  .spread--alt .spread__head { order: 0; }
}
@media (max-width: 560px) {
  .spread__grid { grid-template-columns: 1fr; }
  .piece--half { aspect-ratio: 5 / 3; }
}

/* scene image (HP) */
.scene__img { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; }
.scene__img img { width: 100%; height: 100%; object-fit: cover; }
.scene__img .frag-placeholder { width: 100%; height: 100%; }

/* identity, corrected: navy ground, white logo, slim swatch strip */
.scene__visual .frag-identity {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  grid-template-columns: none;
  background: var(--ground, var(--ink));
  border: 0; border-radius: var(--radius); overflow: hidden;
  padding: clamp(2.5rem, 5vw, 3.5rem) clamp(2rem, 4vw, 3rem) 0;
  gap: 1.25rem; min-height: 320px;
}
.scene__visual .frag-identity__logo { width: clamp(150px, 42%, 210px); height: auto; filter: brightness(0) invert(1); }
.scene__visual .frag-identity__tag { font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 2vw, 1.5rem); color: #f7f9fa; opacity: 0.92; margin: 0; }
.scene__visual .frag-identity__swatches { display: flex; flex-direction: row; width: 100%; margin-top: auto; }
.scene__visual .frag-identity__swatch { flex: 1; min-height: 0; height: 46px; aspect-ratio: auto; }

@media (max-width: 820px) {
  .scene { grid-template-columns: 1fr; }
  .scene--alt .scene__text { order: 0; }
  .scrap { padding-top: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .scrap--cluster { grid-template-columns: 1fr; gap: 1.25rem; max-width: 460px; }
  .scrap__piece { position: static; width: auto; transform: rotate(calc(var(--r) * 0.35deg)); }
}

/* Maison-style icon cards */
.icon-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.icon-card {
  background: #f2ece0; border: 1px solid var(--line); border-radius: 2px;
  aspect-ratio: 4 / 5; padding: clamp(1.75rem, 3vw, 2.75rem);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease);
}
.icon-card:hover { transform: translateY(-4px); border-color: var(--clay); }
.icon-card__num { font-family: var(--serif); font-style: italic; font-size: 0.95rem; color: #a6643f; margin-bottom: 0.5rem; }
.icon-card__eyebrow { font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: #9a8a7c; }
.icon-card__icon { width: clamp(84px, 12vw, 112px); height: clamp(84px, 12vw, 112px); color: #a6643f; }
.icon-card__title { font-family: var(--serif); font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: #3a3128; margin: 0 0 0.9rem; line-height: 1.1; }
.icon-card__tags { font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: #9a8a7c; }
@media (max-width: 760px) { .icon-cards { grid-template-columns: 1fr; } .icon-card { aspect-ratio: auto; gap: 1.5rem; } }

/* HP works archive */
.hp-archive { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.hp-archive__tile { background: var(--cloud); padding: 1.25rem 1rem; min-height: 110px; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.35rem; transition: background 0.3s var(--ease); }
.hp-archive__tile:hover { background: var(--limewash); }
.hp-archive__place { font-family: var(--serif); font-size: 1.15rem; color: var(--ink); line-height: 1.1; }
.hp-archive__meta { font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--driftwood); opacity: 0.75; }
@media (max-width: 760px) { .hp-archive { grid-template-columns: repeat(2, 1fr); } }

/* HP live build tracker */
.hp-site { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 3.5vw, 2.5rem); background: var(--surface); align-items: center; }
.hp-site__label { font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: #3a6ea5; font-weight: 600; }
.hp-site__label::before { content: "\25CF"; margin-right: 0.5rem; font-size: 0.6em; vertical-align: middle; }
.hp-site__title { font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--ink); margin: 0.75rem 0 0.25rem; }
.hp-site__title em { font-style: italic; }
.hp-site__with { font-family: var(--serif); font-style: italic; color: var(--driftwood); margin: 0 0 1.25rem; }
.hp-site__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.25rem 0; margin-bottom: 1.25rem; }
.hp-site__meta span { display: block; font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--driftwood); opacity: 0.7; margin-bottom: 0.3rem; }
.hp-site__meta strong { font-weight: 500; color: var(--ink); font-size: 0.95rem; }
.hp-site__desc { font-size: var(--fs-small); margin: 0; }
.hp-site__cta { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border: 1px dashed var(--line); border-radius: var(--radius); padding: 0.85rem 1rem; margin: 1.25rem 0 1rem; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--driftwood); }
.hp-site__cta span:last-child { color: var(--teal); font-weight: 600; border-bottom: 1px solid var(--teal); padding-bottom: 2px; }
.hp-site__updated { font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--driftwood); opacity: 0.7; margin: 0; }
.hp-site__media { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 240px; height: 100%; }
.hp-site__day { position: absolute; top: 12px; left: 12px; z-index: 2; background: rgba(20, 20, 18, 0.82); color: var(--cloud); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 12px; border-radius: 2px; }
.hp-site__media .frag-placeholder { width: 100%; height: 100%; min-height: 240px; }
@media (max-width: 760px) { .hp-site { grid-template-columns: 1fr; } }