/* =============================================================================
   themes/vnf.css — Victorian Naginata Federation case study
   -----------------------------------------------------------------------------
   Art direction: "the guideline". Paper and sumi, set like an identity manual:
   the final mark on a specimen card with construction guides, the process as
   numbered rounds, and the satisfaction figure shown with how it was gathered.
   ============================================================================= */

.vnf-hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px clamp(16px, 2.6vw, 44px); align-items: center; }
.vnf-hero__id { grid-column: 1 / span 5; }
.vnf-hero__specimen { grid-column: 7 / span 6; }
@media (max-width: 960px) { .vnf-hero__id, .vnf-hero__specimen { grid-column: 1 / -1; } }

/* Specimen card: the mark on its own ground with construction guides */
.specimen { position: relative; background: #ebedf0; box-shadow: 0 30px 70px rgba(18, 16, 21, .18); }
.specimen::before {          /* construction guides: centre lines + circle */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(18, 16, 21, .14) calc(50% - .5px) calc(50% + .5px), transparent 0),
    linear-gradient(180deg, transparent calc(50% - .5px), rgba(18, 16, 21, .14) calc(50% - .5px) calc(50% + .5px), transparent 0),
    radial-gradient(circle at 50% 50%, transparent 31%, rgba(18, 16, 21, .14) 31.2% 31.4%, transparent 31.6%);
}
.specimen .frame { --frame-max-h: min(62vh, 620px); }
.specimen__foot { display: flex; justify-content: space-between; gap: 10px; padding: 12px 16px; border-top: 1px solid rgba(18, 16, 21, .18); font-size: .62rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(18, 16, 21, .7); background: #e4e6ea; }

/* Rounds: the process as numbered rounds on one rule */
.rounds { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1.5px solid var(--sumi); }
.rounds li { position: relative; padding: 26px 16px 22px 0; display: grid; gap: 6px; align-content: start; }
.rounds li + li { padding-left: 16px; }
.rounds li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--bone); border: 1.5px solid var(--sumi); }
.rounds li + li::before { left: 16px; }
.rounds li:last-child::before { background: var(--sumi); }
.rounds h3 { font-size: 1.45rem; line-height: 1.05; }
.rounds p { font-size: 1.03rem; color: var(--text-soft); line-height: 1.4; }
@media (max-width: 900px) { .rounds { grid-template-columns: 1fr; border-top: 0; border-left: 1.5px solid var(--sumi); } .rounds li, .rounds li + li { padding: 4px 0 22px 26px; } .rounds li::before, .rounds li + li::before { left: -7px; top: 8px; } }

/* The figure with its method */
.verdict { display: grid; grid-template-columns: auto 1fr; gap: 10px 32px; align-items: end; padding: clamp(22px, 3vw, 40px) 0; border-top: 1.5px solid var(--sumi); border-bottom: 1px solid var(--rule); }
.verdict__figure { font-size: clamp(5rem, 3rem + 8vw, 10rem); line-height: .82; letter-spacing: -.03em; }
.verdict__figure small { font-size: .4em; }
.verdict__text { display: grid; gap: 8px; max-width: 46ch; padding-bottom: .6em; }
.verdict__text p:first-child { font-size: var(--fs-lead); line-height: 1.25; color: var(--text); }
@media (max-width: 640px) { .verdict { grid-template-columns: 1fr; } }

/* Deliverables list styled like a manual's contents */
.deliverables { list-style: none; padding: 0; border-top: 1.5px solid var(--sumi); }
.deliverables li { display: flex; align-items: baseline; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 1.2rem; }
.deliverables li i { flex: 1; border-bottom: 1.5px dotted var(--rule-strong); transform: translateY(-5px); }
.deliverables li b { font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--text-faint); }


/* ---- The world: cool stone, ink wash and the ensō ----------------------------
   The federation's mark is built on an ensō (one brushed circle); the opening
   carries a large, faint one behind the title, drifting slowly, on the mark's
   own cool stone ground (#EDEEF0) with ink washing in at the corners. */
.world--vnf {
  --text: var(--sumi);
  --text-soft: rgba(18, 16, 21, .78);
  --text-faint: rgba(18, 16, 21, .62);
  --rule: rgba(18, 16, 21, .16);
  --rule-strong: rgba(18, 16, 21, .34);
  background:
    radial-gradient(42vw 48vh at -4% 104%, rgba(18, 16, 21, .26), transparent 70%),
    radial-gradient(30vw 30vh at 4% -6%, rgba(18, 16, 21, .12), transparent 70%),
    radial-gradient(40vw 46vh at 104% 10%, rgba(18, 16, 21, .1), transparent 70%),
    #EDEEF0;
}
.world--vnf ::selection { background: var(--sumi); color: #EDEEF0; }
.world--vnf :focus-visible { outline-color: var(--sumi); }
.vnf-enso {
  position: absolute;
  z-index: -1;
  left: -10vw;
  top: 2vh;
  width: min(80vw, 980px);
  aspect-ratio: 1;
  background: url("/assets/brand/enso.svg") center / contain no-repeat;
  opacity: .07;
  rotate: -14deg;
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.calm) .vnf-enso { animation: enso-drift 40s ease-in-out infinite alternate; }
}
@keyframes enso-drift { from { transform: rotate(0deg); } to { transform: rotate(16deg); } }
.world--vnf .specimen { background: #EDEEF0; }
.world--vnf .specimen__foot { background: #E6E8EB; }