/* =========================================================================
   BOONEH — inner pages (warm design-house): collection · object · projects · studio · order
   ========================================================================= */

/* ---------- PAGE HEADER ---------- */
.phead{padding-top:calc(var(--nav-h) + clamp(3rem,9vh,7rem));padding-bottom:clamp(1.6rem,4vh,3rem);position:relative}
.phead__row{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.phead h1{font-family:var(--f-serif);font-weight:400;font-size:clamp(2.6rem,1rem + 6vw,6rem);line-height:.98;letter-spacing:-.025em}
.phead h1 .ital,.phead h1 em{font-style:italic;color:var(--ink)}
.phead p{max-width:44ch;color:var(--ink-2);margin-top:1rem;font-size:var(--fs-lg);line-height:1.45}

/* ---------- FILTER BAR ---------- */
.filters{position:sticky;top:var(--nav-h);z-index:20;background:color-mix(in oklab,var(--paper) 88%,transparent);backdrop-filter:blur(12px);
  border-block:var(--hair) solid var(--line);padding-block:.9rem}
.filters__in{display:flex;justify-content:space-between;align-items:center;gap:1.2rem;flex-wrap:wrap}
.cats{display:flex;gap:.5rem;flex-wrap:wrap}
.cats button{font-family:var(--f-sans);font-weight:500;font-size:var(--fs-small);
  padding:.5em 1.1em;border-radius:var(--pill);border:var(--hair) solid var(--line-2);color:var(--ink-2);
  transition:color var(--t) var(--ease),border-color var(--t) var(--ease),background var(--t) var(--ease)}
.cats button:hover{color:var(--ink);border-color:var(--ink)}
.cats button.on{color:var(--cream);background:var(--ink);border-color:var(--ink)}
.finishbar{display:flex;align-items:center;gap:.7rem}
.finishbar .lbl{font-family:var(--f-sans);font-size:var(--fs-micro);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.finishbar .chips{display:flex;gap:.5rem}

/* ---------- COLLECTION GRID ---------- */
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);padding-block:var(--sec)}
.pcard{position:relative;background:var(--cream);border:var(--hair) solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.pcard:hover{transform:translateY(-6px);box-shadow:0 24px 44px -24px rgba(70,52,22,.4)}
.pcard__img{aspect-ratio:4/3;display:grid;place-items:center;position:relative;overflow:hidden;background:var(--paper-2)}
.pcard__img::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(0,0,0,.04) 1px,transparent 1.5px);background-size:22px 22px;opacity:.5}
.pcard__img img{width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 16px 20px rgba(60,45,20,.18));transition:transform var(--t-slow) var(--ease);position:relative;z-index:1}
.pcard:hover .pcard__img img{transform:scale(1.06) rotate(-1.2deg)}
.pcard__wash{position:absolute;inset:0;background:var(--pc);opacity:0;mix-blend-mode:multiply;transition:opacity var(--t-slow) var(--ease);z-index:0}
.pcard.washed .pcard__wash{opacity:.14}
.pcard__meta{display:flex;justify-content:space-between;align-items:flex-start;gap:.6rem;padding:1.1rem 1.3rem 1.35rem}
.pcard__code{font-family:var(--f-sans);font-weight:600;font-size:.82rem;color:var(--accent);transition:color var(--t) var(--ease)}
.pcard__name{font-family:var(--f-serif);font-size:1.18rem;letter-spacing:-.01em;margin-top:.1rem}
.pcard__cat{font-family:var(--f-sans);font-size:var(--fs-micro);color:var(--ink-2);text-transform:uppercase;letter-spacing:.1em;margin-top:.5rem}
.pcard__price{font-family:var(--f-sans);font-size:var(--fs-small);color:var(--ink-2);text-align:right;white-space:nowrap}
.pcard__tag{position:absolute;top:.9rem;left:.9rem;font-family:var(--f-sans);font-weight:600;font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;
  padding:.35em .8em;border-radius:var(--pill);background:var(--cream);color:var(--ink);border:var(--hair) solid var(--line-2);z-index:3}

