/* ============================================================
   CARRIAN ORO — multi-page components
   Loaded after main.css. Tokens all come from main.css.
   22 page header · 23 cards+ · 24 journal · 25 prose
   26 piece · 27 cart · 28 search · 29 forms+ · 30 blocks
   ============================================================ */

/* ---------- 22. PAGE HEADER ---------- */
.phead{position:relative;padding:calc(var(--nav-h) + clamp(3rem,7vw,6rem)) 0 clamp(2rem,5vw,4rem);
  background:var(--bg);color:var(--fg)}
.phead__title{font-family:var(--display);font-weight:300;font-size:var(--t-h2);
  line-height:1.04;letter-spacing:-.02em;max-width:18ch;margin:var(--s3) 0}
.phead .lead{max-width:60ch}
.phead--dark{background:var(--obsidian);color:var(--ivory)}
.phead--dark .lead{color:rgba(250,246,241,.72)}
.phead--dark .eyebrow{color:var(--copper-lit)}
.section--bone{background:var(--bone)}

/* Breadcrumbs */
.crumbs{display:flex;align-items:center;gap:.7rem;padding-top:calc(var(--nav-h) + 1.5rem);
  font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-subtle)}
.crumbs a{display:inline-flex;align-items:center;gap:.5rem;color:var(--accent);
  transition:opacity var(--d-mid) var(--e-out)}
.crumbs a:hover{opacity:.7}
.crumbs__ico{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.6}

/* ---------- 23. CARD ADDITIONS ---------- */
.card__media{display:block}
.card__add{
  position:absolute;left:.75rem;right:.75rem;bottom:.75rem;z-index:3;
  display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;
  background:var(--obsidian);color:var(--ivory);
  font-size:.5625rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  opacity:0;transform:translateY(10px);
  transition:opacity 380ms var(--e-out),transform 380ms var(--e-out),background-color var(--d-mid)}
.card{position:relative}
.card:hover .card__add,.card:focus-within .card__add{opacity:1;transform:none}
.card__add:hover{background:var(--copper-deep)}
.card__add svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.card__add.is-added{background:var(--copper-deep)}
.card__name a{transition:color var(--d-mid) var(--e-out)}
.card__name a:hover{color:var(--accent)}
.filters__count{margin-left:auto;align-self:center;font-size:.625rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg-subtle)}
.grid__empty{text-align:center;padding:var(--s6) 0;color:var(--fg-muted)}
.grid__empty a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

@media (hover:none),(pointer:coarse){
  .card__add{opacity:1;transform:none;position:static;margin-top:.75rem;
    background:transparent;color:var(--accent);border:1px solid var(--rule)}
}

/* ---------- 24. JOURNAL ---------- */
.posts{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,4vw,3rem)}
.post{display:flex;flex-direction:column}
.post__media{display:block;aspect-ratio:4/3;overflow:hidden;position:relative;
  background:linear-gradient(165deg,#FFFDFA,#EFE8DC);border:1px solid var(--rule)}
.post__media::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.9),transparent 62%);
  opacity:0;transition:opacity 420ms var(--e-out);mix-blend-mode:soft-light}
.post:hover .post__media::after{opacity:1}
.post__media img{width:100%;height:100%;object-fit:cover;
  transition:transform 900ms var(--e-out)}
.post:hover .post__media img{transform:scale(1.05)}
.post__body{padding-top:1.1rem;display:flex;flex-direction:column;gap:.55rem}
.post__meta{font-size:.5625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.post__title{font-family:var(--display);font-size:clamp(1.3rem,2vw,1.65rem);font-weight:400;
  line-height:1.22;letter-spacing:0}
.post__title a{transition:color var(--d-mid) var(--e-out)}
.post__title a:hover{color:var(--accent)}
.post__dek{font-size:.9375rem;line-height:1.65;color:var(--fg-muted);max-width:46ch}
.post__date{font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-subtle);
  margin-top:.2rem}

/* Article */
.article__head{padding-top:clamp(1.5rem,4vw,2.5rem)}
.article__head h1{font-size:clamp(2rem,4.6vw,3.4rem);font-weight:300;line-height:1.05;
  letter-spacing:-.02em;margin:var(--s3) 0}
