/*
Theme Name: Noha Studio
Theme URI: https://thenoha.com/
Author: The Noha Studio
Author URI: https://thenoha.com/
Description: The Noha Studio's own theme: full-bleed home slides, The Collection (grid and list, rooms, date sort) and one page per work (N° 001 onward) with its wall label, story and a View on Etsy button. Works are read from data/works.json; photos are found in the Media Library by file name. No page builder, no WooCommerce templates.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: noha-studio
*/

/* Layout: Zara Home calm. Full-bleed home slides with room tabs, a 4-up grid on one warm-grey ground,
   a three-zone product page (rail, images, sticky info). Museum details (N°, wall label) stay small. */
:root{
  color-scheme:light;
  --bg:#FFFFFF;          /* page */
  --ink:#1E1E1E;         /* text, black button */
  --ink-2:#6B655C;       /* artist lines, meta */
  --line:rgba(30,30,30,.15);
  --line-strong:#8E8E93; /* one rule above the buy block */
  --ground:#EFEEEC;      /* the single backdrop for every product shot */
  --rubric:#9B2D20;      /* only the product N° and the focus ring */
  --on-image:#FFFFFF;
  --stage:#2A2724;
  --veil:rgba(24,22,20,.42);
  --scrim:rgba(12,11,10,.52);
  --sans:"Fira Sans","Helvetica Neue",Arial,sans-serif;
  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --mark:"Cormorant Garamond","EB Garamond",Georgia,serif;
  --hdr-h:50px;
  --pad:16px;
  --ease:cubic-bezier(.25,.8,.25,1);
  --wpab:0px;            /* WordPress admin bar, only for logged-in users */
}
@media (min-width:768px){:root{--pad:20px}}
@media (min-width:1024px){:root{--hdr-h:100px;--pad:30px}}
body.admin-bar{--wpab:32px}
@media screen and (max-width:782px){body.admin-bar{--wpab:46px}}
@media screen and (max-width:600px){body.admin-bar{--wpab:0px}}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
body{margin:0;background:var(--bg);color:var(--ink);font:400 14px/1.45 var(--sans);letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
body.no-scroll{overflow:hidden}
img{display:block;max-width:100%;height:auto}
[hidden]{display:none!important}
p,h1,h2,h3,ul,ol,dl,dd,figure,fieldset,legend{margin:0}
ul,ol{padding:0;list-style:none}
fieldset{border:0;padding:0;min-width:0}
a{color:inherit}
button,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--rubric);outline-offset:2px}
main:focus{outline:0}
.vh,.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.num{font-variant-numeric:tabular-nums}
.caps{text-transform:uppercase;letter-spacing:.03em}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--ink);color:var(--bg);padding:10px 14px;
  font:500 12px/1 var(--sans);text-transform:uppercase;letter-spacing:.03em;text-decoration:none}
.skip:focus{top:calc(var(--wpab) + 10px)}

/* ---------- Header ---------- */
.hdr{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--wpab));z-index:60;height:var(--hdr-h);display:flex;align-items:center;gap:10px;
  padding:0 var(--pad) 0 max(2px,calc(var(--pad) - 12px));background:var(--bg);color:var(--ink);
  transition:background-color .35s var(--ease),color .35s var(--ease)}
.hdr.is-over{background:transparent;color:var(--on-image)}
.hdr.is-over.is-light{color:var(--ink)}
.hdr.menu-open,.hdr.menu-open.is-over{background:var(--bg);color:var(--ink)}
.menu-btn{flex:none;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;background:none;cursor:pointer}
.menu-btn svg{width:22px;height:22px;overflow:visible}
.menu-btn .x{display:none}
.menu-btn[aria-expanded="true"] .x{display:block}
.menu-btn[aria-expanded="true"] .bars{display:none}
.mark{font:400 16px/1 var(--mark);text-transform:uppercase;letter-spacing:.08em;text-decoration:none;white-space:nowrap}
@media (min-width:1024px){.mark{font-weight:300;font-size:31px;letter-spacing:.09em}}
.hdr__nav{display:none;margin-left:auto}
.hdr__nav ul{display:flex;align-items:center;gap:22px}
.hdr__nav a{display:inline-flex;align-items:center;min-height:40px;font:400 12px/1 var(--sans);text-transform:uppercase;
  letter-spacing:.03em;text-decoration:none;white-space:nowrap}
.hdr__nav a:hover,.hdr__nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.hdr__nav .etsy{margin-left:18px}
.hdr__shop,.hdr__etsy{display:inline-flex;align-items:center;min-height:40px;font:500 11px/1 var(--sans);
  text-transform:uppercase;letter-spacing:.03em;text-decoration:none;white-space:nowrap}
.hdr__shop{margin-left:auto}
.hdr__etsy{margin-left:16px}
@media (max-width:380px){.mark{font-size:14px;letter-spacing:.06em}.hdr__etsy{margin-left:12px}}
@media (min-width:1024px){.hdr__nav{display:block}.hdr__shop,.hdr__etsy{display:none}}

/* ---------- Menu drawer (slides in from the left) ---------- */
.veil{position:fixed;inset:0;z-index:54;background:var(--veil);opacity:0;transition:opacity .4s var(--ease)}
.veil.is-open{opacity:1}
.drawer{position:fixed;top:0;bottom:0;left:0;z-index:55;width:min(315px,88vw);overflow-y:auto;background:var(--bg);color:var(--ink);
  padding:110px 24px 40px 25px;transform:translateX(-100%);transition:transform .4s var(--ease)}
.drawer.is-open{transform:none}
.dl a,.dl button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:31px;padding:0;
  border:0;background:none;cursor:pointer;text-align:left;text-decoration:none;font:500 18px/24px var(--sans);
  text-transform:uppercase;letter-spacing:.01em}
.dl a:hover,.dl button:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.dl .chev{font-weight:300;font-size:20px}
.dl + .dl{margin-top:22px}
.dl--small a{font:400 12px/1.3 var(--sans);letter-spacing:.03em;min-height:30px}
.drawer__back{font:500 12px/1 var(--sans)!important;letter-spacing:.03em!important;margin-bottom:14px;min-height:34px!important;justify-content:flex-start!important}
.dl--sub a{font:400 12px/1.3 var(--sans);letter-spacing:.03em;min-height:32px;padding-left:14px}
.dl--sub a .n{color:var(--ink-2)}
.dl__mail{text-transform:none;letter-spacing:.01em;color:var(--ink-2)}

/* ---------- Home: full-bleed slides ---------- */
.stage{position:relative;overflow:hidden;margin-top:calc(-1 * var(--hdr-h));background:var(--stage);color:var(--on-image);
  height:calc(100vh - var(--wpab));height:calc(100svh - var(--wpab));min-height:520px;touch-action:pan-y pinch-zoom}
