/* Hilda Merom — ceramic artist. Interim English site.
   Type: Fraunces (display) + Inter (text). Palette: warm museum ivory + ember. */

:root{
  --paper:#f6f3ec;
  --paper-2:#efeadf;
  --tile:#e9e3d6;
  --ink:#1d1811;
  --ink-soft:#5b5346;
  --ink-faint:#6b6355;   /* was #8b8272 (3.4:1); now 5.3:1 on paper, 4.6:1 on tiles, AA */
  --line:#d9d1c1;
  --line-soft:#e6dfd1;
  --ember:#8a4a2c;
  --ember-deep:#5f3320;
  --white:#fffdf8;
  /* warm (clay-tinted) shadow — reads far softer than a neutral grey shadow */
  --shade:58,40,24;
  /* fine paper grain, tiled 180px. keeps the ground from reading as flat colour */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E");
  --maxw:1280px;
  --gap:clamp(1.1rem,2.4vw,2rem);
  --pad:clamp(1.25rem,5vw,4.5rem);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:clamp(1rem,0.55rem + 0.55vw,1.075rem);
  line-height:1.7;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* the ground: a lit sheet of paper, not a flat fill.
   fixed layer behind everything — top light, warm ember low on the right,
   a barely-there vignette at the edges, and a fine grain over all of it. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-color:var(--paper);
  background-image:
    var(--grain),
    radial-gradient(118% 80% at 50% -14%, #fdfbf7 0%, rgba(253,251,247,0) 60%),
    radial-gradient(76% 56% at 86% 104%, rgba(138,74,44,.075) 0%, rgba(138,74,44,0) 64%),
    radial-gradient(128% 104% at 50% 46%, rgba(29,24,17,0) 54%, rgba(29,24,17,.06) 100%),
    linear-gradient(173deg, #f8f5ef 0%, #f4f0e6 48%, #ece6d7 100%);
  background-size:180px 180px, auto, auto, auto, auto;
  background-repeat:repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.08;
  letter-spacing:-0.01em;margin:0}
h1{font-size:clamp(2.9rem,1.7rem + 5.4vw,6.5rem)}
h2{font-size:clamp(1.7rem,1.2rem + 1.9vw,2.9rem)}
h3{font-size:clamp(1.15rem,1rem + 0.6vw,1.5rem)}
p{margin:0 0 1.15em}
em,i{font-style:italic}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.eyebrow{font-family:var(--sans);font-size:.72rem;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ember);margin:0 0 1.1rem}
.lede{font-size:clamp(1.15rem,1rem + 0.8vw,1.5rem);line-height:1.55;
  color:var(--ink);font-family:var(--serif);font-weight:400}
.muted{color:var(--ink-soft)}
.center{text-align:center}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:50;
  background:linear-gradient(180deg,rgba(250,247,241,.94),rgba(244,240,231,.86));
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft);
  box-shadow:0 14px 34px -30px rgba(var(--shade),.8)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;min-height:72px}
.brand{display:inline-flex;align-items:center;gap:.85rem;white-space:nowrap}
.brand-logo{height:50px;width:auto;display:block;flex:0 0 auto}
.brand-wm{display:flex;flex-direction:column;align-items:flex-start;gap:.28rem}
.brand-wordlogo{height:33px;width:auto;display:block}
.brand-sub{color:var(--ink-faint);font-size:.62rem;letter-spacing:.24em;
  text-transform:uppercase;font-family:var(--sans);font-weight:500;display:block}
.foot-logo-chip{display:inline-block;border-radius:12px;
  background:linear-gradient(170deg,#fbf8f2 0%,#f2ede1 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 10px 26px -16px rgba(0,0,0,.7);
  padding:11px 16px;margin-bottom:1.1rem}
.foot-logo-chip img{height:46px;width:auto;display:block}
.foot-wordlogo{height:40px;width:auto;display:block;margin-bottom:.7rem}
[dir="rtl"] .brand-wm{align-items:flex-start}
.nav{display:flex;align-items:center;gap:clamp(1rem,2vw,2.1rem)}
.nav a{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);padding:.4rem 0;position:relative;transition:color .2s}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;
  height:1px;background:var(--ember)}
.langs{display:flex;gap:.55rem;align-items:center;border-left:1px solid var(--line);
  padding-left:clamp(1rem,2vw,1.8rem)}
.langs a,.langs span{font-size:.72rem;letter-spacing:.08em;color:var(--ink-faint)}
.langs a[aria-current]{color:var(--ink)}
.langs .soon{color:var(--ink-faint);opacity:.5;cursor:default}
.menu-btn{display:none;background:none;border:0;font:inherit;cursor:pointer;
  font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}

/* ---------- hero ---------- */
.hero{padding-top:clamp(2rem,4vw,4rem);padding-bottom:clamp(3rem,6vw,6.5rem)}
.hero-grid{display:grid;grid-template-columns:0.92fr 1.08fr;gap:clamp(2rem,5vw,5.5rem);
  align-items:center}
.hero-copy h1{margin-bottom:1.5rem}
.hero-copy .lede{max-width:36ch;margin-bottom:2.2rem}
/* when her opening sentence is the h1 itself, not a name above it */
.hero-statement{font-size:clamp(1.65rem,1.05rem + 1.9vw,2.85rem);line-height:1.22;
  letter-spacing:-.005em;max-width:22ch;margin-bottom:2.2rem}
.hero-fig{margin:0}
.hero-fig img{width:100%;height:auto;display:block;
  box-shadow:0 34px 76px -36px rgba(var(--shade),.62),
             0 6px 20px -12px rgba(var(--shade),.28)}
.hero-fig figcaption{margin-top:1rem;font-size:.8rem;color:var(--ink-faint);
  letter-spacing:.02em}
.hero-fig figcaption em{color:var(--ink-soft)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--sans);
  font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  padding:.95rem 1.9rem;border:1px solid var(--ink);color:var(--ink);
  background:none;cursor:pointer;transition:all .22s}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.ember{border-color:var(--ember);color:var(--ember)}
.btn.ember:hover{background:var(--ember);color:var(--white)}
.btn-row{display:flex;flex-wrap:wrap;gap:1rem}
.link-more{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ember);border-bottom:1px solid transparent;transition:border-color .2s}
.link-more:hover{border-color:var(--ember)}
.link-more::after{content:" \2192"}
.inline-link{color:var(--ember);border-bottom:1px solid var(--ember)}

/* ---------- IAC membership ---------- */
.iac{display:inline-flex;align-items:center;gap:1.1rem;max-width:30rem;
  padding:.9rem 1.25rem;border:1px solid var(--line-soft);
  background:linear-gradient(177deg,#fffefb 0%,#f8f4ec 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),
             0 12px 30px -24px rgba(var(--shade),.65);
  color:var(--ink-soft);transition:box-shadow .3s,transform .3s}
.iac img{height:54px;width:auto;display:block;flex:0 0 auto}
.iac span{font-size:.86rem;line-height:1.45}
@media (hover:hover) and (pointer:fine){
  .iac:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),
             0 20px 40px -22px rgba(var(--shade),.6);transform:translateY(-2px)}
}
.iac-row{display:inline-flex;align-items:center;gap:.8rem;color:var(--ink)}
.iac-row .iac-mark{height:34px;width:auto;display:block;flex:0 0 auto}
@media (hover:hover) and (pointer:fine){.iac-row:hover span{color:var(--ember)}}

/* ---------- sections ---------- */
section{padding-block:clamp(3.5rem,7vw,7rem)}
.section-head{display:flex;justify-content:space-between;align-items:baseline;
  gap:1.5rem;flex-wrap:wrap;margin-bottom:clamp(2rem,4vw,3.2rem)}
.section-head h2{max-width:22ch}
.rule{height:1px;background:var(--line);border:0;margin:0}
/* bands sit like a slightly recessed panel: hairline light on the top edge,
   soft shadow bleeding in from top and bottom */