.article__date{font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-subtle)}
.article__hero{margin:clamp(2rem,5vw,3.5rem) 0;aspect-ratio:16/9;overflow:hidden;
  border:1px solid var(--rule)}
.article__hero img{width:100%;height:100%;object-fit:cover}
.article__next{display:flex;flex-direction:column;gap:.5rem;margin-top:var(--s6);
  padding-top:var(--s4);border-top:1px solid var(--rule)}
.article__next span{font-size:.5625rem;letter-spacing:.24em;text-transform:uppercase;color:var(--fg-subtle)}
.article__next a{font-family:var(--display);font-size:clamp(1.35rem,2.6vw,2rem);font-weight:300;
  display:inline-flex;align-items:center;gap:.8rem;transition:color var(--d-mid) var(--e-out)}
.article__next a:hover{color:var(--accent)}
.article__next a .btn__ico{width:20px;height:20px;transition:transform var(--d-mid) var(--e-out)}
.article__next a:hover .btn__ico{transform:translateX(5px)}

/* ---------- 25. PROSE ---------- */
.prose{max-width:68ch}
.prose h2{font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:300;
  line-height:1.2;letter-spacing:-.015em;margin:clamp(2.2rem,4vw,3rem) 0 .9rem}
.prose h2:first-child{margin-top:0}
.prose p{font-size:clamp(1rem,.97rem + .2vw,1.125rem);line-height:1.78;color:var(--fg-muted);
  margin-bottom:1.15rem}
.prose p:last-child{margin-bottom:0}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
.prose blockquote{margin:clamp(2rem,4vw,2.75rem) 0;padding-left:clamp(1.25rem,3vw,2rem);
  border-left:2px solid var(--copper);font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(1.25rem,2.4vw,1.75rem);line-height:1.4;color:var(--fg)}
.prose__list{margin:0 0 1.3rem;padding-left:1.15rem;list-style:none}
.prose__list li{position:relative;font-size:1rem;line-height:1.7;color:var(--fg-muted);
  margin-bottom:.6rem;padding-left:.35rem}
.prose__list li::before{content:"";position:absolute;left:-1rem;top:.72em;width:5px;height:5px;
  transform:rotate(45deg);background:var(--copper)}
.prose--tight p{font-size:1rem}

/* ---------- 26. PIECE PAGE ---------- */
.piece__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,5vw,4rem);
  padding:clamp(1.5rem,4vw,2.5rem) 0 clamp(3rem,6vw,5rem);align-items:start}
.piece__media{position:relative;overflow:hidden;border:1px solid var(--rule);
  background:linear-gradient(165deg,#FFFDFA,#EFE8DC)}
.piece__media img{width:100%;height:auto;display:block;
  transition:transform 1200ms var(--e-out)}
.piece__media:hover img{transform:scale(1.03)}
.piece__zoom{position:absolute;right:1rem;bottom:1rem;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;background:rgba(250,246,241,.92);color:var(--fg);
  box-shadow:var(--sh-1);transition:background-color var(--d-mid),color var(--d-mid),transform var(--d-mid)}
.piece__zoom:hover{background:var(--obsidian);color:var(--ivory);transform:scale(1.06)}
.piece__zoom svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5}
.piece__title{font-family:var(--display);font-size:clamp(2rem,4vw,3rem);font-weight:300;
  line-height:1.05;letter-spacing:-.02em;margin:.6rem 0 .5rem}
.piece__price{font-size:1.3rem;font-weight:500;letter-spacing:.04em;color:var(--fg)}
.piece__desc{font-size:1.0625rem;line-height:1.7;color:var(--fg-muted);max-width:46ch;
  margin-top:var(--s2)}
.piece__buy{display:grid;gap:.7rem;margin:var(--s4) 0}
.piece__note{font-size:.75rem;color:var(--fg-subtle);letter-spacing:.04em}
.piece__specs{display:grid;border-top:1px solid var(--rule);margin-top:var(--s2)}
.piece__specs > div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);
  padding:.8rem 0;border-bottom:1px solid var(--rule)}