.stage.is-light{color:var(--ink)}
.slide{position:absolute;inset:0;transform:translateY(100%);transition:transform .4s var(--ease)}
.slide.is-before{transform:translateY(-100%)}
/* Phones: slides move sideways, the way the finger swipes */
@media (max-width:767px){.slide{transform:translateX(100%)}.slide.is-before{transform:translateX(-100%)}}
.slide.is-active{transform:none}
.slide__link{position:absolute;inset:0;display:block;color:inherit;text-decoration:none}
.slide__link:focus-visible{outline-offset:-6px}
.slide picture,.slide__link > img,.half img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide picture img{width:100%;height:100%;object-fit:cover}
.split{position:absolute;inset:0;display:flex}
.half{position:relative;flex:1 1 50%;min-width:0;overflow:hidden}
/* Portrait screens show one half per slide: the one marked .m (chosen so the whole blanket fits). */
@media (orientation:portrait){.split .half:not(.m){display:none}.split .half.m{flex-basis:100%}}
/* Phones: the photo keeps the full width of the blanket (fringe to fringe) and sits on the bottom of the slide;
   the wall colour of the photo (--wall) continues above it, with a soft fade. --mh = photo height, --mx = horizontal focus. */
@media (max-width:767px) and (orientation:portrait){
  .half.m{background:var(--wall,var(--stage))}
  .half.m:not(.half--gallery) > img{top:auto;height:min(100%,var(--mh,125vw));object-position:var(--mx,50%) 50%;
    -webkit-mask-image:linear-gradient(to bottom,transparent,#000 72px);mask-image:linear-gradient(to bottom,transparent,#000 72px)}
}
/* Sacred Art: the whole hanging, never cropped, clear of the header and the room names.
   The img box has the photo's own ratio, so the soft edge falls on the photo's border, and both halves share one grey. */
.half.half--gallery,#s5 .panel{background:#ECECEC}
.half.half--gallery > img{top:auto;bottom:96px;left:50%;right:auto;width:auto;max-width:none;
  height:calc(100% - var(--hdr-h) - 108px);aspect-ratio:1086/1262;transform:translateX(-50%);object-fit:cover;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 3%,#000 97%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 3%,#000 97%,transparent);
  mask-composite:intersect}
.sacred-m{display:none}
@media (orientation:portrait){
  .sacred-m{display:block;position:absolute;z-index:2;top:calc(var(--hdr-h) + 18px);left:var(--pad);right:64px;color:var(--ink)}
  .sacred-m__t{margin-top:6px;max-width:34ch;font-size:14px;line-height:1.5}
  .half.half--gallery > img{height:min(calc(100% - var(--hdr-h) - 190px),calc(110vw * 1.162))}
}
@media (max-width:767px){.half.half--gallery > img{bottom:76px}}
/* Phones: the room names are a row under the header, so the text on the slides starts below it. */
@media (max-width:767px) and (orientation:portrait){
  .sacred-m{top:calc(var(--hdr-h) + 54px);right:var(--pad)}
  .half.half--gallery > img{height:min(calc(100% - var(--hdr-h) - 226px),calc(110vw * 1.162))}
}
/* Phones, slides 2–4: the room's name sits in the wall band above the blanket.
   On shorter screens the photo gives up a little height (never its full width), so the blanket's top fringe
   (--bt = its height in the photo, 0–1) always lands below the name. Under 125vw the photo is cropped from the floor only. */
.room-t{display:none}
@media (max-width:767px) and (orientation:portrait){
  .room-t{display:block;position:absolute;z-index:2;top:calc(var(--hdr-h) + 52px);left:var(--pad);right:var(--pad);color:var(--on-image)}
  .room-t__h{font:italic 400 min(34px,9.2vw)/1.02 var(--serif);text-wrap:balance}
  .room-t .eyebrow{margin-top:6px}
  .room-t__go{border-bottom:1px solid currentColor;padding-bottom:1px}
  .half.m.has-t{--band:calc(var(--hdr-h) + 122px)}
  .half.m.has-t > img{object-position:var(--mx,50%) 0%;
    height:min(100%,var(--mh,125vw),max(calc((100% - var(--band)) / (1 - var(--bt,.15))),calc(100% - var(--band) + var(--bt,.15) * 125vw)))}
}
.slide--dark .slide__link::before,.slide--dark .slide__link::after{content:"";position:absolute;left:0;right:0;z-index:1;pointer-events:none}
.slide--dark .slide__link::before{top:0;height:220px;background:linear-gradient(to bottom,rgba(12,11,10,.6),rgba(12,11,10,.25) 55%,rgba(12,11,10,0))}
.slide--dark .slide__link::after{bottom:0;height:46%;background:linear-gradient(to top,var(--scrim),rgba(12,11,10,0))}
/* Slides that carry a line of text get a deeper fade under it, so small caps stay readable on busy weave. */
.slide--text .slide__link::after{height:64%;background:radial-gradient(ellipse 58% 75% at 0% 100%,rgba(12,11,10,.5),rgba(12,11,10,0) 72%),
  linear-gradient(to top,rgba(12,11,10,.68),rgba(12,11,10,.34) 45%,rgba(12,11,10,0))}
.cap{position:absolute;z-index:2;left:var(--pad);bottom:22px;max-width:calc(100% - 2 * var(--pad));
  font:400 11px/1.4 var(--sans);text-transform:uppercase;letter-spacing:.03em;text-wrap:balance}
.cap .circa{text-transform:none}
.nw{white-space:nowrap}
@media (min-width:1024px){.cap{bottom:28px}}
.slide__text{position:absolute;z-index:2;left:var(--pad);bottom:76px;right:var(--pad);pointer-events:none}
.slide__cta{pointer-events:auto;color:inherit;text-decoration:none}
@media (min-width:768px){.slide__text{bottom:calc(clamp(44px,7.5vh,76px) + 110px);right:auto;max-width:640px}}
.slide__sub{margin-top:12px;max-width:34ch;font-size:15px;line-height:1.5}
.eyebrow{font:500 11px/1.4 var(--sans);text-transform:uppercase;letter-spacing:.03em}
.slide__h{margin-top:10px;font:italic 400 clamp(46px,7.4vw,104px)/.98 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.slide__h--sm{font-size:clamp(34px,4.6vw,66px);line-height:1.04}
.slide__go{display:inline-block;margin-top:16px;font:500 12px/1.4 var(--sans);text-transform:uppercase;letter-spacing:.03em;
  border-bottom:1px solid currentColor;padding-bottom:2px}
.panel{position:absolute;inset:0;background:var(--ground);color:var(--ink);display:flex;flex-direction:column;justify-content:center;
  padding:40px clamp(28px,6vw,96px) 120px}
.panel__t{margin-top:14px;font:italic 400 clamp(28px,3vw,42px)/1.1 var(--serif);text-wrap:balance}
.panel p.l{margin-top:14px;font-size:14px;line-height:1.5}
.panel p.l + p.l{margin-top:2px;color:var(--ink-2)}
.panel hr{width:48px;border:0;border-top:1px solid var(--line-strong);margin:22px 0 18px}
.panel__note{max-width:38ch;font-size:15px;line-height:1.55}
.panel .slide__go{align-self:flex-start}

.tabs{position:absolute;z-index:4;left:50%;bottom:clamp(44px,7.5vh,76px);transform:translateX(-50%);display:flex;gap:30px;white-space:nowrap}
.tab{display:inline-grid;margin:0;padding:8px 0;border:0;background:none;cursor:pointer;color:inherit;
  font:300 15px/1.2 var(--sans);text-transform:uppercase;letter-spacing:.02em}
.tab > .t,.tab::after{grid-area:1/1}
.tab::after{content:attr(data-label);font-weight:600;visibility:hidden;height:0;overflow:hidden}
.tab[aria-selected="true"]{font-weight:600}
@media (max-width:1100px) and (min-width:768px){.tabs{gap:20px}.tab{font-size:13px}}
/* Phones: the room names sit in one row under the header and scroll sideways (the current one is underlined) */
@media (max-width:767px){
  .tabs{left:0;right:0;bottom:auto;top:calc(var(--hdr-h) + 2px);transform:none;gap:18px;padding:0 var(--pad);
    overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:none;padding:8px 0;font-size:12px;font-weight:400}
  .tab[aria-selected="true"]{font-weight:600;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
  .tab::after,.tab .opt{display:none}
}
/* Focus on photos: a white ring with a dark halo (the red ring is kept for white pages) */
.stage:not(.is-light) :focus-visible,.hdr.is-over:not(.is-light):not(.menu-open) :focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px rgba(12,11,10,.6)}
.stage:not(.is-light) .slide__link:focus-visible{outline-offset:-8px;box-shadow:inset 0 0 0 10px rgba(12,11,10,.5)}

/* ---------- Photo not uploaded yet: a calm ground, never a broken image ---------- */
.ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px;
  background:var(--ground);color:var(--ink-2);text-align:center;font:500 11px/1.4 var(--sans);text-transform:uppercase;letter-spacing:.03em}
.ph small{max-width:24ch;font:400 11px/1.4 var(--sans);text-transform:none;letter-spacing:0;color:var(--rubric)}

/* ---------- Collection ---------- */
.crumbs{padding:12px var(--pad) 0}
.toolbar{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--wpab) + var(--hdr-h));z-index:20;background:var(--bg);
  display:flex;align-items:center;gap:2px 24px;padding:0 var(--pad);border-bottom:.8px solid var(--line)}
