/* ============================================================
   PARFUN TEXTILE — own identity layer
   "The spec sheet & the mill." Technical, measured, data-forward.
   Navbar / footer / preloader keep the shared chrome (style.css);
   everything under .ptc is this site's own design language.
   ============================================================ */

.ptc {
  --mono: 'Spline Sans Mono', ui-monospace, monospace;
  --graph: rgba(53, 59, 73, 0.14);      /* blueprint hairline */
  --graph-soft: rgba(53, 59, 73, 0.08);
  --paper: #F7F4EE;        /* the light ivory - now only an accent */
  --paper-2: #EFE9DD;      /* reference beige (ivory-2) - the page ground */
  --paper-3: #E6DFD0;      /* deeper beige for alternating bands */
  --measure: 74rem;

  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper-2);
}

/* keep the page from scrolling sideways on the wide datasheet rows */
.ptc { overflow-x: clip; }

/* ---- reveal primitive (site's own, light) ---- */
.ptc [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s cubic-bezier(0.22,1,0.36,1), transform 0.9s cubic-bezier(0.22,1,0.36,1);
  will-change: opacity, transform;
}
.ptc [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ptc [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---- shared building blocks ---- */
.pt-wrap { width: min(100% - 3rem, var(--measure)); margin-inline: auto; }
.pt-sec { padding-block: clamp(4.5rem, 11vh, 9rem); position: relative; }
.pt-sec--tight { padding-block: clamp(3rem, 7vh, 5rem); }

.pt-eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--crimson);
  display: inline-flex; align-items: center; gap: 0.8rem;
}
.pt-eyebrow::before {
  content: ''; width: 26px; height: 1px; background: currentColor; display: inline-block;
}
.pt-eyebrow--plain::before { display: none; }

.pt-h {
  font-family: var(--font-jp);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.045em;
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  margin-top: 1.1rem;
}
.pt-h em { font-style: normal; color: var(--crimson); }
.pt-lead {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.75; color: var(--ink-soft);
  max-width: 60ch; margin-top: 1.6rem;
}
.pt-p { line-height: 1.85; color: var(--ink-soft); max-width: 66ch; }
.pt-p + .pt-p { margin-top: 1.1rem; }
.pt-p strong { color: var(--ink); font-weight: 600; }

/* a mono spec chip used all over: LABEL · value */
.pt-tag {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-soft);
  border: 1px solid var(--graph); border-radius: 999px;
  padding: 0.34rem 0.85rem; display: inline-flex; gap: 0.5rem; align-items: center;
}
.pt-tag b { color: var(--crimson); font-weight: 600; }

/* ============================================================
   HERO — a typographic thesis over a knitting lattice
   ============================================================ */
.pt-hero {
  min-height: 100svh; position: relative; display: flex; align-items: flex-end;
  padding-bottom: clamp(3rem, 8vh, 6rem); overflow: hidden;
  border-bottom: 1px solid var(--graph);
  background:
    radial-gradient(80% 70% at 92% 4%, rgba(196,13,78,0.10), transparent 52%),
    radial-gradient(90% 80% at 0% 100%, rgba(53,59,73,0.06), transparent 55%),
    linear-gradient(175deg, var(--paper-3), var(--paper-2) 62%);
}
.pt-hero__grid {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.4;
  background-image:
    linear-gradient(var(--graph-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--graph-soft) 1px, transparent 1px);
  background-size: 100% 5.5rem, 5.5rem 100%;
  mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 72%, transparent);
}
.hero-knit {
  position: absolute; top: 50%; transform: translateY(-50%);
  right: max(2rem, calc((100% - var(--measure)) / 2));
  width: min(30vw, 300px); height: auto; pointer-events: none;
}
.hero-knit .hk-line { fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; }
.hero-knit .hk-soft { fill: none; stroke: var(--graph); stroke-width: 1.4; stroke-linecap: round; }
.hero-knit .run {
  fill: none; stroke: var(--crimson); stroke-width: 2.8; stroke-linecap: round;
  stroke-dasharray: 12 988; animation: knitRun 6s linear infinite;
}
@keyframes knitRun { to { stroke-dashoffset: -1000; } }
@media (prefers-reduced-motion: reduce) { .hero-knit .run { animation: none; } }
@media (max-width: 900px) { .hero-knit { opacity: 0.3; width: 46vw; } }