.piece__specs dt{font-size:.5625rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg-subtle)}
.piece__specs dd{margin:0;font-size:.875rem;text-align:right}
.piece__story{max-width:68ch;margin:0 auto clamp(3rem,6vw,5rem);padding-top:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--rule)}
.piece__story h2{font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2rem);font-weight:300;
  margin-bottom:1rem}
.piece__story p{font-size:1.0625rem;line-height:1.78;color:var(--fg-muted);margin-bottom:1.15rem}

.lightbox{position:fixed;inset:0;z-index:calc(var(--z-modal) + 5);display:grid;place-items:center;
  padding:clamp(1rem,4vw,3rem);background:rgba(16,12,9,.94);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity 420ms var(--e-out)}
.lightbox.is-open{opacity:1;visibility:visible;pointer-events:auto}
.lightbox img{max-width:100%;max-height:88svh;object-fit:contain;
  transform:scale(.96);transition:transform 520ms var(--e-out)}
.lightbox.is-open img{transform:none}
.lightbox__close{position:absolute;top:1rem;right:1rem;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;color:var(--ivory);background:rgba(250,246,241,.12);
  transition:background-color var(--d-mid),transform var(--d-mid)}
.lightbox__close:hover{background:rgba(250,246,241,.24);transform:rotate(90deg)}
.lightbox__close svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5}

/* ---------- 27. CART ---------- */
.cartd{position:fixed;inset:0;z-index:var(--z-modal);visibility:hidden;pointer-events:none}
.cartd.is-open{visibility:visible;pointer-events:auto}
.cartd__scrim{position:absolute;inset:0;background:rgba(16,12,9,.55);opacity:0;
  transition:opacity 420ms var(--e-out)}
.cartd.is-open .cartd__scrim{opacity:1}
.cartd__panel{position:absolute;top:0;right:0;bottom:0;width:min(430px,100%);
  background:var(--surface);display:flex;flex-direction:column;box-shadow:var(--sh-3);
  transform:translateX(100%);transition:transform 560ms var(--e-out)}
.cartd.is-open .cartd__panel{transform:none}
.cartd__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  padding:1.15rem 1.25rem;border-bottom:1px solid var(--rule)}
.cartd__head h2{font-family:var(--display);font-size:1.4rem;font-weight:400}
.cartd__body{flex:1;overflow:auto;padding:1.25rem;display:grid;gap:1rem;align-content:start}
.cartd__foot{padding:1.25rem;border-top:1px solid var(--rule);display:grid;gap:.85rem}
.cartd__row{display:flex;justify-content:space-between;align-items:baseline;
  font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase}
.cartd__row b{font-family:var(--display);font-size:1.5rem;font-weight:300;letter-spacing:0}
.cartd__note{font-size:.75rem;line-height:1.55;color:var(--fg-subtle)}
.cartd__empty{text-align:center;color:var(--fg-muted);padding:var(--s5) 0;font-size:.9375rem}

.citem{display:grid;grid-template-columns:72px minmax(0,1fr);gap:.9rem;align-items:start}
.citem__img{aspect-ratio:4/5;overflow:hidden;border:1px solid var(--rule);background:var(--bone)}
.citem__img img{width:100%;height:100%;object-fit:cover}
.citem__name{font-family:var(--display);font-size:1.05rem;font-weight:400;line-height:1.25}
.citem__mat{display:block;font-size:.5625rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-subtle);margin-top:.28rem}
.citem__row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:.6rem}
.citem__price{font-size:.8125rem;font-weight:500;font-variant-numeric:tabular-nums}
.qty{display:inline-flex;align-items:center;border:1px solid var(--rule)}
.qty button{width:32px;height:32px;display:grid;place-items:center;color:var(--fg-muted);
  transition:color var(--d-mid),background-color var(--d-mid)}
.qty button:hover{color:var(--fg);background:var(--bone)}
.qty button svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}
.qty output{min-width:30px;text-align:center;font-size:.8125rem;font-variant-numeric:tabular-nums}
.citem__del{font-size:.5625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-subtle);
  display:inline-flex;align-items:center;gap:.35rem;transition:color var(--d-mid)}
.citem__del:hover{color:#B4402F}
.citem__del svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.6}
.citem.is-leaving{opacity:0;transform:translateX(24px);transition:opacity 320ms,transform 320ms}