@media (min-width:768px){.toolbar{justify-content:flex-end}}
.crumbs ol{display:flex;flex-wrap:wrap;font:400 11px/1.4 var(--sans);text-transform:uppercase;letter-spacing:.03em}
.crumbs li + li::before{content:"/";padding:0 7px;color:var(--ink-2)}
.crumbs a{text-decoration:none;color:var(--ink-2)}
.crumbs a:hover{text-decoration:underline;color:var(--ink)}
.crumbs [aria-current]{color:var(--ink)}
.controls{display:flex;flex-wrap:wrap;align-items:center;gap:0 18px;font:500 11px/1 var(--sans);text-transform:uppercase;letter-spacing:.03em}
.seg{display:inline-flex;align-items:center;gap:8px}
.seg span[aria-hidden]{color:var(--line-strong)}
.seg button{min-height:44px;padding:0;border:0;background:none;cursor:pointer;font-weight:400;color:var(--ink-2);text-transform:uppercase;letter-spacing:.03em}
.seg button[aria-pressed="true"]{font-weight:600;color:var(--ink)}
/* The visible text is a span; the real select lies over it, invisible, at 16px so iPhone does not zoom */
.sel{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding-right:14px;white-space:nowrap}
.sel__k{color:var(--ink-2);font-weight:400}
.sel select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px;border:0;-webkit-appearance:none;appearance:none}
.sel:has(select:focus-visible){outline:2px solid var(--rubric);outline-offset:2px}
.sel__v .l{display:none}
@media (min-width:768px){.sel__v .s{display:none}.sel__v .l{display:inline}}
.sel::after{content:"";position:absolute;right:2px;top:50%;width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-70%) rotate(45deg);pointer-events:none}
.intro{padding:14px var(--pad) 26px}
.intro p{max-width:560px;font-size:16px;line-height:1.56;color:var(--ink)}
.intro .count{margin-top:8px;font:400 11px/1.4 var(--sans);text-transform:uppercase;letter-spacing:.03em;color:var(--ink-2)}

.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:6px;row-gap:30px;padding-bottom:64px}
@media (min-width:768px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:14px;row-gap:40px;padding-inline:var(--pad)}}
@media (min-width:1100px){.grid{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:44px}}
@media (max-width:767px){.grid.is-single .card{grid-column:1/-1}}
.card{display:flex}
.card__link{flex:1;display:flex;flex-direction:column;min-width:0;text-decoration:none;color:inherit}
.card__media{position:relative;aspect-ratio:4/5;max-width:100%;overflow:hidden;background:var(--ground)}
.card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* N° 006 (her own photo) is framed a little wider: this lines its floor up with the other works */
.card[data-n="6"] .card__track > img:first-child{transform:scale(1.06);transform-origin:50% 0}
.card__alt{opacity:0;transition:opacity .25s var(--ease)}
@media (hover:hover){.card__link:hover .card__alt{opacity:1}}
.card__link:focus-visible .card__alt{opacity:1}
.card__more,.card__dots{display:none}
/* Touch screens have no hover: the card photo becomes slides (wall photo, her close-up, in a room, held up) that a
   finger swipes; a tap still opens the piece. Desktop keeps the hover cross-fade above. */