.band{
  background:
    linear-gradient(180deg,rgba(255,253,248,.6) 0%,rgba(255,253,248,0) 18%),
    linear-gradient(180deg,#f2ede1 0%,#ece5d6 100%);
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  box-shadow:inset 0 16px 30px -24px rgba(var(--shade),.55),
             inset 0 -16px 30px -24px rgba(var(--shade),.45)}
.band-dark{
  background:
    radial-gradient(88% 130% at 16% -10%, rgba(138,74,44,.3) 0%, rgba(138,74,44,0) 60%),
    linear-gradient(180deg,#241e15 0%,#1d1811 52%,#15110b 100%);
  color:var(--paper);
  box-shadow:inset 0 1px 0 rgba(255,253,248,.07)}
.band-dark .eyebrow{color:#d99b76}
.band-dark .muted{color:#c9c0b0}

/* full-bleed image band */
.fullbleed{padding:0}
.fullbleed figure{margin:0}
.fullbleed img{width:100%;max-height:78vh;object-fit:cover}
.fullbleed figcaption{padding:.9rem var(--pad);font-size:.78rem;color:var(--ink-faint);
  background:linear-gradient(180deg,rgba(29,24,17,.05),rgba(29,24,17,0) 90%)}

/* ---------- work grid ---------- */
.grid{display:grid;gap:clamp(1.5rem,3vw,2.8rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),1fr))}
.grid-2{grid-template-columns:1fr 1fr}
.work{margin:0;cursor:zoom-in;border:0;background:none;padding:0;
  text-align:start;font:inherit;color:inherit;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  /* three frame shapes means neighbours in a row are different heights.
     the column stretches to the tallest and the caption is pushed to the
     bottom, so the captions still line up across the row. */
  display:flex;flex-direction:column;height:100%}
.work .frame{background:linear-gradient(177deg,#fffefb 0%,#fbf8f1 60%,#f4efe3 100%);
  border:1px solid var(--line-soft);overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),
             0 2px 6px -3px rgba(var(--shade),.16),
             0 20px 46px -30px rgba(var(--shade),.5);
  transition:box-shadow .35s,transform .35s}
.work .frame img{width:100%;object-fit:contain;
  transition:transform .6s ease}
/* uniform frames only where the works sit side by side */
/* No forced frame ratio. Her work runs from 0.70 to 2.79 wide, so any single
   ratio letterboxed a quarter of every tile, and the pale frame fill showed
   as a band down one side of the dark-ground photographs. Each frame now
   takes the shape of its own picture; the captions still line up because
   .work stretches and the caption is pushed to the bottom of the row. */
/* hover lift only on devices that truly hover — on touch it caused a
   first-tap-eaten-by-hover so some images needed a second tap to open */
@media (hover:hover) and (pointer:fine){
  .work:hover .frame{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),
             0 4px 10px -5px rgba(var(--shade),.2),
             0 30px 64px -28px rgba(var(--shade),.55);transform:translateY(-3px)}
  .work:hover .frame img{transform:scale(1.04)}
}
.work figcaption{margin-top:auto;padding-top:.85rem}
.work .t{display:block;font-family:var(--serif);font-size:1.02rem;font-style:italic;line-height:1.2}
.work .m{display:block;font-size:.8rem;color:var(--ink-soft);margin-top:.35rem}

/* series header row */
.series-head{margin:clamp(2.5rem,5vw,4.5rem) 0 clamp(1.4rem,2.5vw,2rem)}
.series-head:first-child{margin-top:0}
.series-head h3{font-size:clamp(1.5rem,1.2rem + 1.1vw,2.1rem);margin-bottom:.5rem}
.series-head p{max-width:60ch;color:var(--ink-soft);margin:0}
.series-head .meta{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ember);margin-bottom:.7rem}

/* featured (asymmetric) */
.featured{display:grid;gap:clamp(1.5rem,3vw,2.8rem);grid-template-columns:repeat(6,1fr)}
.featured .work{grid-column:span 2}
.featured .work.big{grid-column:span 4}
.featured .work.big .t{font-size:1.3rem}

/* ---------- prose / about ---------- */
.prose{max-width:66ch}
.prose h2{margin:2.2em 0 .7em}
.prose h2:first-child{margin-top:0}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:start}
.statement{font-family:var(--serif);font-size:clamp(1.2rem,1rem + 1vw,1.7rem);
  line-height:1.5;font-weight:400}
.statement p{margin-bottom:.9em}
.portrait{margin:0}
.portrait img{width:100%;object-fit:cover;border:1px solid var(--line-soft);
  box-shadow:0 24px 54px -34px rgba(var(--shade),.55)}
.portrait figcaption{margin-top:.7rem;font-size:.78rem;color:var(--ink-faint)}

/* ---------- CV ---------- */
.cv{max-width:900px}
.cv-block{margin-bottom:2.6rem}
.cv-block h3{font-size:1rem;font-family:var(--sans);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ember);
  margin-bottom:1.1rem;padding-bottom:.5rem;border-bottom:1px solid var(--line)}
.cv-row{display:grid;grid-template-columns:5.5rem 1fr;gap:1.2rem;padding:.5rem 0;
  border-bottom:1px solid var(--line-soft);align-items:baseline}
.cv-row:last-child{border-bottom:0}
.cv-row .yr{font-variant-numeric:tabular-nums;color:var(--ink-faint);font-size:.9rem}
.cv-row .it{color:var(--ink)}
.cv-row .it em{color:var(--ink)}
.cv-row .it .v{color:var(--ink-soft)}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem)}
.field{margin-bottom:1.25rem}
.field label{display:block;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:.45rem}
.field input,.field select,.field textarea{width:100%;font:inherit;color:var(--ink);
  background:linear-gradient(180deg,#fffefb,#faf7f0);
  box-shadow:inset 0 1px 3px rgba(var(--shade),.07);
  border:1px solid var(--line);padding:.8rem .9rem;border-radius:0}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--ember);
  outline-offset:-1px;border-color:var(--ember)}
.form-note{font-size:.8rem;color:var(--ink-faint);margin-top:.4rem}
.info-line{display:block;margin-bottom:1.3rem}
.info-line .k{display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:.35rem}
.info-line .v{display:block;font-size:1.05rem}