.cart__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.cart__items{display:grid;gap:1.5rem}
.cart__items .citem{grid-template-columns:110px minmax(0,1fr);
  padding-bottom:1.5rem;border-bottom:1px solid var(--rule)}
.cart__summary{background:var(--bone);padding:clamp(1.5rem,3vw,2rem);display:grid;gap:1rem;
  align-content:start;position:sticky;top:calc(var(--nav-h) + 1.5rem)}
.cart__summary h2{font-family:var(--display);font-size:1.5rem;font-weight:400}
.cart__totals{display:grid;border-top:1px solid var(--rule)}
.cart__totals > div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.7rem 0;border-bottom:1px solid var(--rule)}
.cart__totals dt{font-size:.5625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-subtle)}
.cart__totals dd{margin:0;font-size:.9375rem}
.cart__totals > div:first-child dd{font-family:var(--display);font-size:1.5rem;font-weight:300}
.cart__note{font-size:.75rem;line-height:1.6;color:var(--fg-subtle)}
.cart__empty{grid-column:1/-1;display:grid;gap:var(--s2);padding:var(--s6) 0;justify-items:center}

/* ---------- 28. SEARCH ---------- */
.search{position:fixed;inset:0;z-index:calc(var(--z-modal) + 2);visibility:hidden;pointer-events:none}
.search.is-open{visibility:visible;pointer-events:auto}
.search__scrim{position:absolute;inset:0;background:rgba(16,12,9,.6);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity 380ms var(--e-out)}
.search.is-open .search__scrim{opacity:1}
.search__panel{position:relative;width:min(680px,calc(100% - 2rem));margin:clamp(4rem,12vh,9rem) auto 0;
  background:var(--surface);box-shadow:var(--sh-3);
  opacity:0;transform:translateY(-14px);transition:opacity 380ms var(--e-out),transform 380ms var(--e-out)}
.search.is-open .search__panel{opacity:1;transform:none}
.search__bar{display:flex;align-items:center;gap:.7rem;padding:.9rem 1rem;
  border-bottom:1px solid var(--rule)}
.search__ico{width:18px;height:18px;stroke:var(--fg-subtle);fill:none;stroke-width:1.5;flex:none}
.search__bar input{flex:1;min-height:44px;border:0;background:transparent;font-family:var(--sans);
  font-size:1rem;color:var(--fg)}
.search__bar input:focus{outline:none}
.search__results{max-height:min(56vh,460px);overflow:auto}
.sres{display:flex;align-items:center;gap:.9rem;padding:.8rem 1rem;border-bottom:1px solid var(--rule);
  transition:background-color var(--d-fast)}
.sres:hover,.sres:focus-visible{background:var(--bone)}
.sres img{width:46px;height:57px;object-fit:cover;flex:none;border:1px solid var(--rule)}
.sres__t{font-family:var(--display);font-size:1.05rem;font-weight:400;line-height:1.2}
.sres__d{font-size:.75rem;color:var(--fg-subtle);margin-top:.2rem}
.sres__k{margin-left:auto;font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);flex:none}
.search__none{padding:2rem 1rem;text-align:center;color:var(--fg-subtle);font-size:.9375rem}

/* ---------- 29. FORMS (light variant) + signup ---------- */
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;
  opacity:0!important;pointer-events:none}
.form__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
.form--light .field label{color:var(--fg-muted)}
.form--light .field input,.form--light .field select,.form--light .field textarea{
  color:var(--fg);border-bottom-color:var(--rule)}
.form--light .field input::placeholder,.form--light .field textarea::placeholder{color:var(--fg-subtle)}
.form--light .field input:focus,.form--light .field select:focus,.form--light .field textarea:focus{
  border-bottom-color:var(--accent)}