@media (hover:none),(pointer:coarse){
  .card__track{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;scrollbar-width:none}
  .card__track::-webkit-scrollbar{display:none}
  .card__track > img{position:relative;inset:auto;flex:0 0 100%;width:100%;height:100%;scroll-snap-align:start}
  .card__track > .card__alt{opacity:1;transition:none}
  .card__track > .card__more{display:block}
  /* quiet dots straight on the photo: the one in view stretches into a short dash */
  .card__dots{position:absolute;z-index:1;left:50%;bottom:10px;transform:translateX(-50%);display:flex;align-items:center;gap:5px;
    pointer-events:none}
  .card__dots i{width:4px;height:4px;border-radius:2px;background:#fff;opacity:.5;box-shadow:0 0 3px rgba(0,0,0,.2);
    transition:opacity .3s var(--ease),width .3s var(--ease)}
  .card__dots i.on{width:12px;opacity:.92}
}
/* Phones: the "Also in" strip already slides sideways, so its cards keep one photo (no swipe inside a swipe) */
@media (max-width:767px) and (hover:none),(max-width:767px) and (pointer:coarse){
  .strip .card__track{overflow:visible;overscroll-behavior:auto;scroll-snap-type:none}
  .strip .card__alt,.strip .card__more,.strip .card__dots{display:none}
}
.card__link:focus-visible{outline-offset:3px}
/* Caption: N° on its own line; the price sits on the card's bottom so prices line up across a row */
.card__cap{flex:1;display:flex;flex-direction:column;gap:3px;padding:11px 16px 0}
@media (min-width:768px){.card__cap{padding-inline:0}}
.card__no{font:500 11px/1.3 var(--sans);letter-spacing:.06em;color:var(--ink-2);font-variant-numeric:tabular-nums}
.card__name{font:400 12px/1.35 var(--sans);text-transform:uppercase;letter-spacing:.03em;text-wrap:balance}
.card__artist{font:400 12px/1.35 var(--sans);color:var(--ink-2)}
.card__price{margin-top:auto;padding-top:8px;font:500 12px/1.3 var(--sans)}
.card__kind{font-weight:400;color:var(--ink-2)}
@media (min-width:1100px){.card__name,.card__price{font-size:14px}.card__artist{font-size:13px}}
.card__link:hover .card__name{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

.list{margin:0 var(--pad) 64px;border-top:1px solid var(--ink)}
.row a{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:12px;row-gap:2px;padding:14px 0 15px;
  border-bottom:1px solid var(--line);text-decoration:none;align-items:baseline}
.row__no{grid-row:1/5;font:500 11px/1.6 var(--sans);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.row__title{font:italic 400 19px/1.25 var(--serif)}
.row__maker{color:var(--ink-2);font-size:13px}
.row__room,.row__price{font:400 11px/1.5 var(--sans);text-transform:uppercase;letter-spacing:.03em;color:var(--ink-2)}
/* phones: the price is the row's last line; from 900px it is the last column */
.row__price{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.row a:hover .row__title{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
@media (min-width:900px){
  .row a{grid-template-columns:84px minmax(0,1.4fr) minmax(0,1.3fr) minmax(0,.9fr) 90px;column-gap:20px;padding:15px 0}
  .row__no{grid-row:auto}
  .row__price{display:block;text-align:right;color:var(--ink);font-weight:500}
}

/* ---------- Product page ---------- */
.pdp{padding-bottom:48px}
.pdp__gallery{position:relative}
.pdp__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;scroll-margin-top:calc(var(--wpab) + var(--hdr-h))}
.pdp__track::-webkit-scrollbar{display:none}
.pdp__fig{position:relative;flex:0 0 100%;aspect-ratio:4/5;max-width:100%;background:var(--ground);scroll-snap-align:start;overflow:hidden}
.pdp__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s var(--ease)}
/* Gentle zoom: at most 1.25×, never past the photo's own pixels, no full-screen viewer */
.pdp__fig.can-zoom{cursor:zoom-in}
.pdp__fig.is-zoom{cursor:zoom-out}
.pdp__fig.is-zoom img{transform:scale(var(--z,1.2))}
@media (prefers-reduced-motion:reduce){.pdp__fig img{transition:none}}
/* the size guide is a drawing on white: shown whole on phones, below the close button */
.pdp__fig--guide{background:#fff}
@media (max-width:1023px){.pdp__fig--guide img{object-fit:contain;padding-top:64px}}
.round{position:absolute;z-index:2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.72);color:var(--ink);text-decoration:none;border:0}
.pdp__close{top:12px;left:12px}
.pdp__close svg{width:14px;height:14px}
.pdp__count{position:absolute;z-index:2;right:12px;bottom:12px;padding:5px 9px;background:rgba(255,255,255,.72);
  font:500 11px/1 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:.03em}
.pdp__rail{display:none}
.pdp__info{padding:18px var(--pad) 0;min-width:0}
@media (min-width:1024px){
  .pdp{display:grid;grid-template-columns:65px minmax(0,1.05fr) minmax(340px,1fr);column-gap:16px;align-items:start;
    max-width:1320px;margin-inline:auto;padding:0 var(--pad) 72px 35px}
  .also{max-width:1320px;margin-inline:auto}
  .lc{display:none}
  .pdp__rail{display:flex;flex-direction:column;gap:8px;position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--wpab) + var(--hdr-h) + 24px)}
  .thumb{display:block;width:65px;height:81px;padding:0;border:.8px solid #D1D1D6;background:var(--ground);cursor:pointer;opacity:.5;
    transition:opacity .25s var(--ease)}
  .thumb img{width:100%;height:100%;object-fit:cover}
  .thumb[aria-current="true"]{opacity:1;border-color:var(--ink)}
  .thumb:hover{opacity:1}
  .pdp__track{flex-direction:column;gap:6px;overflow:visible;scroll-snap-type:none}
  .pdp__fig{flex:none;scroll-margin-top:calc(var(--wpab) + var(--hdr-h))}
  .pdp__close,.pdp__count{display:none}
  .pdp__info{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--wpab) + var(--hdr-h) + 24px);padding:2px 0 0 28px;max-width:568px}
}
.pcrumbs ol{display:flex;flex-wrap:wrap;font:400 11px/1.4 var(--sans);text-transform:uppercase;letter-spacing:.03em;color:var(--ink-2)}
.pcrumbs li + li::before{content:"/";padding:0 7px}
.pcrumbs a{text-decoration:none}
.pcrumbs a:hover{text-decoration:underline;color:var(--ink)}
.p-no{margin-top:18px;color:var(--rubric);font:500 12px/1 var(--sans);letter-spacing:.08em;font-variant-numeric:tabular-nums}
.p-title{margin-top:10px;font:600 16px/1.2 var(--sans);text-transform:uppercase;letter-spacing:.02em;text-wrap:balance}
@media (min-width:1024px){.p-title{font-size:22px;line-height:24px}}
.p-price{margin-top:12px;font:600 17px/1.2 var(--sans);font-variant-numeric:tabular-nums}
@media (min-width:1024px){.p-price{font-size:19px}}
.p-meta{margin-top:12px;font:400 11px/1.45 var(--sans);text-transform:uppercase;letter-spacing:.03em;color:var(--ink-2)}
.wl{margin-top:20px;max-width:360px;padding:16px;border:.8px solid var(--line)}
.wl__t{font:italic 400 20px/26px var(--serif)}
.wl p.f{font-size:13px;line-height:20px}
.wl p.f.ink2{color:var(--ink-2)}
.wl__t + p.f{margin-top:6px}
.wl hr{border:0;border-top:.8px solid var(--line);margin:12px 0}
.wl__lc{font-size:12px;line-height:18px}
.wl__lc b{font-weight:600;text-transform:uppercase;letter-spacing:.03em;margin-right:2px}
.hook{margin-top:20px;font-size:16px;line-height:25px;max-width:540px}
.hook + .hook{margin-top:10px}
.more{display:inline-block;margin-top:10px;font-size:13px;text-underline-offset:3px;text-decoration-thickness:1px}
.buy{margin-top:24px;border-top:.8px solid var(--line-strong);padding-top:6px}
/* Sizes: a plain reference list (the size is chosen on Etsy), with what each size is for */
.sizes__h{padding:10px 0 6px;font:500 11px/1 var(--sans);text-transform:uppercase;letter-spacing:.03em;color:var(--ink-2)}
.size{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;min-height:48px;padding:6px 0;
  border-bottom:.8px solid var(--line)}