.knit-lattice {
  position: absolute; right: -6%; top: 8%; width: min(58vw, 720px); height: 84%;
  pointer-events: none; opacity: 0.5;
}
.knit-lattice path { fill: none; stroke: var(--crimson); stroke-width: 1.4; opacity: 0.6; }
@media (max-width: 820px){ .knit-lattice { opacity: 0.22; width: 120%; right: -20%; } }

.pt-hero__inner { position: relative; z-index: 2; width: min(100% - 3rem, var(--measure)); margin-inline: auto; }
.pt-hero__eyebrow { margin-bottom: 1.5rem; }
.pt-hero__title {
  font-family: var(--font-jp); font-weight: 600;
  font-size: clamp(1.45rem, 4.1vw, 3.4rem); line-height: 1.62; letter-spacing: 0.055em;
}
.pt-hero__title .ln { display: block; overflow: hidden; }
.pt-hero__title em { font-style: normal; color: var(--crimson); }
.pt-hero__sub {
  font-family: var(--mono); font-size: clamp(0.8rem, 1.1vw, 0.95rem);
  letter-spacing: 0.04em; color: var(--ink-soft); line-height: 1.8;
  max-width: 52ch; margin-top: 1.8rem;
}
.pt-hero__foot {
  margin-top: clamp(2rem, 4vh, 3rem); display: flex; flex-wrap: wrap; gap: 1.4rem 2.4rem;
  align-items: center;
}
.pt-hero__spec { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* the "datasheet stamp" — mono block, top-right on the hero */
.pt-hero__stamp {
  position: absolute; z-index: 2; top: clamp(6rem, 16vh, 9rem); right: max(1.5rem, calc((100% - var(--measure))/2 + 0rem));
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--ink-soft);
  border: 1px solid var(--graph); padding: 1rem 1.2rem; line-height: 1.9;
  background: rgba(247,244,238,0.6); backdrop-filter: blur(2px);
}
.pt-hero__stamp b { color: var(--ink); }
.pt-hero__stamp .k { color: var(--crimson); }
@media (max-width: 900px){ .pt-hero__stamp { display: none; } }

/* hero intro hooks (JS sets these visible) */
.ptc [data-hero-in] { opacity: 0; transform: translateY(26px); }
@media (prefers-reduced-motion: reduce){ .ptc [data-hero-in]{ opacity:1; transform:none; } }

/* ============================================================
   SECTION HEAD (shared across pages)
   ============================================================ */
.pt-head { max-width: 46ch; }
.pt-head--wide { max-width: 62ch; }
.pt-note { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--ink-soft); }

/* index number that means order in a real sequence only */
.pt-rule { height: 1px; background: var(--graph); border: 0; margin-block: 0; }

/* ============================================================
   PROCESS RAIL — one-stop production (a true sequence → numbered)
   ============================================================ */
.pt-proc { margin-top: clamp(2.5rem, 5vh, 3.5rem); border-top: 1px solid var(--graph); }
.pt-proc__row { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px){ .pt-proc__row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .pt-proc__row { grid-template-columns: 1fr; } }
.pt-step {
  border-bottom: 1px solid var(--graph); border-right: 1px solid var(--graph);
  padding: 1.6rem 1.4rem 1.9rem; position: relative; min-height: 12.5rem;
  display: flex; flex-direction: column;
}
.pt-proc__row .pt-step:nth-child(4n) { border-right: 0; }
@media (max-width: 860px){ .pt-proc__row .pt-step:nth-child(even){ border-right:0; } .pt-proc__row .pt-step:nth-child(odd){ border-right:1px solid var(--graph);} }
@media (max-width: 520px){ .pt-proc__row .pt-step{ border-right:0 !important; } }
.pt-step__no { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.2em; color: var(--crimson); }
.pt-step__jp { font-family: var(--font-jp); font-size: 1.5rem; margin-top: 0.9rem; color: var(--ink); }
.pt-step__en { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); margin-top: 0.25rem; }
.pt-step__p { font-size: 0.9rem; line-height: 1.7; color: var(--ink-soft); margin-top: auto; padding-top: 1rem; }
.pt-step__bar { position:absolute; left:0; bottom:-1px; height:2px; width:0; background:var(--crimson); transition: width .6s var(--ease-out,cubic-bezier(.22,1,.36,1)); }
.pt-step.is-in .pt-step__bar, .pt-step:hover .pt-step__bar { width: 100%; }