.form--light .field:focus-within label{color:var(--accent)}
.form--light .field .help{color:var(--fg-subtle)}
.form--light .field .err{color:#A3372A}
.form--light .field.is-invalid input,.form--light .field.is-invalid select,
.form--light .field.is-invalid textarea{border-bottom-color:#A3372A}
.form--light .form__note{color:var(--fg-subtle)}
/* The required-field asterisk inherits the dark-form copper; on a light form
   that lands at ~1.9:1 and effectively disappears. */
.form--light .field label .req{color:var(--accent)}

.form--light .form__status{color:var(--accent)}
.form--light .field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C441A' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.form--light .field select option{background:#fff;color:var(--fg)}
.form.is-sent{opacity:.55;pointer-events:none}

.signup{margin-top:1.6rem;display:grid;gap:.5rem;max-width:320px}
.signup label{font-size:.5625rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--copper-lit)}
.signup__row{display:flex;align-items:center;gap:.5rem;border-bottom:1px solid rgba(250,246,241,.26);
  transition:border-color var(--d-mid)}
.signup__row:focus-within{border-bottom-color:var(--copper-lit)}
.signup input{flex:1;min-height:44px;background:transparent;border:0;color:var(--ivory);
  font-family:var(--sans);font-size:.875rem}
.signup input:focus{outline:none}
.signup input::placeholder{color:rgba(250,246,241,.32)}
.signup__go{width:40px;height:40px;display:grid;place-items:center;color:var(--copper-lit);
  transition:transform var(--d-mid) var(--e-out)}
.signup__go:hover{transform:translateX(3px)}
.signup__go svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.6}
.signup__status{font-size:.75rem;color:var(--copper-lit);min-height:1.1em}

/* ---------- 30. CONTENT BLOCKS ---------- */
.cta{background:var(--obsidian);color:var(--ivory);padding:clamp(3.5rem,8vw,6.5rem) 0;text-align:center}
.cta .eyebrow{color:var(--copper-lit)}
.cta .display{margin:var(--s3) 0}
.cta .lead{color:rgba(250,246,241,.72);max-width:52ch}
.cta__row{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:center;margin-top:var(--s4)}
.cta .btn--ghost{color:var(--ivory);border-color:rgba(250,246,241,.3)}
.cta .btn--ghost::before{background:var(--ivory)}
.cta .btn--ghost:hover{color:var(--obsidian);border-color:var(--ivory)}

.pillars{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4)}
.pillar{padding:var(--s4) 0;border-top:1px solid var(--rule)}
.pillar i{display:block;font-family:var(--display);font-style:normal;font-size:.8125rem;
  letter-spacing:.1em;color:var(--accent);margin-bottom:.9rem;font-variant-numeric:tabular-nums}
.pillar h3{font-family:var(--sans);font-size:1.05rem;font-weight:500;letter-spacing:.01em;
  line-height:1.4;margin-bottom:.5rem}
.pillar p{font-size:.9375rem;line-height:1.68;color:var(--fg-muted)}

.archive{display:grid;gap:0;border-top:1px solid var(--rule)}
.arch{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.25rem,4vw,3rem);
  padding:var(--s4) 0;border-bottom:1px solid var(--rule);align-items:start}
.arch__no{font-family:var(--display);font-size:clamp(2rem,4vw,3.2rem);font-weight:300;line-height:.85;
  color:transparent;-webkit-text-stroke:1px rgba(124,68,26,.45);
  transition:color 600ms var(--e-out)}
.arch:hover .arch__no{color:rgba(185,112,47,.16)}
.arch h3{font-family:var(--display);font-size:clamp(1.3rem,2.4vw,1.75rem);font-weight:400;
  margin-bottom:.5rem}
.arch p{font-size:.9375rem;line-height:1.7;color:var(--fg-muted);max-width:56ch}
.arch__meta{display:inline-block;margin-top:.7rem;font-size:.5625rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent)}

.ministeps{display:grid;gap:0;margin:var(--s4) 0;counter-reset:ms;list-style:none;
  border-top:1px solid rgba(250,246,241,.14)}
.ministeps li{display:grid;gap:.25rem;padding:1.05rem 0 1.05rem 2.6rem;position:relative;
  border-bottom:1px solid rgba(250,246,241,.14)}
.ministeps li::before{counter-increment:ms;content:counter(ms);position:absolute;left:0;top:1.15rem;
  width:22px;height:22px;border-radius:50%;border:1px solid var(--copper);color:var(--copper-lit);
  display:grid;place-items:center;font-size:.625rem;font-variant-numeric:tabular-nums}
.ministeps b{font-size:.9375rem;font-weight:500}
.ministeps span{font-size:.8125rem;color:rgba(250,246,241,.6)}