.size:first-child{border-top:.8px solid var(--line)}
.size .nm{grid-column:1;grid-row:1;font:500 13px/1.3 var(--sans);text-transform:uppercase;letter-spacing:.03em}
.size .dm{grid-column:1;grid-row:2;min-width:0;font-size:12px;line-height:1.4;color:var(--ink-2);font-variant-numeric:tabular-nums}
.size .us{display:block}
.size .us .sep{display:none}
.size .pr{grid-column:2;grid-row:1 / span 2;font:500 14px/1 var(--sans);font-variant-numeric:tabular-nums}
@media (min-width:560px){
  .size{grid-template-columns:130px minmax(0,1fr) auto;min-height:40px}
  .size .dm{grid-column:2;grid-row:1}
  .size .us,.size .us .sep{display:inline}
  .size .pr{grid-column:3;grid-row:1}
  /* Kali: the longer size names ("Classic Wall Hanging") keep to one line */
  .sizes--wall .size{grid-template-columns:186px minmax(0,1fr) auto}
}
/* Sacred works: one plain line above the button */
.respect{margin-top:14px;font-size:13px;line-height:1.5;text-wrap:pretty}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;margin-top:16px;padding:0 16px;
  background:var(--ink);color:var(--bg);border:1px solid var(--ink);text-decoration:none;
  font:600 12px/1 var(--sans);text-transform:uppercase;letter-spacing:.04em;transition:background-color .4s var(--ease),color .4s var(--ease)}
.btn:hover{background:var(--bg);color:var(--ink)}
.note{margin-top:10px;font-size:11px;line-height:1.5;color:var(--ink-2)}
/* Etsy proof: one quiet link to the shop's reviews (no typed-in numbers that can go stale) */
.proof{margin-top:10px;font:400 12px/1.45 var(--sans);color:var(--ink-2);font-variant-numeric:tabular-nums}
.proof .star{color:var(--ink)}
.proof a{color:var(--ink);text-underline-offset:3px;text-decoration-thickness:1px;white-space:nowrap}
.proof + .note{margin-top:6px}
/* no single word left alone on the last line of running text */
.note,.hook,.intro p,.acc__body p,.lc__cap,.panel__note,.sacred-m__t,.slide__sub,.ftr__made,.ftr__legal,.pg p,.st__sf{text-wrap:pretty}
.accs{margin-top:22px;border-top:.8px solid var(--line)}
.acc{border-bottom:.8px solid var(--line);scroll-margin-top:calc(var(--wpab) + var(--hdr-h) + 24px)}
.acc summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:46px;cursor:pointer;list-style:none;
  font:500 12px/1.3 var(--sans);text-transform:uppercase;letter-spacing:.03em}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font:300 18px/1 var(--sans)}
.acc[open] summary::after{content:"\2212"}
.acc__body{padding:2px 0 20px;font-size:14px;line-height:1.55}
.acc__body p + p{margin-top:10px}
.acc__body .bul + p{margin-top:14px}
/* a line from the source, set off from the story */
.pq{margin:14px 0 0;padding-left:14px;border-left:.8px solid var(--line-strong)}
.pq__q{font:italic 400 17px/1.4 var(--serif)}
.acc__body .pq p + p{margin-top:4px}
.pq__c{font-size:12px;line-height:1.5;color:var(--ink-2)}
.acc__body .pq + p{margin-top:14px}
.facts{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px 12px;margin-bottom:14px}
.facts dt{font:400 11px/1.6 var(--sans);text-transform:uppercase;letter-spacing:.03em;color:var(--ink-2)}
.facts dd{font-size:14px;line-height:1.5}
.ital{font-style:italic;font-family:var(--serif);font-size:16px}
.bul li{position:relative;padding-left:14px}
.bul li + li{margin-top:6px}
.bul li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:1px;background:var(--ink-2)}
.care li{font:400 12px/1.5 var(--sans);text-transform:uppercase;letter-spacing:.03em}
.care li + li{margin-top:6px}
.small{font-size:12px;color:var(--ink-2)}
.lc{margin-top:30px}
.sec-h{font:500 14px/1.2 var(--sans);text-transform:uppercase;letter-spacing:.03em}
.lc__row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;margin-top:14px;align-items:start}
.lc__img{position:relative;display:block;width:150px;aspect-ratio:4/5;max-width:100%;background:var(--ground);border:0;padding:0;cursor:pointer;overflow:hidden}
.lc__img img{width:100%;height:100%;object-fit:cover}
.lc__cap{font-size:13px;line-height:1.5}
.lc__cap .small{display:block;margin-top:6px}

.also{padding:8px 0 56px}
.also .sec-h{padding:0 var(--pad) 14px}
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:44%;gap:4px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-inline:0;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip > li{scroll-snap-align:start;min-width:0}
@media (min-width:768px){.strip{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;padding-inline:var(--pad)}}
.all-tile{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;text-align:center;padding:16px;
  font:500 12px/1.4 var(--sans);text-transform:uppercase;letter-spacing:.03em}