/* ---------- OBJECT DETAIL ---------- */
.obj{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--sec);align-items:start;padding-top:calc(var(--nav-h) + clamp(2rem,5vh,4rem));padding-bottom:var(--sec)}
.obj__stage{position:sticky;top:calc(var(--nav-h) + 2rem);aspect-ratio:1/1;border-radius:var(--r-lg);overflow:hidden;
  background:var(--accent-soft);display:grid;place-items:center;border:var(--hair) solid var(--line);transition:background var(--t-slow) var(--ease)}
.obj__stage::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(0,0,0,.045) 1px,transparent 1.5px);background-size:24px 24px;opacity:.5;pointer-events:none}
.obj__imgs{position:relative;width:82%;aspect-ratio:2560/1936;z-index:1}
.obj__imgs img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity var(--t-slow) var(--ease);filter:drop-shadow(0 26px 30px rgba(60,45,20,.22))}
.obj__imgs img.on{opacity:1}
.obj__idx{position:absolute;top:1.2rem;left:1.3rem;font-family:var(--f-sans);font-size:var(--fs-micro);font-weight:600;letter-spacing:.14em;color:var(--ink-2);z-index:2}
.obj__finishname{position:absolute;bottom:1.2rem;left:1.3rem;font-family:var(--f-sans);font-size:var(--fs-small);color:var(--ink);z-index:2}
.obj__code{font-family:var(--f-sans);font-weight:600;color:var(--accent);font-size:1.05rem;transition:color var(--t) var(--ease)}
.obj h1{font-family:var(--f-serif);font-size:clamp(2.2rem,5vw,3.4rem);letter-spacing:-.02em;line-height:1;margin:.4rem 0 .1rem}
.obj__fam{font-family:var(--f-sans);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.obj__price{font-family:var(--f-sans);font-weight:600;font-size:1.5rem;margin:1.4rem 0;color:var(--ink)}
.obj__blurb{color:var(--ink-2);font-size:var(--fs-lg);line-height:1.45}
.obj__choose{margin:2rem 0;padding:1.6rem 0;border-block:var(--hair) solid var(--line)}
.obj__choose h4{font-family:var(--f-sans);font-size:var(--fs-micro);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:1rem;display:flex;justify-content:space-between}
.obj__choose h4 b{color:var(--ink);font-weight:600}
.obj__chips{display:flex;gap:.7rem;flex-wrap:wrap}
.obj__chip{width:34px;height:34px;border-radius:var(--pill);cursor:pointer;position:relative;border:var(--hair) solid rgba(0,0,0,.14);transition:transform var(--t) var(--ease)}
.obj__chip:hover{transform:scale(1.14)}
.obj__chip.sel::after{content:"";position:absolute;inset:-5px;border-radius:var(--pill);border:1.5px solid var(--ink)}
.obj__spec{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:var(--hair) solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:1.4rem}
.obj__spec div{background:var(--cream);padding:1rem 1.2rem}
.obj__spec dt{font-family:var(--f-sans);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.obj__spec dd{font-size:1.05rem;margin-top:.3rem}
.obj__actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem}

/* ---------- PROJECTS (full) ---------- */
.plist{display:flex;flex-direction:column;padding-block:var(--sec)}
.prow{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--gap);align-items:center;padding:2.6rem 0;border-top:var(--hair) solid var(--line);position:relative}
.prow:last-child{border-bottom:var(--hair) solid var(--line)}
.prow__media{aspect-ratio:16/10;border-radius:var(--r-lg);overflow:hidden;background:var(--paper-2);order:2}
.prow__media img{width:100%;height:100%;object-fit:cover;filter:saturate(.96);transition:transform var(--t-slow) var(--ease)}
.prow:hover .prow__media img{transform:scale(1.04)}
.prow__body{order:1}
.prow__no{font-family:var(--f-sans);font-weight:600;font-size:var(--fs-micro);color:var(--accent);letter-spacing:.12em}
.prow__body h2{font-family:var(--f-serif);font-size:clamp(1.8rem,4vw,3rem);letter-spacing:-.02em;line-height:1;margin:.6rem 0}
.prow__body .place{font-family:var(--f-sans);font-size:var(--fs-small);color:var(--ink-2);text-transform:uppercase;letter-spacing:.08em}
.prow__body p{color:var(--ink-2);max-width:46ch;margin:1rem 0 1.2rem;font-size:var(--fs-lg);line-height:1.45}
.prow__body .piece{font-family:var(--f-sans);font-size:var(--fs-micro);color:var(--ink-2)}
.prow__body .piece b{color:var(--ink)}