.faq{display:grid;border-top:1px solid var(--rule)}
.faq__item{border-bottom:1px solid var(--rule)}
.faq__item summary{position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1.15rem 0;cursor:pointer;list-style:none;
  font-family:var(--sans);font-size:1rem;font-weight:500;line-height:1.45;
  transition:color var(--d-mid) var(--e-out)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--accent)}
.faq__ico{position:relative;width:14px;height:14px;flex:none}
.faq__ico::before,.faq__ico::after{content:"";position:absolute;background:var(--accent);
  transition:transform 320ms var(--e-out),opacity 320ms var(--e-out)}
.faq__ico::before{top:6px;left:0;width:14px;height:1.5px}
.faq__ico::after{left:6px;top:0;width:1.5px;height:14px}
.faq__item[open] .faq__ico::after{transform:rotate(90deg);opacity:0}
.faq__item p{padding:0 0 1.3rem;font-size:.9375rem;line-height:1.72;color:var(--fg-muted);
  max-width:64ch;animation:faqIn 420ms var(--e-out)}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.contact__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2.5rem,6vw,5rem);
  align-items:start}
.contact__cards{display:grid;gap:1rem}
.ccard{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:start;
  padding:1.15rem 1.25rem;border:1px solid var(--rule);background:var(--surface);
  transition:border-color var(--d-mid) var(--e-out),transform var(--d-mid) var(--e-out)}
a.ccard:hover{border-color:var(--copper);transform:translateY(-2px)}
.ccard svg{width:19px;height:19px;stroke:var(--accent);fill:none;stroke-width:1.4;margin-top:.15rem}
.ccard b{grid-column:2;font-size:.5625rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--fg-subtle)}
.ccard span{grid-column:2;font-size:.9375rem;line-height:1.55;margin-top:.3rem}

.btn--block{width:100%}

/* ---------- RESPONSIVE ---------- */
@media (min-width:640px){
  .posts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pillars{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s5)}
}
@media (min-width:768px){
  .piece__grid{grid-template-columns:1.05fr .95fr;gap:clamp(2.5rem,5vw,4.5rem)}
  .contact__grid{grid-template-columns:.85fr 1.15fr}
  .cart__grid{grid-template-columns:1.5fr .8fr}
  .arch{grid-template-columns:auto minmax(0,1fr)}
}
@media (min-width:1024px){
  .posts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pillars{grid-template-columns:repeat(4,minmax(0,1fr))}
  .phead__title{font-size:clamp(2.6rem,4.4vw,4.2rem)}
}
@media (prefers-reduced-motion:reduce){
  .faq__item p{animation:none}
  .lightbox img,.cartd__panel,.search__panel{transition:none}
}

/* ---------- 31. DARK-CONTEXT BUTTONS + MICRO-ANIMATIONS ---------- */
.cta .btn--copper,.phead--dark .btn--copper,.signature .btn--copper{
  color:var(--copper-lit);border-color:rgba(227,169,113,.55)}
.cta .btn--copper:hover,.phead--dark .btn--copper:hover,.signature .btn--copper:hover,
.cta .btn--copper:focus-visible,.phead--dark .btn--copper:focus-visible,
.signature .btn--copper:focus-visible{color:var(--obsidian);border-color:var(--copper-lit)}

/* Cart badge pulse when an item lands */
@keyframes badgePop{0%{transform:scale(1)}38%{transform:scale(1.45)}100%{transform:scale(1)}}
.cart-count.pop{animation:badgePop 420ms var(--e-out)}

/* Add-to-selection confirmation swap */
.card__add.is-added,.btn.is-added{position:relative}
.card__add.is-added{color:var(--copper-lit)}

/* Nav lift on inner pages — no hero to fade against */
.nav.is-static{background:rgba(250,246,241,.94)}

/* Chip press */
.chip{transition:color var(--d-mid) var(--e-out),border-color var(--d-mid) var(--e-out),
  background-color var(--d-mid) var(--e-out),transform var(--d-fast) var(--e-out)}
.chip:active{transform:scale(.96)}

/* Filtered cards leave rather than vanish */
.card{transition:opacity 360ms var(--e-out),transform 360ms var(--e-out)}
.card.is-filtered{display:none}