.all-tile .big{font:italic 400 28px/1.1 var(--serif);text-transform:none;letter-spacing:0;text-wrap:balance}
/* the tile continues the gallery wall and floor of the photos beside it */
.strip .all-tile{background:linear-gradient(to bottom,#E6E6E6,#EEEEEE 25%,#F2F2F2 50%,#EFEFEF 75%,#E8E8E8 94.4%,#AEAAA2 0,#BAB7B2 97%,#C0BDB8)}
.story-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-start;gap:6px 20px;margin:36px var(--pad) 0;
  padding:18px 0;border-block:.8px solid var(--line);text-decoration:none}
.story-row .eyebrow{color:var(--ink-2)}
.story-row .t{font:italic 400 22px/1.25 var(--serif)}
.story-row:hover .t{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.credit{margin:16px var(--pad) 0;font-size:11px;line-height:1.5;color:var(--ink-2)}

/* ---------- Home, below the slides: the collection rail, the rooms, good to know ----------
   Three calm parts on the white page, no autoplay. Every photo here is lazy; the hero stays the only early image.
   This block comes after the card and .strip rules on purpose: .strip--rail .card__more{display:none} ties on
   specificity with .card__track > .card__more{display:block} and wins by coming later. */
.hs{padding-top:52px;scroll-margin-top:calc(var(--wpab) + var(--hdr-h))}
@media (min-width:1024px){.hs{padding-top:88px}}
.hs__head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 20px;padding:0 var(--pad) 18px}
@media (min-width:1024px){.hs__head{padding-bottom:24px}}
.hs__titles{min-width:0}
.hs__eyebrow{color:var(--ink-2)}
.hs__h{margin-top:6px;font:italic 400 clamp(30px,3.8vw,50px)/1.04 var(--serif);letter-spacing:-.01em;text-wrap:balance}
/* two round buttons from 768px, and at any width for a mouse; noha.js shows them only when the rail can move */
.hs__nav{display:none;flex:none;gap:8px}
@media (min-width:768px),(hover:hover) and (pointer:fine){.hs__nav{display:flex}}
.hs__arrow{display:grid;place-items:center;width:44px;height:44px;padding:0;border:.8px solid var(--line);border-radius:50%;
  background:var(--bg);color:var(--ink);cursor:pointer;transition:border-color .2s var(--ease),opacity .2s var(--ease)}
.hs__arrow:hover{border-color:var(--ink)}
.hs__arrow[aria-disabled="true"]{opacity:.3;cursor:default;border-color:var(--line)}
.hs__arrow .ar{width:14px;height:14px;stroke-width:1.2}
.hs__arrow[aria-disabled="true"] .ar{transform:none}
/* The rail is the product page's "Also in" strip, kept sliding at every width.
   Phones: the strip as it is (44% cards, edge to edge, snap). From 768px: 3.3, 4.3, then 5.3 cards in view,
   so the cut-off card says "there is more". (100% is the content box: the side padding is already out of it.) */
.strip--rail{overscroll-behavior-x:contain}
@media (min-width:768px){
  .strip.strip--rail{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:calc((100% - 3 * 14px) / 3.3);gap:14px;
    overflow-x:auto;overflow-y:hidden;scroll-padding-inline:var(--pad)}
}
@media (min-width:1024px){.strip.strip--rail{grid-auto-columns:calc((100% - 4 * 14px) / 4.3)}}
@media (min-width:1600px){.strip.strip--rail{grid-auto-columns:calc((100% - 5 * 14px) / 5.3)}}
/* mouse and trackpad: a softer snap, so a trackpad never feels sticky (the arrows land on a card edge anyway) */
@media (hover:hover) and (pointer:fine){.strip.strip--rail{scroll-snap-type:x proximity}}
/* Touch screens of every width: the rail already slides, so its cards keep one photo (no swipe inside a swipe).
   The "Also in" rule covers phones only, because that strip turns into a still grid from 768px; the rail does not. */
@media (hover:none),(pointer:coarse){
  .strip--rail .card__track{overflow:visible;overscroll-behavior:auto;scroll-snap-type:none}
  .strip--rail .card__alt,.strip--rail .card__more,.strip--rail .card__dots{display:none}
}
/* the rail clips anything outside it, so the focus ring sits just inside the card, drawn above the photo
   (an inset outline would be painted under the positioned photo in Chrome and Safari) */
.strip--rail .card__link{position:relative}
.strip--rail .card__link:focus-visible{outline:0}
.strip--rail .card__link:focus-visible::after{content:"";position:absolute;inset:0;z-index:2;border:2px solid var(--rubric);pointer-events:none}
/* "New": one quiet word after the N°, for 30 days after a work is added (grid, strip and rail alike) */
.card__new{color:var(--ink);text-transform:uppercase}
/* under the rail: where you are (a 1px line; noha.js sets --w = share in view, --p = 0 to 1) and the way to the shop */
.hs__foot{display:flex;align-items:center;gap:20px;padding:12px var(--pad) 0}
.hs__bar{position:relative;flex:1;max-width:480px;height:1px;background:var(--line)}
.hs__bar i{position:absolute;top:0;bottom:0;left:calc((100% - var(--w,.3) * 100%) * var(--p,0));width:calc(var(--w,.3) * 100%);background:var(--ink)}
.hs__all{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-left:auto;font:500 12px/1.4 var(--sans);
  text-transform:uppercase;letter-spacing:.03em;text-decoration:none;white-space:nowrap}
.hs__all span{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* Walk through the rooms: one photo per room, in a home. 2 x 2 on phones (edge to edge, like the shop grid),
   one row of four from 768px. No zoom on hover (only short fades); the name underlines, as on the cards. */
.rooms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:6px;row-gap:26px}
@media (min-width:768px){.rooms{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:14px;padding-inline:var(--pad)}}
.rooms__link{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.rooms__link:focus-visible{outline-offset:3px}
.rooms__media{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--ground)}
.rooms__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rooms__name{display:block;padding:12px 16px 0;font:italic 400 clamp(20px,2vw,26px)/1.12 var(--serif);text-wrap:balance}
.rooms__n{display:block;padding:4px 16px 0;font:400 11px/1.4 var(--sans);text-transform:uppercase;letter-spacing:.03em;color:var(--ink-2)}
@media (min-width:768px){.rooms__name,.rooms__n{padding-inline:0}}
.rooms__link:hover .rooms__name{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* From the journal: the latest three posts (front-page.php prints the section only when one is published).
   One column on phones (photo edge to edge, text inset, like the rooms), three from 768px. A 4:3 photo, the date,
   the title in the serif and one line of excerpt. "All stories" sits in the head, where the rail has its arrows. */
.jcards{display:grid;grid-template-columns:minmax(0,1fr);row-gap:30px}
@media (min-width:768px){.jcards{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:14px;padding-inline:var(--pad)}}
.jc__link{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.jc__link:focus-visible{outline-offset:3px}
.jc__media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--ground)}
.jc__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.jc__date{display:block;padding:12px 16px 0;color:var(--ink-2)}
.jc__t{padding:6px 16px 0;font:italic 400 clamp(22px,2.2vw,28px)/1.15 var(--serif);text-wrap:balance}
.jc__sf{padding:6px 16px 0;font-size:14px;line-height:1.5;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:768px){.jc__date,.jc__t,.jc__sf{padding-inline:0}}
.jc__link:hover .jc__t{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* Good to know: four plain facts and the Etsy reviews link, just above the footer (no photos).
   The hairline sits on the inner box, so with the footer's own border the page ends in two ruled lines. */
.know{padding:56px var(--pad) 64px}
@media (min-width:1024px){.know{padding:88px var(--pad)}}
.know__in{padding-top:22px;border-top:.8px solid var(--line)}
.know__h{color:var(--ink-2)}
.know__lead{margin-top:10px;max-width:40ch;font:italic 400 clamp(22px,2.4vw,30px)/1.25 var(--serif);text-wrap:balance}
.know__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px;margin-top:26px}
@media (min-width:768px){.know__list{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}}
.know__list dt{font:500 11px/1.4 var(--sans);text-transform:uppercase;letter-spacing:.03em}
.know__list dd{margin-top:4px;font-size:13px;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.know__list a{color:var(--ink);text-underline-offset:3px;text-decoration-thickness:1px;white-space:nowrap}
.know .proof{margin-top:26px}

/* ---------- Text pages: About, Care & Shipping, FAQ, Returns, Contact, Privacy, 404 ---------- */
.pg{padding:14px var(--pad) 80px}
.pg__in{max-width:680px;margin:0 auto}
.pg .crumbs{padding:0 0 26px}
.pg h1,.pg__h{font:italic 400 clamp(36px,5vw,56px)/1.04 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.pg .lead{margin-top:18px;font-size:18px;line-height:1.55}
/* About: one woven detail under the opening line. Phones show the whole 4:5 photo; from 768px a wider
   crop that keeps the eye (it sits low in the photo). */
.pg__fig{margin:30px 0 4px}
.pg__fig img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 80%;background:var(--ground)}
@media (min-width:768px){.pg__fig img{aspect-ratio:4/3}}
.pg__fig figcaption{margin-top:8px;font:400 11px/1.4 var(--sans);text-transform:uppercase;letter-spacing:.03em;color:var(--ink-2)}
.pg__fig .circa{text-transform:none}
.pg h2{margin-top:40px;padding-top:14px;border-top:.8px solid var(--line);font:500 12px/1.3 var(--sans);text-transform:uppercase;letter-spacing:.03em}
.pg p{margin-top:12px;font-size:16px;line-height:1.6}
.pg h2 + p{margin-top:10px}
.pg ul.bul{margin-top:12px;font-size:16px;line-height:1.6}
.pg a{text-underline-offset:3px;text-decoration-thickness:1px}
.pg .sizes{margin-top:14px}
.pg .size:first-child{border-top:0}
.pg .accs{margin-top:28px}
.pg .acc summary{min-height:52px;font-size:13px}
.pg .acc__body p{margin-top:0;font-size:15px}
.pg .acc__body p + p{margin-top:10px}
.pg .sig{margin-top:18px;font:italic 400 20px/1.3 var(--serif)}
.pg .go{display:inline-block;margin-top:28px;font:500 12px/1.4 var(--sans);text-transform:uppercase;letter-spacing:.03em;text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:2px}
.pg .links{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:28px;font:500 12px/1.4 var(--sans);text-transform:uppercase;letter-spacing:.03em}
.pg .links a{text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.contact{margin-top:26px;border-top:.8px solid var(--line)}
.contact li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;padding:14px 0;border-bottom:.8px solid var(--line);align-items:baseline}
.contact .k{font:400 11px/1.6 var(--sans);text-transform:uppercase;letter-spacing:.03em;color:var(--ink-2)}
.contact .v{font-size:16px;overflow-wrap:anywhere}
.entry > * + *{margin-top:1em}
.entry ul,.entry ol{padding-left:1.2em;list-style:revert}
.pg--404{padding-top:80px;padding-bottom:120px}
.pg--404 .eyebrow{color:var(--ink-2)}
.pg--404 h1{margin-top:12px}

.pg .eyebrow{font-size:11px;line-height:1.4}
.pg p.small{font-size:13px;line-height:1.5;color:var(--ink-2)}

/* ---------- Stories ---------- */
.stories{margin-top:30px;border-top:.8px solid var(--line)}
.st a{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;padding:20px 0;border-bottom:.8px solid var(--line);text-decoration:none;align-items:start}
@media (min-width:768px){.st a{grid-template-columns:160px minmax(0,1fr);gap:24px}}
.st__img{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--ground)}
.st__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.st__img .ph{font-size:10px}
.pg .st .eyebrow{margin-top:0;color:var(--ink-2)}
.pg .st__t{margin-top:8px;padding-top:0;border-top:0;font:italic 400 clamp(22px,2.6vw,30px)/1.15 var(--serif);text-transform:none;letter-spacing:0;text-wrap:balance}
.pg .st__sf{margin-top:8px;font-size:15px;line-height:1.5}
.st__go{display:inline-block;margin-top:10px;font:500 11px/1.4 var(--sans);text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid currentColor}
.st a:hover .st__t{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
/* With journal posts the page has two groups, "Journal" and "From the collection": small headings without
   the text pages' rule above them (each list already starts with one). */
.pg .st-h{padding-top:0;border-top:0}
.pg .st-h + .stories{margin-top:14px}

/* ---------- Journal article (single.php): one WordPress post ----------
   The text pages' column (.pg__in, 680px) and serif h1. The body reads at 16px on phones and 17px from 768px,
   line height 1.65. Paintings are never cropped: at most 85% of the screen tall, left-aligned with their caption
   (11px capitals, as the About figure). 16:9 videos fill the column, and reach a little wider from 1024px.
   The .pg h2 / .pg p rules of the text pages are overridden inside .jn__body only. */
.jn__main{padding-bottom:0}
/* a long title stays on one line in the breadcrumb */
.jn .crumbs li[aria-current]{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg .jn__meta{margin-top:0;color:var(--ink-2)}
.jn__head h1{margin-top:10px}
.jn__fig{margin-top:30px}
.jn__fig img,.jn__body img{height:auto;max-height:85vh;object-fit:contain;object-position:0 50%}
.pg .jn__fig figcaption,.pg .jn__body figcaption{margin:8px 0 0;font:400 11px/1.45 var(--sans);text-transform:uppercase;letter-spacing:.03em;
  color:var(--ink-2);text-align:left;text-wrap:pretty}
/* a long word or a pasted source address breaks inside the column instead of running off a phone screen */
.jn__body{margin-top:34px;font-size:16px;line-height:1.65;overflow-wrap:break-word}
@media (min-width:768px){.jn__body{font-size:17px}}
.pg .jn__body p{font-size:inherit;line-height:inherit}
.pg .jn__body > * + *{margin-top:1.15em}
.jn__body figure,.jn__body .wp-block-image,.jn__body .wp-block-embed{margin-bottom:0}
/* more air around figures (:where keeps this below the heading rules, so a heading after a figure keeps its own space) */
.pg .jn__body > :where(figure,.wp-block-image,.wp-block-embed),.pg .jn__body > :where(figure,.wp-block-image,.wp-block-embed) + *{margin-top:2em}
.pg .jn__body h2{margin-top:46px;padding-top:0;border-top:0;font:italic 400 clamp(25px,2.6vw,31px)/1.2 var(--serif);
  text-transform:none;letter-spacing:-.005em;text-wrap:balance}
.pg .jn__body h3{margin-top:34px;font:500 13px/1.4 var(--sans);text-transform:uppercase;letter-spacing:.03em}
.pg .jn__body h2 + *{margin-top:12px}
.pg .jn__body h3 + *{margin-top:8px}
.pg .jn__body > :first-child{margin-top:0}
.jn__body ul,.jn__body ol{padding-left:1.25em}
.jn__body ul{list-style:disc}
.jn__body ol{list-style:decimal}
.jn__body li + li{margin-top:.4em}
.jn__body li::marker{color:var(--ink-2)}
.jn__body a{text-decoration-color:var(--line-strong);transition:text-decoration-color .2s var(--ease)}
.jn__body a:hover{text-decoration-color:currentColor}
/* .pg in front, so the even space above and below wins over the 1.15em between blocks */
.pg .jn__body hr{height:0;border:0;border-top:.8px solid var(--line);margin-block:2.2em}
/* the base reset covers h1-h3 only: no browser bottom margin on the rarer blocks either */
.jn__body h4,.jn__body h5,.jn__body h6,.jn__body pre{margin-bottom:0}
/* quotes as the work page's line from the source (.pq): a hairline on the left, the words in the serif */
.jn__body blockquote{margin-inline:0;margin-bottom:0;padding:0 0 0 16px;border:0;border-left:.8px solid var(--line-strong)}
.pg .jn__body blockquote p{margin-top:0;font:italic 400 19px/1.45 var(--serif)}
@media (min-width:768px){.pg .jn__body blockquote p{font-size:21px}}
.pg .jn__body blockquote p + p{margin-top:.5em}
.jn__body cite{display:block;margin-top:8px;font:400 12px/1.5 var(--sans);font-style:normal;color:var(--ink-2)}
.jn__body .wp-block-pullquote{margin-inline:0;padding:0;border:0;text-align:left;font-size:inherit;line-height:inherit}
/* videos: 16:9 at the column's width, with or without WordPress's block styles */
.jn__body .wp-block-embed{margin-inline:0}
.jn__body .wp-block-embed__wrapper{position:relative}
.jn__body .wp-block-embed.is-type-video .wp-block-embed__wrapper{aspect-ratio:16/9;background:var(--stage)}
.jn__body .wp-block-embed.is-type-video .wp-block-embed__wrapper::before{content:none}
.jn__body .wp-block-embed.is-type-video iframe{position:absolute;inset:0;width:100%;height:100%}
.jn__body iframe{display:block;max-width:100%;border:0}
.jn__body > iframe,.jn__body p > iframe{width:100%;height:auto;aspect-ratio:16/9}
@media (min-width:1024px){.pg .jn__body > .wp-block-embed.is-type-video{margin-inline:-90px}}
/* WordPress image alignment: floats beside the text from 600px, full width on phones */
.jn__body .aligncenter{margin-inline:auto}
.jn__body .alignleft,.jn__body .alignright{max-width:50%}
.jn__body .alignleft{float:left;margin:.35em 24px 14px 0}
.jn__body .alignright{float:right;margin:.35em 0 14px 24px}
@media (max-width:599px){.jn__body .alignleft,.jn__body .alignright{float:none;max-width:100%;margin:0}}
.jn__body::after{content:"";display:block;clear:both}
.pg .jn__body h2,.pg .jn__body h3,.jn__body .wp-block-embed,.jn__body hr{clear:both}
.jn__pages{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:28px;font:500 12px/1.4 var(--sans);text-transform:uppercase;letter-spacing:.03em}
.jn__pages a{text-underline-offset:3px;text-decoration-thickness:1px}
/* the end: the works named in the post (the product page's strip), or one link to the collection, then Stories */
.jn__also{margin-top:56px}
.jn__end{padding-top:0}
.pg .jn__more{margin-top:48px;padding-top:2px;border-top:.8px solid var(--line)}
.pg .jn__more .go{margin-top:18px}
.pg .jn__back{margin-top:40px;font:500 11px/1.4 var(--sans);text-transform:uppercase;letter-spacing:.03em}
.jn__also + .jn__end .jn__back{margin-top:0}
.jn__back a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2);text-decoration:none}
.jn__back a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.jn__back a:hover .ar--back{transform:translateX(-2px)}

/* ---------- Footer (centred, as on Zara Home) ---------- */
.ftr{padding:72px var(--pad) 40px;text-align:center;border-top:.8px solid var(--line)}
.ftr .mark{font-size:22px;font-weight:300}
.ftr__tag{margin-top:16px;font:italic 400 20px/1.2 var(--serif)}
.ftr__ig{margin-top:10px;font-size:13px;color:var(--ink-2)}
.ftr__ig a{color:var(--ink);text-underline-offset:3px;white-space:nowrap}
.ftr__cols{display:grid;grid-template-columns:1fr;gap:28px;justify-content:center;margin:44px auto 0;max-width:720px}
@media (min-width:640px){.ftr__cols{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ftr h2{font:600 12px/1.3 var(--sans);text-transform:uppercase;letter-spacing:.03em;text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px;margin-bottom:10px}
.ftr li a{display:inline-flex;align-items:center;min-height:30px;font:400 11px/1.3 var(--sans);text-transform:uppercase;letter-spacing:.03em;
  text-decoration:none}
.ftr li a:hover{text-decoration:underline;text-underline-offset:3px}
.ftr__made{margin:44px auto 0;max-width:46ch;font-size:13px;line-height:1.55}
.ftr__contact{margin-top:10px;font-size:13px;line-height:1.55}
.ftr__contact a{color:var(--ink);text-underline-offset:3px;text-decoration-thickness:1px;white-space:nowrap}
.ftr__region{margin-top:14px;font:500 11px/1.4 var(--sans);text-transform:uppercase;letter-spacing:.03em}
.ftr__region a{text-decoration:none}
.ftr__region a:hover{text-decoration:underline}
.ftr__legal{margin:26px auto 0;max-width:62ch;font-size:11px;line-height:1.6;color:var(--ink-2)}

/* ---------- Phone buy bar (product page) ---------- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:center;gap:16px;
  padding:8px var(--pad) calc(8px + env(safe-area-inset-bottom,0px));background:var(--bg);border-top:.8px solid var(--line);
  font:600 15px/1 var(--sans);white-space:nowrap}
.buybar .btn{margin:0;flex:1}
@media (min-width:1024px){.buybar{display:none!important}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:0s!important;transition-delay:0s!important;animation:none!important}
}

/* ---------- Cookie consent ---------- */
/* One calm bar at the foot of the screen (inc/consent.php, assets/js/consent.js): one sentence and two
   identical buttons, so Reject is as easy as Accept. Fixed, so nothing on the page moves when it shows.
   On a work page consent.js lifts it above the phone buy bar (.is-lifted: the bar already pads the safe area). */
.cc{position:fixed;left:0;right:0;bottom:0;z-index:52;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 28px;
  padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom,0px));background:var(--bg);color:var(--ink);border-top:.8px solid var(--line);
  font:400 13px/1.45 var(--sans)}
.cc.is-lifted{padding-bottom:12px}
.cc:focus{outline:0}
.cc:focus-visible{outline:2px solid var(--rubric);outline-offset:-4px}
.cc__t{max-width:62ch;text-wrap:pretty}
.cc__t a{text-underline-offset:3px;text-decoration-thickness:1px;white-space:nowrap}
.cc__now{margin-left:.5em;color:var(--ink-2)}
.cc__b{display:flex;gap:8px}
.cc__btn{min-width:120px;min-height:44px;padding:0 18px;border:1px solid var(--ink);background:var(--bg);color:var(--ink);cursor:pointer;
  font:500 12px/1 var(--sans);text-transform:uppercase;letter-spacing:.04em;transition:background-color .3s var(--ease),color .3s var(--ease)}
.cc__btn:hover{background:var(--ink);color:var(--bg)}
@media (max-width:599px){.cc{gap:10px}.cc__t,.cc__b{flex:1 1 100%}.cc__btn{flex:1 1 0;min-width:0}}
/* the policy's Cookies heading (reached from "Cookie settings" without JavaScript) clears the sticky header */
#cookies{scroll-margin-top:calc(var(--wpab) + var(--hdr-h) + 16px)}

/* Line arrows (inc/helpers.php noha_arrow): drawn in the text colour at the weight of the type, so
   phones never swap them for colour emoji. A small nudge on hover shows where the link goes. */
.ar{display:inline-block;flex:none;width:.86em;height:.86em;vertical-align:-.08em;fill:none;stroke:currentColor;
  stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
a:hover .ar--right,a:focus-visible .ar--right,a:hover .ar--out,a:focus-visible .ar--out,button:hover .ar--next{transform:translateX(2px)}
a:hover .ar--out,a:focus-visible .ar--out{transform:translate(1.5px,-1.5px)}
button:hover .ar--back{transform:translateX(-2px)}
.dl .chev .ar{width:.6em;height:.6em;stroke-width:1.2}
.all-tile .ar{width:22px;height:22px;stroke-width:1.1}
@media (prefers-reduced-motion:reduce){.ar{transition:none}}