/* ---------- footer ---------- */
.site-foot{color:var(--paper);padding-block:clamp(3rem,6vw,5rem);
  background:
    radial-gradient(60% 105% at 12% -12%, rgba(138,74,44,.2) 0%, rgba(138,74,44,0) 58%),
    linear-gradient(180deg,#231d15 0%,#1b160f 60%,#141009 100%);
  box-shadow:inset 0 1px 0 rgba(255,253,248,.07)}
.site-foot a{color:var(--paper)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2.5rem}
.foot-brand{font-family:var(--serif);font-size:1.7rem;margin-bottom:.6rem}
.site-foot .eyebrow{color:#d99b76}
.foot-col h4{font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:#b7ae9d;margin-bottom:1rem}
.foot-col a{display:block;color:#e7e1d4;font-size:.92rem;padding:.28rem 0;transition:color .2s}
.foot-col a:hover{color:#fff}
.foot-base{margin-top:3rem;padding-top:1.5rem;border-top:1px solid #3a342b;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  font-size:.78rem;color:#9a9280}
/* 27.09.2026: designer credit. Inherits #9a9280 (5.4:1 on the footer). */
.site-foot .foot-by a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:4px}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:100;background:rgba(20,17,12,.94);
  display:none;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem)}
.lb.open{display:flex}
.lb-img{max-width:min(1100px,92vw);max-height:80vh;display:flex;flex-direction:column;
  align-items:center;gap:1rem}
.lb-img img{max-height:70vh;max-width:100%;width:auto;object-fit:contain;
  box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb-cap{color:#efe9dc;text-align:center;font-size:.9rem;max-width:60ch}
.lb-cap .t{display:block;font-family:var(--serif);font-style:italic;font-size:1.15rem;color:#fff}
.lb-cap .m{display:block;color:#c3baa8;margin-top:.35rem}

/* A measurement is a run of numbers joined by neutral separators. Inside an
   RTL paragraph the bidi algorithm orders those runs right to left, so
   "38 x 40 x 9 cm" was being read out as "cm 9 x 40 x 38" on the Hebrew
   pages (found 20.09.2026). plaintext resolves the line from its own first
   strong character, which is the Latin "cm", so the numbers keep their
   order; the alignment is restored by hand because that resolves to ltr. */
:root[dir=rtl] .work .m,
:root[dir=rtl] .lb-cap .m{unicode-bidi:plaintext}
:root[dir=rtl] .work .m{text-align:right}
.lb-cap .enq{display:inline-block;margin-top:.8rem;color:#e0a983;
  border-bottom:1px solid #e0a983;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
.lb-x,.lb-nav{position:absolute;background:none;border:0;color:#efe9dc;cursor:pointer}
.lb-x{top:1.2rem;right:1.4rem;font-size:1.8rem;line-height:1}
.lb-nav{top:50%;transform:translateY(-50%);font-size:2.6rem;padding:1rem;opacity:.7;
  transition:opacity .2s}
.lb-nav:hover{opacity:1}
.lb-prev{left:.5rem}.lb-next{right:.5rem}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero-grid,.two-col,.contact-grid{grid-template-columns:1fr}
  .hero-fig{order:-1;max-width:440px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .featured{grid-template-columns:repeat(2,1fr)}
  .featured .work,.featured .work.big{grid-column:span 1}
}
@media (max-width:680px){
  .nav{position:fixed;inset:72px 0 auto 0;flex-direction:column;
    background:linear-gradient(180deg,#f8f5ef,#f1ece0);
    box-shadow:0 22px 40px -30px rgba(var(--shade),.9);
    align-items:flex-start;gap:0;padding:0 var(--pad) 1.5rem;border-bottom:1px solid var(--line);
    display:none}
  .nav.open{display:flex}
  .nav a{width:100%;padding:.9rem 0;border-bottom:1px solid var(--line-soft);
    font-size:.95rem}
  .langs{border-left:0;padding-left:0;padding-top:.9rem}
  .menu-btn{display:block}
  .foot-grid{grid-template-columns:1fr}
  .cv-row{grid-template-columns:4rem 1fr;gap:.8rem}
}

/* ---------- phones: the work fills the screen ----------
   a 400px card inside the page padding leaves a stamp on a phone, and the 4/3
   frame letterboxes every upright piece on top of that. under 680px each work
   takes its own row, breaks out of the wrap padding to the screen edges, and
   keeps its own proportions instead of being fitted into a box. */
@media (max-width:680px){
  .grid,.grid-2,.featured{
    grid-template-columns:1fr;
    gap:clamp(2.2rem,7vw,3.2rem);
    margin-inline:calc(var(--pad) * -1)}
  .work .frame{border-inline:0}
  /* captions stay on the text margin, only the pictures go edge to edge */
  .work figcaption{padding-inline:var(--pad)}
  .featured .work.big .t{font-size:1.02rem}

  .hero-fig{max-width:none;margin-inline:calc(var(--pad) * -1)}
  .hero-fig figcaption{padding-inline:var(--pad)}

  .portrait{margin-inline:calc(var(--pad) * -1)}
  /* inside a grid the row already bleeds — don't pull the figure out twice */
  .grid .portrait{margin-inline:0}
  .portrait img{border-inline:0}
  .portrait figcaption{padding-inline:var(--pad)}

  /* nothing cropped on a phone: show the whole piece */
  .fullbleed img{max-height:none}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;
  transition:none!important;animation:none!important}}

/* ---------- RTL (Hebrew) ---------- */
:root[dir="rtl"]{
  --serif:"Noto Serif Hebrew",Georgia,serif;
  --sans:"Frank Ruhl Libre","Noto Serif Hebrew",Georgia,serif;
}
/* Frank Ruhl (body serif) needs a touch more size/leading to read at UI scale */
[dir="rtl"] body{font-size:clamp(1.05rem,0.6rem + 0.6vw,1.16rem);line-height:1.75}
[dir="rtl"] .nav a,[dir="rtl"] .btn,[dir="rtl"] .cv-block h3,[dir="rtl"] .foot-col h4,
[dir="rtl"] .field label,[dir="rtl"] .info-line .k,[dir="rtl"] .series-head .meta,
[dir="rtl"] .eyebrow,[dir="rtl"] .link-more{font-weight:500}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{letter-spacing:0}
[dir="rtl"] .eyebrow{letter-spacing:.12em}
[dir="rtl"] .nav a,[dir="rtl"] .btn,[dir="rtl"] .link-more,[dir="rtl"] .cv-block h3,
[dir="rtl"] .field label,[dir="rtl"] .info-line .k,[dir="rtl"] .foot-col h4,
[dir="rtl"] .series-head .meta{letter-spacing:.03em}
[dir="rtl"] .langs{border-left:0;border-right:1px solid var(--line);
  padding-left:0;padding-right:clamp(1rem,2vw,1.8rem)}
[dir="rtl"] .nav a[aria-current]::after{left:auto;right:0}
[dir="rtl"] .cv-block h3{letter-spacing:.08em}
[dir="rtl"] .link-more::after{content:" \2190"}   /* arrow points left in RTL */
[dir="rtl"] .lb-prev{left:auto;right:.5rem}
[dir="rtl"] .lb-next{right:auto;left:.5rem}
[dir="rtl"] .lb-prev svg,[dir="rtl"] .lb-x{transform:none}
@media (max-width:680px){
  [dir="rtl"] .nav{inset:72px 0 auto 0}
  [dir="rtl"] .langs{border-right:0;padding-right:0}
}

/* ---------- skip link, consent, legal (added) ---------- */
.skip-link{position:absolute;inset-inline-start:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--paper);padding:.7rem 1.2rem;
  font-size:.82rem;letter-spacing:.08em}
.skip-link:focus{inset-inline-start:0}
.consent-row{display:flex;gap:.65rem;align-items:flex-start;margin:.2rem 0 1.4rem;
  font-size:.85rem;color:var(--ink-soft);line-height:1.5}
.consent-row input{margin-top:.25rem;flex:0 0 auto;width:17px;height:17px;accent-color:var(--ember)}
.consent-row a{color:var(--ember);border-bottom:1px solid var(--ember)}
.legal{max-width:70ch}
.legal h3{font-family:var(--sans);font-size:1.02rem;font-weight:600;
  margin:2em 0 .5em;color:var(--ink)}
.legal p{color:var(--ink-soft)}
.legal a{color:var(--ember);border-bottom:1px solid transparent;transition:border-color .2s}
.legal a:hover{border-color:var(--ember)}

/* page-title h1 on interior pages, sized like h2 */
.ph{font-size:clamp(1.7rem,1.2rem + 1.9vw,2.9rem);line-height:1.08;letter-spacing:-.01em}

/* ---------- work tree: series cards, series grid, single work ---------- */
.crumbs{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft)}
.crumbs a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid transparent}
.crumbs a:hover{border-bottom-color:var(--ember)}
.crumbs .sep{margin:0 .55em;opacity:.5}

.scards{display:grid;gap:clamp(1.6rem,3vw,2.8rem);margin-top:clamp(2rem,4vw,3.2rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}
.scard{display:flex;flex-direction:column;text-decoration:none;color:inherit;height:100%}
.scard .frame{background:linear-gradient(177deg,#fffefb 0%,#fbf8f1 60%,#f4efe3 100%);
  border:1px solid var(--line-soft);overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),
             0 2px 6px -3px rgba(var(--shade),.16),
             0 20px 46px -30px rgba(var(--shade),.5);
  transition:box-shadow .35s,transform .35s}
.scard .frame img{width:100%;aspect-ratio:1/1;object-fit:contain;transition:transform .6s ease} /* 21.10.2026: the whole cover, never cut */
.scard-body{margin-top:auto;padding-top:.9rem}
.scard .t{display:block;font-family:var(--serif);font-size:1.25rem;line-height:1.2}
.scard .m{display:block;font-size:.8rem;color:var(--ink-soft);margin-top:.35rem}
.scard .n{display:block;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ember);margin-top:.6rem}
@media (hover:hover) and (pointer:fine){
  .scard:hover .frame{transform:translateY(-3px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),
               0 4px 10px -5px rgba(var(--shade),.2),
               0 30px 64px -28px rgba(var(--shade),.55)}
  .scard:hover .frame img{transform:scale(1.04)}
  .scard:hover .t{color:var(--ember)}
}

/* a catalogue tile is a link to the work's own page, not a lightbox */
a.work.wlink{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  cursor:pointer;height:100%}
.wcap{margin-top:auto;padding-top:.85rem}
.wcap .t{display:block;font-family:var(--serif);font-size:1.02rem;font-style:italic;line-height:1.2}
.wcap .m{display:block;font-size:.8rem;color:var(--ink-soft);margin-top:.35rem}
:root[dir=rtl] .wcap .m{unicode-bidi:plaintext;text-align:right}

.wdetail{display:grid;grid-template-columns:1.35fr 1fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:start;margin-top:clamp(1.6rem,3vw,2.6rem)}
.wbig{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.wbig .frame,.wbig picture{display:block}
.wbig img{width:100%;height:auto;border:1px solid var(--line-soft);
  box-shadow:0 30px 64px -34px rgba(var(--shade),.55)}
.wviews{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1rem}
.wv{width:92px;padding:0;border:1px solid var(--line-soft);background:none;cursor:pointer;
  overflow:hidden;transition:border-color .25s}
.wv img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.wv:hover{border-color:var(--ember)}
.winfo h1{font-size:clamp(1.7rem,1.3rem + 1.4vw,2.5rem);margin:.25em 0 .9em}
.wrows{border-top:1px solid var(--line-soft);margin-bottom:1.8rem}
.wrow{display:grid;grid-template-columns:minmax(9rem,38%) 1fr;gap:1rem;
  padding:.7rem 0;border-bottom:1px solid var(--line-soft);font-size:.92rem}
.wrow .k{color:var(--ink-soft)}
:root[dir=rtl] .wrow .v{unicode-bidi:plaintext;text-align:right}
.wnav-a{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ember);text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color .2s}
.wnav-a:hover{border-bottom-color:var(--ember)}
.wnav-a.mid{color:var(--ink-soft)}
.wnav{display:flex;gap:1.6rem;flex-wrap:wrap;justify-content:space-between;
  margin-top:clamp(2.4rem,5vw,4rem);padding-top:1.4rem;border-top:1px solid var(--line-soft)}

@media (max-width:820px){
  .wdetail{grid-template-columns:1fr}
}
@media (max-width:680px){
  .wbig img{border-inline:0}
  .wv{width:74px}
}

/* ================================================================
   home page, 22.09.2026: every series on the home page.
   --plate is the backdrop of the 2026 photographs (#C9C1B3 asked,
   ~#c4b9ab delivered). Frames painted in it make the photo edge disappear,
   so each work reads as standing in one continuous studio.
   ================================================================ */
:root{--plate:#c4b9ab;--plate-ink:#2a231a}

/* the hero sits on the site's own paper ground (Ido, 22.09: the plate-coloured
   hero read too dark). The photo is shown as a print, with the warm shadow. */
.hx{padding-block:clamp(2.5rem,6vw,5.5rem) clamp(2rem,5vw,4.5rem)}
.hx-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,5rem);
  align-items:center;min-height:min(78vh,860px)}
.hx h1{font-size:clamp(2.6rem,1.4rem + 4.6vw,5.6rem);line-height:1.02;margin-bottom:1.6rem}
.hx .lede{max-width:34ch;margin-bottom:2.2rem}
.hx-fig{display:block;position:relative;justify-self:center;max-width:100%}
/* sized by its own ratio, so the shadow hugs the photo and not an empty box */
.hx-fig img{width:auto;max-width:100%;height:auto;max-height:80vh;margin-inline:auto;
  box-shadow:0 34px 76px -36px rgba(var(--shade),.62),
             0 6px 20px -12px rgba(var(--shade),.28)}
.hx-cap{display:block;margin-top:1rem;font-size:.8rem;color:var(--ink-faint)}

.series-index{padding-block:clamp(4rem,8vw,7.5rem) clamp(2rem,4vw,3rem)}
.chapter{display:grid;grid-template-columns:4fr 7fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:center;margin-bottom:clamp(4rem,8vw,7rem)}
.chapter.rev{grid-template-columns:7fr 4fr}
.chapter.rev .ch-copy{order:2}
.ch-copy h2{font-size:clamp(2rem,1.3rem + 2.4vw,3.4rem);margin-bottom:1.2rem}
.ch-copy h2 a{transition:color .2s}
.ch-copy h2 a:hover{color:var(--ember)}
.ch-blurb{color:var(--ink-soft);max-width:40ch}
.ch-links{margin-top:1.8rem;border-top:1px solid var(--line)}
.ch-link{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:1rem 0;border-bottom:1px solid var(--line);transition:padding .25s,color .2s}
.ch-link .t{font-family:var(--serif);font-size:1.2rem}
.ch-link .n{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ember)}
.ch-link:hover{color:var(--ember);padding-inline-start:.5rem}

.mosaic{display:grid;grid-template-columns:1.55fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));
  gap:clamp(.6rem,1.2vw,1rem)}
.chapter.rev .mosaic{grid-template-columns:1fr 1.55fr}
.chapter.rev .mz-big{grid-column:2}
/* 12.10.2026: the photographs moved to a warm vertical sweep, so a flat plate
   behind a contained photo showed as a frame. The photo now fills the tile;
   HOME_FAMILIES picks photos whose ratio keeps the whole piece inside. */
.mz{position:relative;display:block;background:#4a4036;overflow:hidden}
.mz-big{grid-row:1 / span 2}
.mz picture,.mz img{display:block;width:100%;height:100%}
.mz img{object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.mz-sm img{aspect-ratio:1/1}
/* the large tile takes the height the two small ones set, so its own photo
   must not push the rows open */
.mz-big picture{position:absolute;inset:0}
/* captions sit on a band of the plate colour and only show on hover: over a
   contained photo there is no reliably empty corner to put them in */
.mz-cap{position:absolute;inset-inline:0;bottom:0;padding:.7rem 1rem;color:var(--plate-ink);
  font-size:.76rem;line-height:1.35;background:rgba(246,243,236,.9);
  opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.mz:hover .mz-cap,.mz:focus-visible .mz-cap{opacity:1;transform:none}
/* on touch there is no hover, so the caption band simply stays */
@media (hover:none){.mz-cap{opacity:1;transform:none}}
.mz-cap .t{display:block;font-family:var(--serif);font-size:.95rem}
.mz-cap .m{display:block}
@media (hover:hover) and (pointer:fine){
  .mz:hover img{transform:scale(1.035)}
}
.scards.older{margin-top:0;grid-template-columns:repeat(5,1fr)}
@media (max-width:1100px){.scards.older{grid-template-columns:repeat(3,1fr)}}
@media (max-width:680px){.scards.older{grid-template-columns:repeat(2,1fr)}
  .scards.older .scard:last-child:nth-child(odd){grid-column:span 2}}

.fullbleed.plate{background:none}
.fullbleed.plate img{object-fit:cover;max-height:84vh;margin-inline:auto}
.fullbleed.plate figcaption{background:none;color:rgba(42,35,26,.72)}
.home-story .iac{margin-top:1rem}

@media (max-width:900px){
  .hx-grid{grid-template-columns:1fr;min-height:0}
  .hx-fig{order:-1}
  .chapter,.chapter.rev{grid-template-columns:1fr}
  .chapter.rev .mosaic{grid-template-columns:1.55fr 1fr}
  .chapter.rev .mz-big{grid-column:1}
  .chapter.rev .ch-copy{order:0}
}
@media (max-width:680px){
  .hx{padding-top:0}
  .hx-fig{margin-inline:calc(var(--pad) * -1);justify-self:stretch;max-width:none}
  .hx-fig img{width:100%;max-height:none;box-shadow:none}
  .hx-cap{padding-inline:var(--pad)}
  .mosaic,.chapter.rev .mosaic{grid-template-columns:1fr 1fr;grid-template-rows:auto;
    margin-inline:calc(var(--pad) * -1);gap:.5rem}
  .mz-big,.chapter.rev .mz-big{grid-column:1 / span 2;grid-row:auto;aspect-ratio:4/3}
  .mz-cap{inset-inline:.7rem;bottom:.6rem}
}
/* 12.10.2026: the 4% edge feathering for the flat plate is gone. On the warm
   sweep the photo fills its tile edge to edge, and the feather showed as a blur. */
/* her own photographs (22.09.2026) */
.about-side{margin-top:2rem;max-width:420px}
.home-story{display:grid;grid-template-columns:minmax(0,66ch) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);
  align-items:start;padding-block:clamp(1rem,3vw,2rem)}
.home-portrait{position:sticky;top:6rem}
@media (max-width:900px){
  .home-story{grid-template-columns:1fr}
  .home-portrait{position:static;max-width:520px}
}
/* keyboard focus, everywhere (research 03 §6) */
:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
.lb :focus-visible{outline-color:#f0c9a8}
/* ================================================================
   12.10.2026 · the series grid as the leading galleries show it
   (research/01: Sarah Myerscough, Xavier Hufkens, Ting-Ying). One even grid,
   every work the same square on the same warm sweep (make_squares.py), no
   card, no border, no shadow: the photograph is the object's plinth. A quiet
   caption under it, and room around every piece.
   ================================================================ */
.grid{grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(1.25rem,2.6vw,2.75rem);row-gap:clamp(2.25rem,4.5vw,4.25rem)}
@media (max-width:1000px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.grid{grid-template-columns:1fr;row-gap:2.5rem}}
.grid .work .frame{background:none;border:0;box-shadow:none;transform:none}
.grid .work .frame img{aspect-ratio:1/1;object-fit:cover;height:auto}
.grid .wcap,.grid .work figcaption{padding-top:1rem}
.grid .wcap .t,.grid .work .t{font-style:normal;font-size:1.06rem;letter-spacing:.005em}
.grid .wcap .m,.grid .work .m{font-size:.78rem;letter-spacing:.02em;color:var(--ink-faint)}
@media (hover:hover) and (pointer:fine){
  .grid .work:hover .frame{box-shadow:none;transform:none}
  .grid .work .frame img{transition:transform 1.1s cubic-bezier(.2,.7,.2,1),filter .4s}
  .grid .work:hover .frame img{transform:scale(1.025);filter:brightness(1.03)}
  .grid a.work:hover .t{color:var(--ember)}
}
@media (max-width:680px){.grid .work .frame{border-inline:0}}
/* work page thumbnails: the same squares, no crop */
.wv img{object-fit:contain}

/* lightbox zoom on a computer (12.10.2026): the photo is clipped by its own box,
   scales to its full resolution and follows the mouse */
.lb-zoom{display:block;overflow:hidden;line-height:0;max-width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb-zoom img{box-shadow:none;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.lb.can-zoom .lb-zoom img{cursor:zoom-in}
.lb.zoomed .lb-zoom img{cursor:zoom-out;transition:transform .35s cubic-bezier(.2,.7,.2,1),transform-origin .08s linear}
.lb.zoomed .lb-cap,.lb.zoomed .lb-nav{opacity:.25;transition:opacity .3s}
/* installation photographs keep their own shape inside the even grid */
.grid .work .frame img[src*="/md/"]{aspect-ratio:auto}
/* on a phone the photo runs edge to edge, the caption keeps the page gutter */
@media (max-width:680px){.grid .wcap,.grid .work figcaption{padding-inline:var(--pad)}}
/* interiors (12.10.2026): two wide columns, the rooms keep their own shape */
.grid.rooms{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:680px){.grid.rooms{grid-template-columns:1fr}}
.grid.rooms .work .frame img{aspect-ratio:auto}
.wnote{font-size:.78rem;color:var(--ink-faint);margin-top:.8rem}
/* the work in a home, below its record */
.wroom{margin:clamp(2.5rem,5vw,4rem) 0 0}
.wroom-b{display:block;width:100%;border:0;padding:0;background:none;cursor:zoom-in}
.wroom-b img{width:100%;height:auto;display:block}
.wroom figcaption{font-size:.78rem;color:var(--ink-faint);margin-top:.7rem}
@media (max-width:680px){.wroom{margin-inline:calc(var(--pad) * -1)}.wroom figcaption{padding-inline:var(--pad)}}

/* ================================================================
   12.10.2026 · home page as her visiting card: pictures and names only
   ================================================================ */
.hx-cap{display:none}
.home-series{padding-block:clamp(3rem,7vw,6rem) clamp(2rem,4vw,3rem)}
.hs-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.8rem,1.6vw,1.4rem)}
@media (max-width:900px){.hs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hs-tile{position:relative;display:block;overflow:hidden;text-decoration:none;color:inherit}
.hs-tile img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;display:block;
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.hs-t{position:absolute;inset-inline:0;bottom:0;padding:2.4rem 1.1rem 1rem;color:#fff;
  font-family:var(--serif);font-size:clamp(1rem,.9rem + .5vw,1.35rem);line-height:1.2;
  background:linear-gradient(180deg,rgba(20,16,11,0),rgba(20,16,11,.55))}
@media (hover:hover) and (pointer:fine){.hs-tile:hover img{transform:scale(1.035)}}
.hs-more{margin-top:1.6rem;text-align:end}
.home-quote{padding-block:clamp(3rem,8vw,7rem)}
.home-quote blockquote{margin:0 auto;max-width:30ch;text-align:center;font-family:var(--serif);
  font-size:clamp(1.5rem,1.1rem + 1.8vw,2.6rem);line-height:1.3;color:var(--ink)}
.hq-by{text-align:center;margin-top:1.6rem}
.home-room-a{position:relative;display:block;color:#fff;text-decoration:none}
.home-room-a img{width:100%;height:auto;display:block} /* 21.10.2026: was cut to 88vh */
.home-room-t{position:absolute;inset-inline-end:var(--pad);align-items:flex-end;bottom:clamp(1.2rem,3vw,2.4rem);display:flex;flex-direction:column;gap:.3rem}
.home-room-t .h{font-family:var(--serif);font-size:clamp(1.8rem,1.2rem + 2.4vw,3.4rem);line-height:1;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.home-room-t .n{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.home-iac{display:flex;justify-content:center;padding-block:clamp(2.5rem,5vw,4rem)}

/* ================================================================
   12.10.2026 · home page option 1, "Kiln" (research/01 §5, direction B)
   clay ground, a full-width band per series, labels in mono
   ================================================================ */
.opt-kiln{--clay:#ede6db;--clay-2:#e3dacb;--brown:#5c4a3d;--celadon:#2e3d3a;background:var(--clay);
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
.k-intro{padding-block:clamp(3.5rem,9vw,8rem) clamp(3rem,6vw,5rem)}
.k-intro-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:end}
.k-intro h1{font-size:clamp(3rem,1.6rem + 5.4vw,6.6rem);line-height:.98;margin:0;color:var(--ink)}
.k-lede{font-size:clamp(1.05rem,.98rem + .3vw,1.25rem);line-height:1.6;color:var(--ink-soft);max-width:38ch;margin:0 0 1.6rem}
.k-proof{list-style:none;margin:0 0 2rem;padding:1.1rem 0 0;border-top:1px solid rgba(92,74,61,.25);
  display:grid;gap:.45rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.03em;color:var(--brown)}
.k-band{position:relative;display:block;color:#fff;text-decoration:none;overflow:hidden}
.k-band img{width:100%;height:auto;display:block;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.k-band + .k-band{margin-top:clamp(.4rem,.8vw,.7rem)}
.k-label{position:absolute;inset-inline-end:var(--pad);bottom:clamp(1.2rem,3vw,2.6rem);
  display:flex;flex-direction:column;align-items:flex-end;gap:.35rem;text-align:end}
.k-no{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;opacity:.8}
.k-t{font-family:var(--serif);font-size:clamp(1.8rem,1.1rem + 2.6vw,3.6rem);line-height:1;text-shadow:0 2px 28px rgba(0,0,0,.3)}
.k-v{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
@media (hover:hover) and (pointer:fine){.k-band:hover img{transform:scale(1.02)}.k-band:hover .k-v{opacity:.9;transform:none}}
@media (hover:none){.k-v{opacity:.85;transform:none}}
.k-coll{padding-block:clamp(4rem,9vw,7.5rem) clamp(2rem,4vw,3rem)}
.k-coll-grid{display:grid;grid-template-columns:1fr 2fr;gap:clamp(1.5rem,5vw,5rem)}
.k-coll h2,.m-two h2{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.4rem);margin:0}
.k-coll ul,.m-coll{list-style:none;margin:0;padding:0}
.k-coll li,.m-coll li{display:grid;grid-template-columns:4.5rem 1fr;gap:1rem;padding:1rem 0;border-top:1px solid rgba(92,74,61,.22)}
.k-coll .y{font-family:var(--mono);font-size:.8rem;color:var(--brown);padding-top:.15rem}
.k-quote{padding-block:clamp(3rem,8vw,7rem)}
.k-quote blockquote{margin:0;max-width:26ch;font-family:var(--serif);font-size:clamp(1.6rem,1.1rem + 2vw,2.9rem);line-height:1.25}
.k-quote p{margin-top:1.6rem}
@media (max-width:820px){.k-intro-grid,.k-coll-grid{grid-template-columns:1fr}}

/* ================================================================
   home page option 3, "Interiors first"
   ================================================================ */
.opt-interiors{--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace}
.i-hero{position:relative;min-height:min(92vh,980px);display:flex;align-items:flex-end;overflow:hidden;color:#fff}
.i-hero picture,.i-hero > picture img{position:absolute;inset:0;width:100%;height:100%}
.i-hero img{object-fit:cover}
.i-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,15,10,0) 40%,rgba(20,15,10,.55))}
.i-hero-copy{position:relative;z-index:1;padding-block:clamp(2.5rem,6vw,5rem)}
.i-hero h1{color:#fff;font-size:clamp(2.8rem,1.6rem + 4.8vw,6rem);line-height:.98;margin:0 0 1.2rem;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.i-lede{max-width:40ch;color:rgba(255,255,255,.92);margin:0 0 1.8rem;line-height:1.6}
.i-btn{color:#fff;border-color:rgba(255,255,255,.85)}
.i-btn.ghost{background:rgba(255,255,255,.12)}
.i-vis{position:absolute;inset-inline-end:var(--pad);bottom:clamp(1rem,2vw,1.6rem);font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.i-studio{padding-block:clamp(4rem,9vw,7rem) clamp(2rem,4vw,3rem)}
.i-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.8rem,1.6vw,1.4rem)}
@media (max-width:900px){.i-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.i-work{display:block;text-decoration:none;color:inherit}
.i-work img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.i-wt{display:block;margin-top:.8rem;font-family:var(--serif);font-size:1rem}
.i-series{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.4rem;border-top:1px solid var(--line)}
.i-series a{font-family:var(--serif);font-size:clamp(1.05rem,.95rem + .4vw,1.35rem);text-decoration:none;color:var(--ink)}
.i-series a:hover{color:var(--ember)}
.i-rooms{padding-block:clamp(3rem,7vw,6rem)}
.i-rooms-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1.6rem}
.i-rooms-head h2{margin:0;font-size:clamp(1.6rem,1.2rem + 1.4vw,2.4rem)}
.i-rooms-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.8rem,1.6vw,1.4rem)}
@media (max-width:820px){.i-rooms-grid{grid-template-columns:1fr}}
.i-room img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.i-note{font-size:.76rem;color:var(--ink-faint);margin-top:1rem}
.i-coll{padding-block:clamp(3rem,7vw,6rem);background:var(--paper-2)}
.i-two{display:grid;grid-template-columns:1fr 2fr;gap:clamp(1.5rem,6vw,6rem)}
@media (max-width:820px){.i-two{grid-template-columns:1fr}}
.i-proof{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;font-family:var(--mono);font-size:.76rem;letter-spacing:.03em;color:var(--ember-deep)}
.i-coll h2{margin:0 0 1rem;font-size:clamp(1.4rem,1.1rem + 1vw,2rem)}
.i-cl{list-style:none;margin:0 0 2.4rem;padding:0}
.i-cl li{display:grid;grid-template-columns:4.5rem 1fr;gap:1rem;padding:.9rem 0;border-top:1px solid var(--line)}
.i-cl .y{font-family:var(--mono);font-size:.8rem;color:var(--ink-faint)}
.i-coll blockquote{margin:0 0 1.2rem;font-family:var(--serif);font-size:clamp(1.3rem,1rem + 1.2vw,2rem);line-height:1.35;max-width:32ch}

/* option 3: the copy sits on the empty wall at the top, clear of the work */
.i-hero{align-items:flex-start}
.i-hero-copy{padding-top:clamp(3rem,9vw,7rem)}
.i-hero::after{background:linear-gradient(180deg,rgba(20,15,10,.45),rgba(20,15,10,0) 55%)}
.i-rooms-head h2 a{color:inherit;text-decoration:none}
.i-coll h2{margin:0}
.i-vis{z-index:1}
/* option 3 on a phone: the room on its own, the words below it, nothing over the work */
@media (max-width:680px){
  .i-hero{display:block;min-height:0;color:var(--ink)}
  .i-hero picture,.i-hero > picture img{position:static}
  .i-hero img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block}
  .i-hero::after{display:none}
  .i-hero-copy{padding-block:2.2rem 3rem}
  .i-hero h1{color:var(--ink);text-shadow:none}
  .i-lede{color:var(--ink-soft)}
  .i-btn{color:var(--ink);border-color:var(--ink)}
  .i-btn.ghost{background:none;color:var(--ember);border-color:var(--ember)}
  .i-vis{top:calc(min(125vw, 9999px) - 2rem);bottom:auto;color:#fff}
}

/* ================================================================
   12.10.2026 · home page below the hero: images first, room to breathe.
   One spacing scale: sections 8rem / 5rem on phones, gaps 2.5rem, captions 1rem
   under the picture, never over it.
   ================================================================ */
.h-sec{padding-block:clamp(5rem,10vw,9rem) 0}
.h-cap{display:block;margin-top:1rem;font-family:var(--serif);font-size:1rem;letter-spacing:.005em;color:var(--ink)}
.h-tile{display:block;text-decoration:none;color:inherit}
.h-tile img,.h-pair-b img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;
  transition:opacity .6s ease}
@media (hover:hover) and (pointer:fine){.h-tile:hover img{opacity:.88}.h-tile:hover .h-cap{color:var(--ember)}}
.h-grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(1.25rem,2.5vw,2.5rem);row-gap:clamp(2.5rem,4.5vw,4rem)}
.h-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,2.5vw,2.5rem)}
@media (max-width:900px){.h-grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.h-grid3{grid-template-columns:1fr;row-gap:3rem}}
.h-pair-grid{display:grid;grid-template-columns:7fr 1fr 4fr;align-items:start}
.h-pair-a{grid-column:1;margin:0}
.h-pair-b{grid-column:3;margin:clamp(6rem,14vw,12rem) 0 0}
.h-pair-a img{width:100%;height:auto;display:block} /* 21.10.2026: its own shape, was cut to 4:5 */
.h-pair figcaption{margin-top:1rem;font-family:var(--serif);font-size:1rem}
.h-pair a{display:block}
@media (max-width:680px){.h-pair-grid{grid-template-columns:1fr;row-gap:3rem}.h-pair-a,.h-pair-b{grid-column:1;margin-top:0}}
.home-room{padding-top:clamp(5rem,10vw,9rem)}
.h-quote{padding-bottom:clamp(5rem,10vw,9rem);text-align:center}
.h-quote blockquote{margin:0 auto;max-width:34ch;font-family:var(--serif);font-weight:300;
  font-size:clamp(1.15rem,1rem + .6vw,1.5rem);line-height:1.6;color:var(--ink-soft)}
.h-quote p{margin-top:1.4rem}

/* 21.10.2026: the thumbnail whose photograph is in the big frame */
.wv.on { border-color: var(--ember); }

/* 21.10.2026: Publications, the catalogues and articles Hilda photographed */
.pub-h { margin: 4rem 0 1.6rem; font-size: 1.5rem; }
.pubs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.6rem 1.8rem; align-items: start; }
.pub { margin: 0; }
.pub-cover { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.pub-cover img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: contain;
  object-position: center bottom; background: none !important;
  filter: drop-shadow(0 14px 22px rgba(58,40,24,.28)); }
.pub figcaption { margin-top: .9rem; }
.pub figcaption .t { display: block; font-family: var(--serif); font-size: 1.02rem; line-height: 1.3; }
.pub figcaption .m { display: block; margin-top: .3rem; font-size: .82rem; color: var(--muted, #6b6457); line-height: 1.45; }
.pub figcaption .pub-n { display: block; margin-top: .35rem; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ember); }
@media (max-width: 900px) { .pubs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pubs { grid-template-columns: 1fr; } }

/* 21.10.2026: while a photograph loads, its place shows her warm sweep instead of an
   empty box, so the grid does not read as blank and then "pop" */
/* 27.10.2026, Ido: the dark sweep flashed before every photo on each page change.
   Now the place is the colour of the page, and the photo fades in when it has loaded
   (site.js adds .ph until then; without JS photos show as usual) */
img.ph{opacity:0}
img.ph-in{transition:opacity .45s ease}

/* 26.10.2026, Hilda: the menu in the lettering of "Ceramic Artist" under the name
   (Inter 500, wide tracking, capitals) */
.nav a{font-family:var(--sans);font-weight:500;font-size:.7rem;letter-spacing:.2em;white-space:nowrap}
@media (max-width:900px){.nav a{font-size:.78rem;white-space:normal}}

/* 26.10.2026: About, her new text, the photographs beside it */
.about-row{align-items:start}
.about-quote{margin:0 0 2.4rem;font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.15rem,1rem + .6vw,1.45rem);line-height:1.55;color:var(--ink-soft)}
.about-quote footer{margin-top:.9rem;font-style:normal;font-family:var(--sans);font-size:.72rem;
  font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
.about-h{font-size:clamp(2.1rem,1.5rem + 2.6vw,3.6rem);margin-bottom:1.6rem}
.about-fig{position:sticky;top:110px}
@media (max-width:900px){.about-fig{position:static}}

/* 26.10.2026: home, her texts */
.hx-lede2{margin-top:1rem;max-width:46ch;color:var(--ink-soft)}
.h-quote-1{padding-top:clamp(4rem,8vw,7rem)}
.h-quote-1 blockquote{max-width:44ch;font-style:italic}
.h-quote .h-by{margin-top:1.2rem;font-size:.72rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-faint)}

/* 26.10.2026: a page for each catalogue and article, its pages large and readable */
.pub-cover{cursor:pointer}
.pub figcaption a{color:inherit}
.pub-wrap{max-width:1180px}
.pub-pages{display:flex;flex-direction:column;align-items:center;gap:2.6rem;margin-top:2.4rem}
.pub-page{display:block;padding:0;border:0;background:none;cursor:zoom-in;max-width:100%}
.pub-page img{display:block;max-width:100%;width:auto;height:auto;max-height:88vh;
  box-shadow:0 24px 54px -34px rgba(var(--shade),.55)}
/* 26.10.2026: the four studio photographs beside "Education", an even 2 x 2 */
.about-row .grid-2{grid-template-columns:1fr 1fr;gap:1rem}
.about-row .grid-2 img{aspect-ratio:1;object-fit:cover;height:auto}

/* 26.10.2026: Tenor Sans, chosen by Ido for Hilda (her reference: Linotype Brewery on
   pierremariegiraud.com). Headings, menu, names of works and the small capital labels;
   long running text stays in Inter. Tenor has one weight and no italic, so nothing in
   it is set italic or bold (the browser would fake both). */
:root{--serif:"Tenor Sans","Optima","Segoe UI",sans-serif;--display:"Tenor Sans","Optima","Segoe UI",sans-serif}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;letter-spacing:.01em}
h1{font-size:clamp(2.5rem,1.6rem + 4.2vw,5.4rem)}
.nav a,.brand-sub,.eyebrow,.btn,.link-more,.foot-col h4,.about-quote footer,.h-quote .h-by,
.series-head .meta,.crumbs,.pub figcaption .pub-n,.menu-btn{font-family:var(--display);font-weight:400}
.nav a{font-size:.74rem;letter-spacing:.18em}
.work .t,.wcap .t,.lb-cap .t,.about-quote,.h-quote blockquote,.h-quote-1 blockquote{font-style:normal}
.lede,.statement,.about-quote,.h-quote blockquote{font-weight:400}
/* Tenor is wider than Fraunces: the hero line keeps to two lines */
.hx h1{font-size:clamp(2.4rem,1.3rem + 3.1vw,4.4rem);line-height:1.08}

/* 26.10.2026, Hilda: every picture on the site with the shadow of the cards on the Work
   page, around the frame (not inside the photograph), growing when the pointer is on it */
:root{--card-sh:0 2px 6px -3px rgba(var(--shade),.16),0 20px 46px -30px rgba(var(--shade),.5);
      --card-sh-up:0 4px 10px -5px rgba(var(--shade),.2),0 30px 64px -28px rgba(var(--shade),.55)}
.grid .work .frame,.h-tile picture,.h-pair figure > a,.wbig picture,.wroom-b picture{
  display:block;overflow:hidden;box-shadow:var(--card-sh);transition:box-shadow .35s,transform .35s}
.h-tile picture img,.h-pair figure > a img{display:block}
@media (hover:hover) and (pointer:fine){
  .grid .work:hover .frame,.h-tile:hover picture,.h-pair figure > a:hover,
  .wbig:hover picture,.wroom-b:hover picture{box-shadow:var(--card-sh-up);transform:translateY(-3px)}
}

/* 26.10.2026: the new visualisations mix tall and wide pictures; a two-column grid left
   big empty gaps under the wide ones, so the page flows in columns instead */
.grid.rooms{display:block;columns:2;column-gap:clamp(1.4rem,3vw,2.6rem)}
.grid.rooms > *{break-inside:avoid;display:block;margin-bottom:clamp(2rem,4vw,3.2rem)}
.grid.rooms .work{height:auto}
@media (max-width:680px){.grid.rooms{columns:1}}
/* 26.10.2026: the wide room picture under a work's record shares the class .wv of the
   small thumbnails and inherited their square, contained frame: the room sat in a square
   with bands of fill above and below (Ido, w-SA1076). It keeps its own shape. */
.wroom-b{width:100%}
.wroom-b img{aspect-ratio:auto;object-fit:fill;height:auto}

/* 26.10.2026, from the audit of the whole site */
/* long web addresses in the CV broke out of the page on a phone (419px at 375) */
.cv-row .it,.cv-row .it a{overflow-wrap:anywhere;word-break:break-word}
/* the Installation card is a room photograph, not a square: it fills its card */
.scard .frame img[src*="/md/"]{object-fit:cover}
/* the card shadow on the work page thumbnails, the home page room and the phone hero */
.wv{box-shadow:var(--card-sh);transition:box-shadow .3s,border-color .2s}
@media (hover:hover) and (pointer:fine){.wv:hover{box-shadow:var(--card-sh-up)}}
.home-room-a{display:block;box-shadow:var(--card-sh)}
@media (max-width:680px){.hx-fig img{box-shadow:var(--card-sh)}}
/* second audit: the IAC logo sits in a <picture>, and that wrapper shrank in the row,
   squeezing the logo sideways (about.html, cv.html) */
.iac picture,.iac-row picture{flex:0 0 auto;display:block}
.iac picture img{height:54px;width:auto}
.iac-row picture img{height:34px;width:auto}
/* 27.10.2026, Hilda: the publication pages are hard to read. Each page at the full width
   of the column (up to 1100px), not limited to the height of the screen */
.pub-page{width:100%}
.pub-page img{width:100%;max-height:none}
.pub-wrap{max-width:1100px;margin-inline:auto}

/* 27.10.2026, Hilda: Publications as a library. The covers stand on a shelf, side by
   side, the row scrolls sideways; a click opens the reader to leaf through */
.shelf-hint{margin-top:.6rem;color:var(--ink-faint);font-size:.9rem}
.shelf{position:relative;margin:0 calc(var(--pad) * -1) 1rem}
.shelf-row{display:flex;align-items:flex-start;gap:clamp(1.4rem,3vw,2.6rem);overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);padding:2.4rem var(--pad) 0;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.shelf-row::-webkit-scrollbar{display:none}
.book{flex:0 0 auto;margin:0;scroll-snap-align:start;width:min(46vw,210px);perspective:900px}
.book-cover{display:flex;align-items:flex-end;justify-content:center;height:280px;cursor:pointer;position:relative}
/* one continuous shelf under all the covers, scrolling with them */
.shelf-row{background-image:linear-gradient(180deg,#c9b9a1 0%,#b4a289 60%,#9d8b72 100%),
  linear-gradient(180deg,rgba(var(--shade),.28),rgba(var(--shade),0));
  background-repeat:no-repeat;background-attachment:local;
  background-size:100% 14px,100% 18px;background-position:0 calc(2.4rem + 280px),0 calc(2.4rem + 294px)}
.book-cover picture{display:block}
.book-cover img{display:block;max-height:270px;max-width:100%;width:auto;height:auto;
  box-shadow:-6px 0 0 -3px rgba(0,0,0,.08),0 18px 26px -14px rgba(var(--shade),.7);
  transform-origin:left bottom;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
@media (hover:hover) and (pointer:fine){
  .book-cover:hover img{transform:translateY(-10px) rotateY(-14deg);
    box-shadow:-10px 0 0 -4px rgba(0,0,0,.12),0 30px 36px -16px rgba(var(--shade),.75)}}
.book figcaption{margin-top:2.2rem}
.book figcaption .t{display:block;font-family:var(--serif);font-size:.95rem;line-height:1.3}
.book figcaption .n{display:block;margin-top:.35rem;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ember)}
.shelf-go{position:absolute;top:calc(2.4rem + 118px);z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:rgba(250,247,241,.92);color:var(--ink);font-size:1.6rem;line-height:1;cursor:pointer;box-shadow:var(--card-sh)}
.shelf-go.prev{left:calc(var(--pad) * .5)}
.shelf-go.next{right:calc(var(--pad) * .5)}
.shelf-go[disabled]{opacity:0;pointer-events:none}
@media (hover:none){.shelf-go{display:none}}

/* the reader */
.reader{position:fixed;inset:0;z-index:100000;display:none;flex-direction:column;
  background:rgba(28,23,18,.95);color:#f4efe6}
.reader.open{display:flex}
.rd-top{display:flex;align-items:baseline;gap:1rem;padding:1rem clamp(1rem,3vw,2rem)}
.rd-t{font-family:var(--serif);font-size:1.1rem}
.rd-m{font-size:.8rem;opacity:.7;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-x{background:none;border:0;color:inherit;font-size:2rem;line-height:1;cursor:pointer;padding:0 .3rem}
.rd-stage{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;
  perspective:1800px;overflow:hidden;padding:0 clamp(3.4rem,7vw,6rem)}
.rd-stage picture{display:flex;align-items:center;justify-content:center;max-width:100%;max-height:100%;height:100%}
.rd-page{max-width:100%;max-height:100%;width:auto;height:auto;display:block;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.8);transform-origin:left center;backface-visibility:hidden}
.rd-page.out-next{animation:turnOut .42s ease-in forwards}
.rd-page.in-next{animation:turnIn .45s ease-out}
.rd-page.out-prev{transform-origin:right center;animation:turnOutBack .42s ease-in forwards}
.rd-page.in-prev{transform-origin:right center;animation:turnInBack .45s ease-out}
@keyframes turnOut{to{transform:rotateY(-80deg);opacity:.2}}
@keyframes turnIn{from{transform:rotateY(60deg);opacity:0}to{transform:none;opacity:1}}
@keyframes turnOutBack{to{transform:rotateY(80deg);opacity:.2}}
@keyframes turnInBack{from{transform:rotateY(-60deg);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.rd-page{animation:none!important}}
.rd-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:52px;height:52px;border-radius:50%;
  border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.25);color:#fff;font-size:2rem;line-height:1;cursor:pointer}
.rd-prev{left:clamp(.5rem,2vw,1.5rem)}
.rd-next{right:clamp(.5rem,2vw,1.5rem)}
.rd-nav[disabled]{opacity:.2;cursor:default}
.rd-bottom{display:flex;align-items:center;justify-content:center;gap:1.4rem;padding:.9rem 1rem 1.2rem;font-size:.78rem;letter-spacing:.12em}
.rd-bottom a{color:inherit;opacity:.75;text-transform:uppercase}
@media (max-width:680px){.rd-stage{padding:0 .5rem}.rd-nav{width:40px;height:40px;font-size:1.5rem;background:rgba(0,0,0,.45)}}
/* while the reader is open the accessibility button steps aside */
html.reading #hm-a11y-btn{display:none!important}

/* 27.10.2026, Ido: the contact page redrawn. Her work beside the page, the e-mail large,
   the form in a quiet card */
.contact-layout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.contact-fig{margin:0;position:sticky;top:110px}
.contact-fig img{display:block;width:100%;height:auto;box-shadow:var(--card-sh)}
.contact-h{margin-bottom:1.6rem}
.contact-mail{margin:0 0 2.6rem}
.contact-mail .k{display:block;font-family:var(--display);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.4rem}
.contact-mail a{font-family:var(--display);font-size:clamp(1.3rem,1rem + 1vw,1.9rem);color:var(--ink);
  border-bottom:1px solid var(--line);padding-bottom:.15rem;transition:color .2s,border-color .2s}
.contact-mail a:hover{color:var(--ember);border-color:var(--ember)}
.contact-card{background:rgba(255,253,248,.7);border:1px solid var(--line-soft);padding:clamp(1.4rem,3vw,2.4rem);box-shadow:var(--card-sh)}
.contact-card h2{font-size:1.35rem;margin:0 0 1.6rem}
@media (max-width:900px){.contact-layout{grid-template-columns:1fr}.contact-fig{position:static;max-width:520px}}
@media (max-width:900px){.contact-fig{order:2;margin-top:2.4rem}}
/* 1.11.2026, Hilda: the hero changes between one work of each series (site.js) */
.hx-next{position:absolute;opacity:0;transition:opacity 1.6s ease-in-out;pointer-events:none}
.hx-next.on{opacity:1}
.hx-next img{width:100%;height:100%;max-height:none;box-shadow:none}
.exh-pub{white-space:nowrap;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ember);margin-inline-start:.5rem}
.exh-pub:hover{text-decoration:underline}
/* 1.11.2026: where a work was exhibited and published */
.wshown{margin-top:2.4rem;border-top:1px solid var(--line);padding-top:1.4rem}
.wshown h2{font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.9rem}
.wshown ul{list-style:none;margin:0;padding:0}
.wshown li{padding:.7rem 0;border-bottom:1px solid var(--line);line-height:1.45}
.wshown .k{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.2rem}
.wshown .l{display:block;font-size:.86rem;color:var(--ink-soft);margin-top:.15rem}
/* 1.11.2026, live check at 375px: the skip link parked 9999px outside the page widened the
   Hebrew contact page. Hidden by clipping instead, shown in place when it takes focus. */
.skip-link{inset-inline-start:0;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.skip-link:focus{clip-path:none;width:auto;height:auto;overflow:visible}
/* 1.11.2026: a quicker page turn in the reader (site.js waits for the next page instead) */
.rd-page.out-next,.rd-page.out-prev{animation-duration:.22s}
.rd-page.in-next,.rd-page.in-prev{animation-duration:.28s}
/* 1.11.2026: Japanese and Korean. Their own serif and sans, no slanted type (the scripts have
   no italic), and line breaking that keeps words whole */
:root[lang=ja]{--serif:"Noto Serif JP","Tenor Sans",serif;--sans:"Noto Sans JP",system-ui,sans-serif}
:root[lang=ko]{--serif:"Noto Serif KR","Tenor Sans",serif;--sans:"Noto Sans KR",system-ui,sans-serif}
:root[lang=ja] *,:root[lang=ko] *{font-style:normal}
:root[lang=ja] body{line-break:strict;word-break:normal}
:root[lang=ko] body{word-break:keep-all;overflow-wrap:anywhere}
:root[lang=ja] h1,:root[lang=ja] h2,:root[lang=ko] h1,:root[lang=ko] h2{letter-spacing:0;line-height:1.3}
/* five languages in the menu */
.langs a{white-space:nowrap}
/* 1.11.2026, Hilda: one large photograph of each series on the home page */
.h-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(1.5rem,3vw,3rem);row-gap:clamp(3rem,5vw,4.5rem)}
.h-big .h-cap{font-size:clamp(1.15rem,.95rem + .6vw,1.5rem)}
@media (max-width:680px){.h-grid2{grid-template-columns:1fr;row-gap:2.75rem}}
.hx-quote{margin:0 0 .9rem;font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,.95rem + .35vw,1.3rem);line-height:1.5;max-width:42ch}
.hx-by{margin:0 0 2.2rem;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.hx-by::before{content:"— "}
/* 1.11.2026, Ido: "the Hebrew font does not load". The Tenor Sans block above set the
   heading font for every language, and Tenor has no Hebrew, Japanese or Korean letters, so the
   Hebrew headings fell back to a system sans. Each script now gets its own heading font. */
:root[dir="rtl"]{--serif:"Noto Serif Hebrew",Georgia,serif;--display:"Noto Serif Hebrew",Georgia,serif}
:root[lang=ja]{--display:"Tenor Sans","Noto Serif JP",serif}
:root[lang=ko]{--display:"Tenor Sans","Noto Serif KR",serif}
/* Hebrew has no slanted letters and reads badly letter-spaced */
[dir="rtl"] .hx-quote,[dir="rtl"] .about-quote,[dir="rtl"] .h-quote blockquote{font-style:normal}
[dir="rtl"] .nav a,[dir="rtl"] .eyebrow,[dir="rtl"] .hx-by,[dir="rtl"] .h-by,[dir="rtl"] .btn,[dir="rtl"] .link-more,
[dir="rtl"] .foot-col h4,[dir="rtl"] .contact-mail .k,[dir="rtl"] .brand-sub{letter-spacing:0}
[dir="rtl"] .nav a{font-size:.95rem}
/* 11.11.2026, Hilda: the catalogue covers turned blue (selected) and opened only on a double click.
   No selection or tap highlight on the covers, so one click opens the reader */
.book-cover,.book-cover img{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-tap-highlight-color:transparent}
.book-cover:focus{outline:none}
.book-cover:focus-visible{outline:2px solid var(--ember);outline-offset:4px}
/* 11.11.2026: six languages (Spanish added) made the menu run off the right edge. Tighter
   spacing on narrower screens; between tablets and laptops the menu letters run smaller */
@media (min-width:1024px) and (max-width:1600px){
  .nav{gap:clamp(.6rem,1.15vw,1.5rem)}
  .nav a{letter-spacing:.1em}
  .langs{gap:.4rem;padding-left:.7rem}
}
@media (min-width:1024px) and (max-width:1180px){
  .nav a{font-size:.64rem;letter-spacing:.06em}
  .langs a,.langs span{font-size:.64rem;letter-spacing:.02em}
}
/* and below 1024px the menu folds into the Menu button, as on phones (it no longer fits a tablet) */
@media (max-width:1023px){
  .nav{position:fixed;inset:72px 0 auto 0;flex-direction:column;
    background:linear-gradient(180deg,#f8f5ef,#f1ece0);
    box-shadow:0 22px 40px -30px rgba(var(--shade),.9);
    align-items:flex-start;gap:0;padding:0 var(--pad) 1.5rem;border-bottom:1px solid var(--line);
    display:none}
  .nav.open{display:flex}
  .nav a{width:100%;padding:.9rem 0;border-bottom:1px solid var(--line-soft);font-size:.95rem;white-space:normal}
  .langs{border-left:0;padding-left:0;padding-top:.9rem;flex-wrap:wrap;gap:.6rem 1.1rem}
  .nav .langs a,.nav .langs span{width:auto;padding:.35rem 0;border-bottom:0;font-size:.8rem;letter-spacing:.06em;white-space:nowrap}
  [dir="rtl"] .langs{border-right:0;padding-right:0}
  .menu-btn{display:block}
}