/* Focus ring inside dark panels */
.phead--dark :focus-visible,.cta :focus-visible,.signature :focus-visible,
.bespoke :focus-visible,.cartd :focus-visible{outline-color:var(--copper-lit)}

@media (prefers-reduced-motion:reduce){
  .cart-count.pop{animation:none}
}

/* ============================================================
   32. MOBILE REFINEMENT  (<= 767px)
   The desktop design leans on 8-10px letterspaced labels and
   hover-revealed controls. Neither survives a phone: the labels
   drop below comfortable reading size and the tap targets fall
   well under 44px. This block re-tunes both.
   ============================================================ */
@media (max-width:767px){

  /* --- Wordmark: was wrapping onto two lines at 375px --- */
  .brand{min-height:44px;gap:.6rem}
  .brand__mark{font-size:1.02rem;letter-spacing:.1em;white-space:nowrap}
  .brand__text{gap:0}

  /* --- Small labels: step up from 8-9px to a readable size --- */
  .eyebrow{font-size:.6875rem;letter-spacing:.24em}
  .card__mat,.citem__mat,.post__meta,.post__date,.arch__meta,
  .step__aside,.filters__count,.piece__note{font-size:.6875rem;letter-spacing:.14em}
  .card__tag{font-size:.625rem;letter-spacing:.14em;padding:.45rem .75rem}
  .footer h4{font-size:.6875rem;letter-spacing:.2em}
  .field label,.spec dt,.piece__specs dt,.cart__totals dt,.contact-list dt,
  .modal__specs dt,.ccard b,.signup label{font-size:.6875rem;letter-spacing:.16em}
  .quote cite{font-size:.6875rem;letter-spacing:.16em}
  .hero__stat span{font-size:.625rem;letter-spacing:.16em}
  .cartd__row{font-size:.75rem;letter-spacing:.14em}
  .btn{font-size:.75rem;letter-spacing:.16em}
  .chip{font-size:.6875rem;letter-spacing:.12em}
  .card__add{font-size:.6875rem;letter-spacing:.14em}
  .drawer__link span{font-size:.6875rem}
  .nav__link{font-size:.75rem}

  /* --- Tap targets --- */
  .footer li a{display:flex;align-items:center;min-height:44px;font-size:.9375rem}
  .footer li + li{margin-top:0}
  .footer ul{margin-top:-.4rem}
  .tlink{display:inline-flex;align-items:center;min-height:44px}
  .signup__go{width:44px;height:44px}
  .card__name a,.post__title a{display:inline-block;padding-block:.7rem}
  .article__next span,.signup__status,.cartd__note,.cart__note,
  .form__note,.field .help,.field .err{font-size:.8125rem}
  .article__next span{letter-spacing:.2em}
  .card__add,.card .card__add{min-height:48px}
  .piece__zoom{width:48px;height:48px}
  .crumbs{font-size:.6875rem;letter-spacing:.14em;gap:.5rem}
  .crumbs a{min-height:44px;display:inline-flex;align-items:center}
  .card__tag{font-size:.6875rem}
  .cart-count{font-size:.625rem;min-width:19px;height:19px;border-radius:10px}
  .citem__del{min-height:44px;display:inline-flex;align-items:center}
  .qty button{width:44px;height:44px}
  .citem__name{display:inline-block;padding-block:.6rem;line-height:1.2}
  .faq__item summary{padding-block:1.25rem}

  /* --- Layout breathing room --- */
  .phead{padding-top:calc(var(--nav-h) + 2.25rem)}
  .phead__title{max-width:none}
  .hero__title{letter-spacing:-.02em}
  .hero__meta{gap:1.15rem 1.75rem}
  .grid{gap:2rem 1rem}
  .cart__items .citem{grid-template-columns:88px minmax(0,1fr)}
  .cart__summary{position:static}
  .piece__specs dd,.modal__specs dd{font-size:.9375rem}
  .spec > div:nth-child(even){padding-left:1rem}
  .spec > div:nth-child(odd){padding-right:1rem}

  /* --- Cart drawer + search fill the screen properly --- */
  .cartd__panel{width:100%}
  .search__panel{margin-top:4.5rem}
  .search__results{max-height:60vh}
  .sres{padding:.9rem 1rem}

  /* --- Archive rows stack --- */
  .arch{grid-template-columns:minmax(0,1fr);gap:.5rem}
  .arch__no{font-size:2.4rem}

  /* --- Footer: two columns rather than one long list --- */
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s3)}
  .footer__brand{grid-column:1/-1}
  .footer__bottom{flex-direction:column;align-items:flex-start;gap:.5rem}
}