/* ============================================================
   PROPERTY GRID — engineered fabric functions (not decorative cards)
   ============================================================ */
.pt-props { display: grid; grid-template-columns: repeat(2, 1fr); border-top:1px solid var(--graph); border-left:1px solid var(--graph); margin-top: clamp(2.5rem,5vh,3.5rem); }
@media (min-width: 760px){ .pt-props--3 { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 980px){ .pt-props--4 { grid-template-columns: repeat(4,1fr); } }
@media (max-width: 620px){ .pt-props { grid-template-columns: 1fr; } }
.pt-prop { border-right:1px solid var(--graph); border-bottom:1px solid var(--graph); padding: 1.6rem 1.5rem 1.8rem; background: transparent; }
.pt-prop__code { font-family: var(--mono); font-size:0.7rem; letter-spacing:0.16em; color: var(--crimson); }
.pt-prop__name { font-size: 1.12rem; font-weight: 600; margin-top: 0.7rem; color: var(--ink); }
.pt-prop__jp { font-family: var(--font-jp); font-size:0.82rem; color: var(--ink-soft); margin-left:0.5rem; font-weight:400; }
.pt-prop__p { font-size: 0.9rem; line-height: 1.72; color: var(--ink-soft); margin-top: 0.7rem; }

/* ============================================================
   FABRIC INDEX — the signature interactive datasheet
   ============================================================ */
.fx { margin-top: clamp(2.2rem, 4.5vh, 3rem); }
.fx-bar { display:flex; flex-wrap:wrap; gap:0.6rem; align-items:center; margin-bottom: 1.4rem; }
.fx-chip {
  font-family: var(--mono); font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase;
  color: var(--ink-soft); background: transparent; border:1px solid var(--graph);
  padding: 0.42rem 0.9rem; border-radius:999px; cursor:pointer; transition: all .25s;
}
.fx-chip:hover { border-color: var(--crimson); color: var(--ink); }
.fx-chip.is-active { background: var(--crimson); border-color: var(--crimson); color: var(--paper); }
.fx-count { margin-left:auto; font-family: var(--mono); font-size:0.72rem; letter-spacing:0.1em; color: var(--ink-soft); }
.fx-count b { color: var(--crimson); }

.fx-list { border-top: 1px solid var(--ink); }
.fx-row { border-bottom: 1px solid var(--graph); }
.fx-row.is-hidden { display: none; }
.fx-row__head {
  width:100%; text-align:left; background:transparent; border:0; cursor:pointer;
  display:grid; grid-template-columns: 3.2rem 1.7fr 1fr 1fr auto; gap: 1.2rem; align-items:center;
  padding: 1.15rem 0.4rem; color: inherit;
}
@media (max-width: 780px){ .fx-row__head { grid-template-columns: 2.4rem 1fr auto; } .fx-row__cell--hide { display:none; } }
.fx-row__no { font-family: var(--mono); font-size:0.74rem; color: var(--crimson); letter-spacing:0.1em; }
.fx-row__name { font-size: 1.1rem; font-weight:600; color: var(--ink); }
.fx-row__name span { display:block; font-family: var(--font-jp); font-size:0.8rem; color: var(--ink-soft); font-weight:400; margin-top:0.1rem; }
.fx-row__cell { font-family: var(--mono); font-size:0.76rem; letter-spacing:0.04em; color: var(--ink-soft); }
.fx-row__cell b { color: var(--ink); font-weight:600; }
.fx-row__toggle { font-family: var(--mono); font-size:1.1rem; color: var(--crimson); transition: transform .3s; justify-self:end; }
.fx-row.is-open .fx-row__toggle { transform: rotate(45deg); }

.fx-row__body { max-height: 0; overflow: hidden; transition: max-height .5s cubic-bezier(.22,1,.36,1); }
.fx-row.is-open .fx-row__body { max-height: 40rem; }
.fx-row__inner { display:grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; padding: 0.4rem 0.4rem 2rem; }
@media (max-width: 780px){ .fx-row__inner { grid-template-columns: 1fr; } }
.fx-specs { display:grid; grid-template-columns: 1fr 1fr; gap: 0; border-top:1px solid var(--graph); }
@media (max-width: 480px){ .fx-specs { grid-template-columns: 1fr; } }
.fx-specs div { border-bottom:1px solid var(--graph); padding: 0.7rem 0; }
.fx-specs dt { font-family: var(--mono); font-size:0.66rem; letter-spacing:0.14em; text-transform:uppercase; color: var(--ink-soft); }
.fx-specs dd { font-size:0.95rem; color: var(--ink); margin-top:0.2rem; }
.fx-desc { font-size:0.95rem; line-height:1.75; color: var(--ink-soft); }
.fx-props { display:flex; flex-wrap:wrap; gap:0.4rem; margin-top:1rem; }
.fx-props span { font-family: var(--mono); font-size:0.64rem; letter-spacing:0.1em; text-transform:uppercase; color: var(--crimson); border:1px solid rgba(196,13,78,0.3); padding:0.2rem 0.55rem; border-radius:3px; }
.fx-diagram { border:1px solid var(--graph); display:grid; place-items:center; padding:1.6rem; background:
    radial-gradient(120% 100% at 100% 0%, rgba(196,13,78,0.06), transparent 60%), var(--paper-3); }
.fx-diagram figure { margin:0; width:100%; display:grid; place-items:center; gap:0.9rem; }
.fx-diagram svg { width:100%; max-width:220px; height:auto; }
.fx-diagram svg * { fill:none; stroke: var(--ink); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.fx-diagram svg .acc, .fx-diagram svg .acc * { stroke: var(--crimson); }
.fx-diagram svg .soft { stroke: var(--graph); }
.fx-diagram svg .fillc { fill: var(--crimson); stroke:none; }
.fx-diagram figcaption { font-family: var(--mono); font-size:0.62rem; letter-spacing:0.14em; text-transform:uppercase; color: var(--ink-soft); }

/* ============================================================
   STATS BAND
   ============================================================ */
.pt-stats { display:grid; grid-template-columns: repeat(4,1fr); border-top:1px solid var(--graph); margin-top: clamp(2.5rem,5vh,3.5rem); }
@media (max-width: 760px){ .pt-stats { grid-template-columns: 1fr 1fr; } }
.pt-stat { border-right:1px solid var(--graph); border-bottom:1px solid var(--graph); padding: 1.8rem 1.4rem; }
.pt-stat:nth-child(4n){ border-right:0; }
@media (max-width:760px){ .pt-stat:nth-child(even){ border-right:0; } }
.pt-stat__n { font-family: var(--font-display); font-size: clamp(2rem,4vw,2.9rem); font-weight:500; line-height:1; color: var(--crimson); }
.pt-stat__l { font-family: var(--mono); font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; color: var(--ink-soft); margin-top:0.8rem; }

/* ============================================================
   SPLIT (image / text) & DATASHEET
   ============================================================ */
.pt-split { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items:center; }
@media (max-width: 880px){ .pt-split { grid-template-columns:1fr; } }
.pt-split--flip .pt-split__media { order: 2; }
.pt-split__media { border:1px solid var(--graph); overflow:hidden; position:relative; }
.pt-split__media img { display:block; width:100%; height:100%; object-fit:cover; aspect-ratio: 4/3; }
.pt-split__cap { position:absolute; left:0; bottom:0; font-family:var(--mono); font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase; color: var(--paper); background: rgba(39,43,52,0.82); padding:0.4rem 0.7rem; }

.pt-ds { border-top:1px solid var(--ink); margin-top: clamp(2rem,4vh,3rem); }
.pt-ds__row { display:grid; grid-template-columns: 15rem 1fr; gap: 1.5rem; border-bottom:1px solid var(--graph); padding: 1.1rem 0.3rem; }
@media (max-width: 680px){ .pt-ds__row { grid-template-columns: 1fr; gap:0.3rem; } }
.pt-ds__k { font-family: var(--mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color: var(--crimson); }
.pt-ds__k span { display:block; color: var(--ink-soft); letter-spacing:0.06em; margin-top:0.15rem; }
.pt-ds__v { color: var(--ink); line-height:1.7; }
.pt-ds__v a { border-bottom:1px solid rgba(196,13,78,0.35); }

/* ============================================================
   DARK SECTION (used sparingly — machines, water)
   ============================================================ */
.pt-dark { background: var(--night); color: var(--ivory); }
.pt-dark .pt-h { color: var(--ivory); }
.pt-dark .pt-lead, .pt-dark .pt-p { color: rgba(247,244,238,0.8); }
.pt-dark .pt-eyebrow { color: #E77A9C; }
.pt-dark { --graph: rgba(247,244,238,0.18); --graph-soft: rgba(247,244,238,0.09); }
.pt-dark .pt-prop, .pt-dark .pt-step { background: transparent; }
.pt-dark .pt-prop__name, .pt-dark .pt-step__jp { color: var(--ivory); }
.pt-dark .pt-prop__p, .pt-dark .pt-step__p, .pt-dark .pt-step__en, .pt-dark .pt-prop__jp { color: rgba(247,244,238,0.68); }

/* ============================================================
   CTA STRIP (inline, distinct from footer)
   ============================================================ */
.pt-cta { text-align:center; padding-block: clamp(3.5rem,8vh,6rem); }
.pt-cta__h { font-family: var(--font-jp); font-weight:600; font-size: clamp(1.5rem,3vw,2.4rem); line-height:1.6; letter-spacing:0.045em; }
.pt-cta__h em { font-style:normal; color: var(--crimson); }
.pt-cta__p { color: var(--ink-soft); margin: 1.1rem auto 2rem; max-width: 52ch; line-height:1.8; }

/* ============================================================
   PAGE MASTHEAD (subpages) — a measured header, not a phero clone
   ============================================================ */
.pt-mast { padding-top: clamp(8rem, 16vh, 11rem); padding-bottom: clamp(3rem,6vh,4.5rem); border-bottom:1px solid var(--graph); position:relative; overflow:hidden;
  background:
    radial-gradient(120% 90% at 88% 6%, rgba(196,13,78,0.07), transparent 55%),
    linear-gradient(180deg, var(--paper-3), var(--paper-2) 80%); }
.pt-mast__inner { display:grid; grid-template-columns: 1.35fr 0.65fr; gap: clamp(1.5rem,4vw,3rem); align-items:center; }
@media (max-width: 820px){ .pt-mast__inner { grid-template-columns: 1fr; } }
.pt-mast__crumb { font-family: var(--mono); font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color: var(--ink-soft); }
.pt-mast__crumb a { color: var(--ink-soft); }
.pt-mast__crumb a:hover { color: var(--crimson); }
.pt-mast__crumb b { color: var(--crimson); font-weight:500; }
.pt-mast__title { font-family: var(--font-jp); font-weight:600; font-size: clamp(1.8rem,4.4vw,3.6rem); line-height:1.58; letter-spacing:0.055em; margin-top:1.2rem; }
.pt-mast__title em { font-style:normal; color: var(--crimson); }
.pt-mast__sub { font-family: var(--mono); font-size:0.85rem; line-height:1.8; color: var(--ink-soft); max-width: 52ch; margin-top:1.4rem; }
.pt-mast__art { justify-self:end; width:100%; max-width: 320px; }
@media (max-width: 820px){ .pt-mast__art { display:none; } }
.pt-mast__idx { position:absolute; bottom: 1.2rem; right: max(1.5rem, calc((100% - var(--measure))/2)); font-family: var(--mono); font-size:0.72rem; letter-spacing:0.14em; color: var(--ink-soft); opacity:0.5; }
@media (max-width: 760px){ .pt-mast__idx { display:none; } }

/* ============================================================
   HERO / MAST LINE-ART — hand-drawn, in the group's spirit
   ============================================================ */
.pt-art { width:100%; height:auto; display:block; overflow:hidden; }
/* continuous ambient motion so every hero SVG keeps living after it draws in */
.pt-art .spin  { animation: ptSpin 11s linear infinite; transform-box: fill-box; transform-origin: center; }
.pt-art .bob   { animation: ptBob 3.4s ease-in-out infinite; transform-box: fill-box; }
.pt-art .sway, .pt-art .sway2 { animation: ptSway 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: top center; }
.pt-art .thread{ animation: ptBob 3.8s ease-in-out infinite; transform-box: fill-box; }
.pt-art .pulse { animation: ptPulse 2.8s ease-in-out infinite; }
.pt-art .pulse2{ animation: ptPulse 2.8s ease-in-out 0.9s infinite; }
.pt-art .pulse3{ animation: ptPulse 2.8s ease-in-out 1.8s infinite; }
.pt-art .boll  { animation: ptPulse 3.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.pt-art .boll.b2 { animation-delay: 1.2s; }
.pt-art .sun   { animation: ptSpin 30s linear infinite; transform-box: fill-box; transform-origin: center; }
.pt-art .knitfall { animation: ptBob 3.4s ease-in-out infinite; transform-box: fill-box; }
.pt-art .flow  { fill: none; stroke: var(--crimson); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 2 11; animation: ptDash 1.4s linear infinite; }
@keyframes ptDash { to { stroke-dashoffset: -13; } }
@keyframes ptSpin  { to { transform: rotate(360deg); } }
@keyframes ptBob   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes ptSway  { 0%,100% { transform: rotate(-4.5deg); } 50% { transform: rotate(4.5deg); } }
@keyframes ptPulse { 0%,100% { opacity: 0.45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pt-art [class] { animation: none !important; }
}
.pt-art path, .pt-art circle, .pt-art line, .pt-art rect, .pt-art ellipse, .pt-art polyline {
  fill:none; stroke: var(--ink); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.pt-art .acc, .pt-art .acc * { stroke: var(--crimson); }
.pt-art .soft { stroke: var(--graph); }
.pt-art .fillc { fill: var(--crimson); stroke:none; }
.pt-art .filli { fill: var(--ink); stroke:none; }
.pt-dark .pt-art path, .pt-dark .pt-art circle, .pt-dark .pt-art line,
.pt-dark .pt-art rect, .pt-dark .pt-art ellipse, .pt-dark .pt-art polyline { stroke: rgba(247,244,238,0.82); }
.pt-dark .pt-art .acc, .pt-dark .pt-art .acc * { stroke:#E77A9C; }
.pt-dark .pt-art .fillc { fill:#E77A9C; }

/* ============================================================
   COLOUR — warm panels, a crimson band, texture (less white)
   ============================================================ */
.pt-sec--paper { background: var(--paper-3); border-top:1px solid var(--graph); border-bottom:1px solid var(--graph); }
.pt-sec--tex { position:relative; }
.pt-sec--tex::before {
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0.5;
  background-image:
    radial-gradient(90% 60% at 100% 0%, rgba(196,13,78,0.05), transparent 60%),
    radial-gradient(70% 50% at 0% 100%, rgba(53,59,73,0.04), transparent 60%);
}
.pt-sec--tex > * { position:relative; }

/* crimson pull-band — a strong accent, one per page */
.pt-band { background: var(--crimson-deep); color: var(--ivory); padding-block: clamp(3.5rem,9vh,6.5rem); position:relative; overflow:hidden; }
.pt-band::after { content:''; position:absolute; right:-4%; top:-30%; width:46%; height:160%;
  background: radial-gradient(closest-side, rgba(255,255,255,0.06), transparent); pointer-events:none; }
.pt-band__q { font-family: var(--font-jp); font-weight:600; font-size: clamp(1.35rem,2.8vw,2.2rem); line-height:1.62; letter-spacing:0.04em; max-width: 30ch; position:relative; }
.pt-band__q em { font-style:normal; }
.pt-band__cite { font-family: var(--mono); font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; color: rgba(247,244,238,0.78); margin-top:1.5rem; position:relative; }

/* a faint knit watermark that can sit behind any section */
.pt-watermark { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.pt-watermark svg { position:absolute; right:-8%; bottom:-15%; width:min(46vw,560px); height:auto; opacity:0.055; }
.pt-watermark svg path { fill:none; stroke: var(--ink); stroke-width:1.4; }
.pt-dark .pt-watermark svg path { stroke: var(--ivory); }
.pt-sec > .pt-wrap { position:relative; z-index:1; }

/* ============================================================
   CERT CARDS & FAQ
   ============================================================ */
.pt-certs { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin-top: clamp(2.5rem,5vh,3.5rem); }
@media (max-width:720px){ .pt-certs{ grid-template-columns:1fr; } }
.pt-cert { border:1px solid var(--graph); padding: 1.8rem; display:flex; gap:1.4rem; }
.pt-cert__mark { flex:0 0 auto; width:54px; height:54px; border:1px solid var(--crimson); border-radius:50%; display:grid; place-items:center; color: var(--crimson); font-family:var(--mono); font-size:0.6rem; letter-spacing:0.08em; text-align:center; }
.pt-cert__name { font-size:1.05rem; font-weight:600; color: var(--ink); }
.pt-cert__tag { font-family:var(--mono); font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase; color: var(--crimson); margin-top:0.2rem; }
.pt-cert__p { font-size:0.9rem; line-height:1.72; color: var(--ink-soft); margin-top:0.7rem; }

.faq { border-top:1px solid var(--ink); margin-top: clamp(2rem,4vh,3rem); }
.faq__item { border-bottom:1px solid var(--graph); }
.faq__q { width:100%; text-align:left; background:transparent; border:0; cursor:pointer; padding:1.3rem 0.3rem; display:flex; justify-content:space-between; gap:1rem; align-items:center; font-size:1.05rem; color: var(--ink); font-family: var(--font-sans); }
.faq__q::after { content:'+'; font-family:var(--mono); color: var(--crimson); font-size:1.3rem; transition: transform .3s; }
.faq__item.is-open .faq__q::after { transform: rotate(45deg); }
.faq__a { max-height:0; overflow:hidden; transition: max-height .45s cubic-bezier(.22,1,.36,1); }
.faq__item.is-open .faq__a { max-height: 20rem; }
.faq__a p { padding:0 0.3rem 1.4rem; color: var(--ink-soft); line-height:1.8; max-width:70ch; }

/* ============================================================
   MISC — vision/philosophy/action trio, group cards
   ============================================================ */
.pt-trio { display:grid; grid-template-columns: repeat(3,1fr); gap:0; border-top:1px solid var(--ink); margin-top: clamp(2.5rem,5vh,3.5rem); }
@media (max-width: 820px){ .pt-trio { grid-template-columns:1fr; } }
.pt-trio__c { padding: 2rem 1.8rem 2.4rem; border-right:1px solid var(--graph); border-bottom:1px solid var(--graph); }
.pt-trio__c:nth-child(3){ border-right:0; }
@media (max-width:820px){ .pt-trio__c{ border-right:0; } }
.pt-trio__jp { font-family: var(--font-jp); font-size:1.7rem; color: var(--crimson); }
.pt-trio__en { font-family: var(--mono); font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase; color: var(--ink-soft); margin-top:0.4rem; }
.pt-trio__p { line-height:1.8; color: var(--ink-soft); margin-top:1rem; font-size:0.96rem; }

.pt-groups { display:grid; grid-template-columns: repeat(2,1fr); gap:1.2rem; margin-top: clamp(2.5rem,5vh,3.5rem); }
@media (max-width:720px){ .pt-groups{ grid-template-columns:1fr; } }
.pt-group { border:1px solid var(--graph); padding:1.6rem 1.7rem; }
.pt-group__no { font-family:var(--mono); font-size:0.7rem; letter-spacing:0.16em; color: var(--crimson); }
.pt-group__name { font-size:1.05rem; font-weight:600; color: var(--ink); margin-top:0.6rem; }
.pt-group__loc { font-family:var(--mono); font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; color: var(--ink-soft); margin-top:0.15rem; }
.pt-group__p { font-size:0.9rem; line-height:1.7; color: var(--ink-soft); margin-top:0.8rem; }

/* card link grid on the home page (routes to subpages) */
.pt-cards { display:grid; grid-template-columns: repeat(3,1fr); gap:1.2rem; margin-top: clamp(2.5rem,5vh,3.5rem); }
@media (max-width: 900px){ .pt-cards { grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .pt-cards { grid-template-columns:1fr; } }
.pt-card { border:1px solid var(--graph); padding:1.7rem 1.6rem 1.5rem; display:flex; flex-direction:column; min-height: 12rem; transition: border-color .3s, transform .3s; background: var(--paper); }
.pt-card:hover { border-color: var(--crimson); transform: translateY(-3px); }
.pt-card__no { font-family:var(--mono); font-size:0.7rem; letter-spacing:0.16em; color: var(--crimson); }
.pt-card__t { font-size:1.15rem; font-weight:600; color: var(--ink); margin-top:0.8rem; }
.pt-card__jp { font-family:var(--font-jp); font-size:0.8rem; color: var(--ink-soft); margin-top:0.15rem; }
.pt-card__p { font-size:0.88rem; line-height:1.65; color: var(--ink-soft); margin-top:0.9rem; }
.pt-card__go { font-family:var(--mono); font-size:0.7rem; letter-spacing:0.12em; color: var(--crimson); margin-top:auto; padding-top:1.1rem; }

/* contact form layout (reuses .cform / .field styles from pages.css) */
.pt-contact { display:grid; grid-template-columns: 0.85fr 1.4fr; gap: clamp(2.5rem,6vw,5rem); align-items:start; }
@media (max-width: 900px){ .pt-contact { grid-template-columns:1fr; } }
.pt-contact__info h4 { font-family:var(--mono); font-size:0.7rem; letter-spacing:0.16em; text-transform:uppercase; color: var(--crimson); margin:1.7rem 0 0.5rem; }
.pt-contact__info h4:first-child { margin-top:0; }
.pt-contact__info p { color: var(--ink-soft); line-height:1.85; }
.pt-contact__info a { border-bottom:1px solid rgba(196,13,78,0.35); }

/* utility */
.pt-mono { font-family: var(--mono); }
.pt-hide-sc { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ============================================================
   WARMTH — film grain (like the reference sites) + home hero motion
   ============================================================ */
:root { --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.pt-hero::before, .pt-mast::after, .pt-sec--paper::after, .pt-dark::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0.05; background-image: var(--grain);
}
.pt-sec--paper, .pt-dark { position: relative; }
.pt-sec--paper > .pt-wrap, .pt-dark > .pt-wrap { position: relative; z-index: 1; }

/* home hero — a continuously animated knit: a crimson thread flows and a
   needle rides it, over the lattice that first draws itself in */
.knit-lattice { overflow: visible; opacity: 0.72; }
.knit-lattice .knit-base { fill: none; stroke: var(--crimson); stroke-width: 1.4; opacity: 0.5; }
.knit-lattice .knit-thread {
  fill: none; stroke: var(--crimson); stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: 1.5 13; opacity: 0.95; animation: knitFlow 1.5s linear infinite;
}
@keyframes knitFlow { to { stroke-dashoffset: -14.5; } }
.knit-lattice .knit-needle line { stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; }
.knit-lattice .knit-needle ellipse { fill: none; stroke: var(--ink); stroke-width: 1.6; }
@media (prefers-reduced-motion: reduce) {
  .knit-lattice .knit-thread { animation: none; }
}

/* ============================================================
   FIX — group cards inside dark sections were ink-on-night
   ============================================================ */
.pt-dark .pt-group__name { color: var(--ivory); }
.pt-dark .pt-group__loc,
.pt-dark .pt-group__p { color: rgba(247, 244, 238, 0.7); }
.pt-dark .pt-ds__v { color: rgba(247, 244, 238, 0.85); }
.pt-dark .pt-ds__k span { color: rgba(247, 244, 238, 0.55); }
.pt-dark .pt-note { color: rgba(247, 244, 238, 0.65); }

/* ============================================================
   SITE INDEX — a numbered list, in the language of the fabric index
   (replaces the old bright card grid on the dark ground)
   ============================================================ */
.pt-index { list-style: none; margin: clamp(2.5rem, 5vh, 3.5rem) 0 0; padding: 0; border-top: 1px solid var(--graph); }
.pt-index li { border-bottom: 1px solid var(--graph); }
.pt-index__row {
  display: grid; grid-template-columns: 4.5rem 1fr 1.6fr auto; gap: 1.5rem;
  align-items: center; padding: 1.25rem 0.4rem;
  transition: background .35s var(--ease-out, cubic-bezier(.22,1,.36,1)), padding .35s var(--ease-out, cubic-bezier(.22,1,.36,1));
}
.pt-index__row:hover { background: rgba(247, 244, 238, 0.055); padding-left: 1.1rem; }
.pt-index__no { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.14em; color: var(--crimson); }
.pt-index__name { font-size: 1.05rem; font-weight: 600; color: var(--ivory); }
.pt-index__name em {
  display: block; font-family: var(--mono); font-style: normal;
  font-size: 0.64rem; letter-spacing: 0.16em; color: rgba(247, 244, 238, 0.5); margin-top: 0.25rem;
}
.pt-index__p { font-size: 0.9rem; line-height: 1.75; color: rgba(247, 244, 238, 0.7); }
.pt-index__go { font-family: var(--mono); font-size: 1rem; color: var(--crimson); justify-self: end; transition: transform .35s; }
.pt-index__row:hover .pt-index__go { transform: translateX(6px); }
@media (max-width: 820px) {
  .pt-index__row { grid-template-columns: 3.2rem 1fr auto; }
  .pt-index__p { display: none; }
}

/* the sticky header bar picks up the beige ground so it stays seamless */
.header--solid { background: rgba(239, 233, 221, 0.94); }