/* ---------- STUDIO / ABOUT ---------- */
.about__intro{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--sec);align-items:end;padding-block:var(--sec)}
.about__intro .big{font-family:var(--f-serif);font-weight:300;font-size:var(--fs-xl);line-height:1.1;letter-spacing:-.02em}
.about__intro .big em,.about__intro .big .ital{font-style:italic;color:var(--ink)}
.bigquote{font-family:var(--f-serif);font-weight:300;font-size:clamp(1.7rem,3.6vw,3rem);line-height:1.2;letter-spacing:-.02em;max-width:24ch;margin-inline:auto;text-align:center;padding-block:var(--sec)}
.bigquote em,.bigquote .ital{font-style:italic;color:var(--accent)}
.naming{display:grid;grid-template-columns:1fr 1fr;gap:var(--sec) var(--gap);align-items:center;padding-block:var(--sec)}
.clockface{aspect-ratio:1/1;border:var(--hair) solid var(--line-2);border-radius:var(--pill);position:relative;display:grid;place-items:center;max-width:420px;margin-inline:auto;width:100%}
.clockface .c-num{position:absolute;font-family:var(--f-sans);font-size:.8rem;color:var(--ink-2)}
.clockface .c-center{font-family:var(--f-serif);font-size:clamp(2rem,6vw,3.4rem);color:var(--accent);letter-spacing:-.02em;transition:color var(--t) var(--ease)}
.awards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);padding-block:var(--sec)}
.award{border:var(--hair) solid var(--line);border-radius:var(--r-lg);padding:1.6rem;background:var(--cream)}
.award .yr{font-family:var(--f-sans);font-weight:600;font-size:var(--fs-micro);color:var(--accent);letter-spacing:.12em}
.award h4{font-family:var(--f-serif);font-size:1.2rem;margin:.5rem 0 .3rem;letter-spacing:-.01em}
.award p{color:var(--ink-2);font-size:var(--fs-small)}
.ph-note{font-family:var(--f-sans);font-size:var(--fs-micro);color:var(--ink-3);border:var(--hair) dashed var(--line-2);border-radius:var(--pill);padding:.5em 1em;display:inline-block}

/* ---------- ORDER / INVOICE ---------- */
.order{display:grid;grid-template-columns:1fr .8fr;gap:var(--sec);align-items:start;padding-top:calc(var(--nav-h) + clamp(2rem,5vh,4rem));padding-bottom:var(--sec)}
.form h3{font-family:var(--f-serif);font-size:1.5rem;margin-bottom:1.2rem;letter-spacing:-.01em}
.steps{display:flex;gap:1.4rem;margin-bottom:2rem;flex-wrap:wrap}
.step{font-family:var(--f-sans);font-size:var(--fs-micro);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);display:flex;gap:.6em;align-items:center}
.step b{width:22px;height:22px;border-radius:var(--pill);border:var(--hair) solid var(--line-2);display:grid;place-items:center;color:var(--ink-2);font-weight:600}
.step.on b{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.step.on{color:var(--ink)}
.field{margin-bottom:1.1rem}
.field label{display:block;font-family:var(--f-sans);font-size:var(--fs-micro);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-bottom:.5rem}
.field input,.field select,.field textarea{width:100%;background:var(--cream);border:var(--hair) solid var(--line-2);border-radius:var(--r);
  padding:.85em 1em;color:var(--ink);font-family:var(--f-sans);font-size:var(--fs-body);transition:border-color var(--t) var(--ease)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink)}