/* Very small phones */
@media (max-width:379px){
  .brand__mark{font-size:.95rem;letter-spacing:.07em}
  .nav__actions{gap:0}
  .grid{grid-template-columns:minmax(0,1fr)}
  .card--wide{grid-column:span 1}
}

/* 320px (SE-class). The wordmark plus three 44px icons overran the bar.
   Tighten the gutter and the mark rather than shrinking the tap targets. */
@media (max-width:359px){
  :root{--gutter:1rem}
  .brand__mark{font-size:.875rem;letter-spacing:.05em}
  .brand__glyph{width:28px}
  .nav.is-stuck .brand__glyph{width:26px}
  .brand{gap:.45rem}
  .nav__inner{gap:.5rem}
}

/* --- Mobile hero: portrait art, content anchored to the lower third --- */
@media (max-width:767px){
  .hero__bg,.hero__bg picture{position:absolute;inset:0;display:block}
  .hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
  /* The portrait frame already falls away to black at the bottom, so the
     scrim only needs to deepen it rather than build the gradient itself. */
  .hero__vignette{background:
    linear-gradient(180deg,rgba(16,12,9,.62) 0%,rgba(16,12,9,.12) 24%,
                    rgba(16,12,9,.55) 58%,rgba(16,12,9,.93) 100%)}
  .hero__inner{padding-block:0 clamp(2.5rem,7vh,4rem)}
  .hero__grid{gap:var(--s3)}
  .hero__title{margin-top:var(--s2)}
  .hero__cta .btn{width:100%}
}

/* ---------- 33. LANDSCAPE PHONES ----------
   A phone on its side is ~812x375: wide enough to clear the 768px
   breakpoint and get the full desktop nav, but not wide enough to fit it,
   and far too short for a 100svh hero. Target the short viewport rather
   than the width, so tablets keep the full navigation. */
@media (max-width:1000px) and (max-height:540px) and (orientation:landscape){
  .nav__menu{display:none}
  .nav__burger{display:grid}
  .nav{height:60px}
  .nav.is-stuck{height:56px}

  .hero{min-height:auto;padding-top:60px}
  .hero__inner{padding-block:1.5rem 2rem}
  .hero__grid{grid-template-columns:1.15fr .85fr;gap:var(--s3);align-items:center}
  .hero__title{font-size:clamp(1.9rem,5vw,2.6rem);margin-top:.5rem}
  .hero__cta{margin-top:var(--s3)}
  .hero__cta .btn{width:auto}
  .hero__meta{gap:.8rem 1.5rem;padding-top:var(--s2)}
  .hero__stat b{font-size:1.3rem}
  .hero__scroll{display:none}

  .phead{padding-top:calc(60px + 1.75rem);padding-bottom:1.5rem}
  .section{padding-block:clamp(2.5rem,6vw,4rem)}

  /* The drawer is a full-height column on a 375px-tall screen — let it scroll */
  .drawer{justify-content:flex-start;overflow-y:auto;padding-block:5rem 2rem}
  .drawer__link{font-size:1.6rem;padding:.14em 0}
  .drawer__glyph{width:44px;margin-bottom:var(--s2)}
  .drawer__foot{margin-top:var(--s3)}

  .search__panel{margin-top:3rem}
  .search__results{max-height:44vh}
  .cartd__panel{width:min(420px,100%)}
}

/* ---------- 34. NAV BREAKPOINT ----------
   The layout breakpoint is 768px, but the nav needs more room than that:
   the wordmark, six links and three icons only fit from about 900px.
   Tablet portrait (768x1024) sat right in the gap and overflowed, so the
   drawer stays in charge until the full bar genuinely fits. */
@media (max-width:899px){
  .nav__menu{display:none}
  .nav__burger{display:grid}
}