.field.row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.lineitems{width:100%;border-collapse:collapse;margin-top:.5rem}
.lineitems th{font-family:var(--f-sans);font-size:var(--fs-micro);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);text-align:left;padding:.6rem;border-bottom:var(--hair) solid var(--line)}
.lineitems td{padding:.5rem .6rem;border-bottom:var(--hair) solid var(--line);font-size:var(--fs-small)}
.lineitems input,.lineitems select{background:var(--cream);border:var(--hair) solid var(--line-2);border-radius:var(--r-sm);padding:.5em .6em;color:var(--ink);width:100%;font-family:var(--f-sans);font-size:var(--fs-small)}
.invoice{position:sticky;top:calc(var(--nav-h) + 2rem);background:var(--cream);border:var(--hair) solid var(--line);border-radius:var(--r-lg);padding:1.8rem}
.invoice h3{font-family:var(--f-sans);font-size:var(--fs-micro);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:1.4rem}
.invoice .line{display:flex;justify-content:space-between;padding:.6rem 0;font-family:var(--f-sans);font-size:var(--fs-small);color:var(--ink-2)}
.invoice .line b{color:var(--ink);font-weight:600}
.invoice .total{display:flex;justify-content:space-between;align-items:baseline;padding-top:1.2rem;margin-top:.6rem;border-top:var(--hair) solid var(--line)}
.invoice .total span{font-family:var(--f-sans);font-size:var(--fs-micro);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.invoice .total b{font-family:var(--f-serif);font-size:1.7rem;color:var(--ink)}
.invoice .bank{margin-top:1.4rem;padding-top:1.2rem;border-top:var(--hair) solid var(--line);font-family:var(--f-sans);font-size:var(--fs-micro);color:var(--ink-2);line-height:1.9}

/* ---------- COLOUR WORLDS (shared with home) ---------- */
.worlds__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;border:var(--hair) solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--line)}
.world{aspect-ratio:5/4;position:relative;background:var(--wc);display:flex;flex-direction:column;justify-content:flex-end;padding:1.1rem;overflow:hidden;cursor:pointer;transition:transform var(--t) var(--ease)}
.world::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 80% 0%,rgba(255,255,255,.3),transparent 55%);mix-blend-mode:soft-light}
.world::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(0,0,0,.12) 1px,transparent 1.4px);background-size:16px 16px;opacity:.45}
.world span{position:relative;z-index:2;font-family:var(--f-sans);font-size:var(--fs-small);letter-spacing:.02em;color:var(--wink)}
.world b{position:relative;z-index:2;font-family:var(--f-serif);font-size:clamp(1.1rem,2.4vw,1.7rem);letter-spacing:-.01em;color:var(--wink);line-height:1;font-weight:400}
.world .hex{position:absolute;top:1.1rem;left:1.1rem;font-family:var(--f-sans);font-size:var(--fs-micro);color:var(--wink);opacity:.7;z-index:2}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){ .worlds__grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:1000px){
  .cgrid{grid-template-columns:1fr 1fr}
  .obj{grid-template-columns:1fr;gap:2.4rem}
  .obj__stage{position:relative;top:0;max-width:520px;margin-inline:auto;width:100%}
  .order{grid-template-columns:1fr;gap:2.4rem}
  .invoice{position:relative;top:0}
  .about__intro,.naming{grid-template-columns:1fr;gap:2.4rem}
  .prow{grid-template-columns:1fr}.prow__media{order:1}.prow__body{order:2}
  .awards{grid-template-columns:1fr}
}
@media (max-width:560px){
  .cgrid{grid-template-columns:1fr}
  .obj__spec{grid-template-columns:1fr}
  .field.row{grid-template-columns:1fr}
  .worlds__grid{grid-template-columns:1fr 1fr}
}