/* ==========================================================================
   OHA Resin — gallery labels
   Work first, caption second. One stylesheet serves LTR and RTL.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,200;6..72,300;6..72,400;6..72,500&family=Karla:wght@400;500;600&family=Amiri:wght@400;700&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600&display=swap');

:root{
  /* Taken off the work itself: plaster wall, walnut, and the resin's own green. */
  --paper:#F7F4EE;
  --paper-2:#FFFFFF;
  --ink:#322E29;
  --ink-2:#6E665D;

  --line:#E3DBCF;
  --oak:#E5D5BC;
  --walnut:#6B472A;
  --sea:#3E9186;
  --sea-ink:#2C6F66;
  --blush:#C98B8E;
  --gold:#B8912F;      /* the badge's metal, used only on marks and the live swatch */

  --display:'Newsreader',Georgia,serif;
  --text:'Karla',system-ui,sans-serif;

  /* Quiet scale. The photographs are loud enough. */
  --s-2:clamp(.72rem,.7rem + .1vw,.78rem);
  --s-1:clamp(.84rem,.81rem + .14vw,.92rem);
  --s0:clamp(1rem,.96rem + .18vw,1.08rem);
  --s1:clamp(1.18rem,1.1rem + .34vw,1.42rem);
  --s2:clamp(1.5rem,1.3rem + .9vw,2.15rem);
  --s3:clamp(2rem,1.55rem + 1.9vw,3.3rem);
  --s4:clamp(2.5rem,1.7rem + 3.4vw,4.75rem);

  --gutter:clamp(1.25rem,5vw,4rem);
  --stack:clamp(4.5rem,9vw,8.5rem);
  --shell:78rem;
}

html[lang="ar"]{
  --display:'Amiri',Georgia,serif;
  --text:'IBM Plex Sans Arabic',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--text);
  font-size:var(--s0);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
html[lang="ar"] body{line-height:1.9}

img{max-width:100%;display:block;height:auto}
a{color:inherit}

::selection{background:var(--sea);color:#fff}

:focus-visible{outline:2px solid var(--sea-ink);outline-offset:3px;border-radius:2px}

section[id]{scroll-margin-block-start:5.5rem}

.shell{
  max-width:min(var(--shell),calc(100% - var(--gutter)*2));
  margin-inline:auto;
}

/* ------------------------------------------------------------------- header */

.top{
  position:sticky;inset-block-start:0;z-index:50;
  padding-block:1.1rem;
  background:rgba(247,244,238,.86);
  backdrop-filter:blur(10px);
  border-block-end:1px solid transparent;
  transition:border-color .25s ease;
}
.top.settled{border-block-end-color:var(--line)}

.top-inner{display:flex;align-items:center;gap:1.25rem}

.mark{
  font-family:var(--display);
  font-size:1.05rem;font-weight:400;
  letter-spacing:.14em;
  text-decoration:none;
  margin-inline-end:auto;
}
html[lang="ar"] .mark{letter-spacing:.1em}

.nav{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.1rem)}
.nav a{
  font-size:var(--s-1);color:var(--ink-2);text-decoration:none;
  padding-block:.2rem;
  border-block-end:1px solid transparent;
  transition:color .2s,border-color .2s;
}
.nav a:hover,.nav a:focus-visible{color:var(--ink);border-block-end-color:var(--sea)}
@media (max-width:720px){.nav .hide-sm{display:none}}
.nav .lang{color:var(--sea-ink);font-weight:500}

/* --------------------------------------------------------------------- hero */
/* The piece is shown, then captioned. Same order as a wall in a gallery. */

.hero{padding-block:clamp(1.5rem,4vw,3rem) var(--stack)}

.hero-frame{
  position:relative;
  background:var(--paper-2);
  padding:clamp(.5rem,1.2vw,.85rem);
  margin-block-end:.9rem;
}
.hero-frame img{
  width:100%;
  aspect-ratio:16/9;
  max-height:min(48vh,560px);
  object-fit:cover;
  object-position:center 62%;
}
@media (max-width:640px){.hero-frame img{aspect-ratio:4/5;max-height:46vh}}

/* The tint layers sit on top of each other and cross-fade, so the room and the
   light hold still while only the pour changes. */
.pour-layer{
  position:absolute;
  inset:clamp(.5rem,1.2vw,.85rem);
  width:auto;
  opacity:0;
  transition:opacity .55s ease;
}
.pour-layer.is-on{opacity:1}
@media (prefers-reduced-motion:reduce){.pour-layer{transition:none}}

.pour-pick{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:.85rem 1.1rem;
  margin-block-end:clamp(2rem,4vw,3.25rem);
}
.swatches{display:flex;gap:.5rem}
.sw{
  inline-size:1.6rem;block-size:1.6rem;
  padding:0;border-radius:50%;cursor:pointer;
  border:1px solid rgba(50,46,41,.22);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.55);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.sw:hover{transform:scale(1.12)}
.sw[aria-pressed="true"]{
  border-color:var(--gold);
  box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--gold);
}
.sw-sea{background:linear-gradient(150deg,#8FD8CE,#2E8C86)}
.sw-rose{background:linear-gradient(150deg,#F0B9C2,#B8546E)}
.sw-amber{background:linear-gradient(150deg,#F6D79B,#C68A24)}
.sw-clear{background:linear-gradient(150deg,#FFFFFF,#DCE4E2)}

.pour-now{
  margin:0;
  font-size:var(--s-1);
  color:var(--ink-2);
}
.pour-now b{font-weight:500;color:var(--ink)}

/* --- the badge, beside the wordmark --- */
.mark{display:inline-flex;align-items:center;gap:.6rem}
.mark .badge{inline-size:1.7rem;block-size:1.7rem;flex:none}
.foot .mark .badge{inline-size:1.35rem;block-size:1.35rem}

.hero-label{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(1.5rem,5vw,4.5rem);
  align-items:end;
}
@media (max-width:820px){.hero-label{grid-template-columns:1fr;gap:1.75rem;align-items:start}}

.hero-label h1{
  font-family:var(--display);
  font-size:var(--s4);
  font-weight:200;
  line-height:1.08;
  letter-spacing:-.015em;
  margin:0;
  text-wrap:balance;
}
html[lang="ar"] .hero-label h1{
  font-size:clamp(2.1rem,1.45rem + 2.7vw,3.85rem);
  font-weight:400;line-height:1.5;letter-spacing:0;
}

.hero-side p{
  margin:0 0 1.5rem;
  color:var(--ink-2);
  max-width:38ch;
}

/* --------------------------------------------------------------------- links */

.acts{display:flex;flex-wrap:wrap;gap:.65rem}

.btn{
  display:inline-block;
  font-family:var(--text);font-size:var(--s-1);font-weight:500;
  text-decoration:none;cursor:pointer;
  padding:.72rem 1.5rem;
  border-radius:999px;
  border:1px solid transparent;
  transition:background .2s,border-color .2s,color .2s;
}
.btn-fill{background:var(--sea-ink);color:#fff}
.btn-fill:hover{background:#245B54}
.btn-line{border-color:var(--line);color:var(--ink)}
.btn-line:hover{border-color:var(--ink);background:var(--paper-2)}

/* The quiet inline link used inside body copy and labels. */
.tlink{
  color:var(--sea-ink);text-decoration:none;
  border-block-end:1px solid rgba(62,145,134,.4);
  padding-block-end:1px;
  transition:border-color .2s;
}
.tlink:hover{border-block-end-color:var(--sea-ink)}

/* --------------------------------------------------------------------- works */

.work{padding-block-end:var(--stack)}

.work-row{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(1.75rem,5vw,4.5rem);
  align-items:center;
}
.work-row + .work-row{margin-block-start:var(--stack)}
.work-row.flip > .work-fig{order:2}
@media (max-width:860px){
  .work-row,.work-row.flip{grid-template-columns:1fr;gap:1.75rem}
  .work-row.flip > .work-fig{order:0}
}

.work-fig{margin:0;background:var(--paper-2);padding:clamp(.4rem,1vw,.7rem)}
.work-fig img{width:100%;aspect-ratio:4/3;object-fit:cover}
.work-fig.square img{aspect-ratio:1}

.work-body h2{
  font-family:var(--display);
  font-size:var(--s3);font-weight:200;
  line-height:1.12;letter-spacing:-.012em;
  margin:0 0 1rem;
  text-wrap:balance;
}
html[lang="ar"] .work-body h2{
  font-size:clamp(1.7rem,1.3rem + 1.5vw,2.7rem);
  font-weight:400;line-height:1.5;letter-spacing:0;
}
.work-body p{margin:0 0 1.5rem;color:var(--ink-2);max-width:44ch}

/* ------------------------------------------------------------------- labels */
/* A gallery label: a hairline, the name, then the facts. Nothing else. */

.label{
  border-block-start:1px solid var(--line);
  padding-block-start:.85rem;
  display:grid;gap:.2rem;
}
.label dt{
  font-family:var(--text);
  font-size:var(--s-1);font-weight:500;
  color:var(--ink);
  margin:0;
}
.label dd{
  margin:0;
  font-size:var(--s-1);
  color:var(--ink-2);
}

/* ----------------------------------------------------------------- section  */

.lead{
  max-width:46ch;
  margin-block-end:clamp(2.25rem,5vw,3.75rem);
}
.lead h2{
  font-family:var(--display);
  font-size:var(--s3);font-weight:200;
  line-height:1.12;letter-spacing:-.012em;
  margin:0 0 .75rem;
}
html[lang="ar"] .lead h2{
  font-size:clamp(1.7rem,1.3rem + 1.5vw,2.7rem);
  font-weight:400;line-height:1.5;letter-spacing:0;
}
.lead p{margin:0;color:var(--ink-2)}

/* ------------------------------------------------------------------ pieces */

.pieces{padding-block-end:var(--stack)}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,25rem),1fr));
  gap:clamp(1.5rem,3.5vw,2.75rem);
}

.piece figure{margin:0;background:var(--paper-2);padding:clamp(.35rem,.9vw,.6rem)}
.piece img{
  width:100%;aspect-ratio:1;object-fit:cover;
  transition:opacity .3s ease;
}
.piece:hover img{opacity:.88}
.piece .label{margin-block-start:1rem}

/* ------------------------------------------------------------------ making */
/* A real sequence, so it is marked — by elapsed days, since the wait is the story. */

.making{padding-block-end:var(--stack)}

.days{list-style:none;padding:0;margin:0;border-block-start:1px solid var(--line)}
.day{
  display:grid;
  grid-template-columns:9rem minmax(0,1fr);
  gap:clamp(1rem,3vw,2.5rem);
  padding-block:1.6rem;
  border-block-end:1px solid var(--line);
  align-items:baseline;
}
@media (max-width:760px){.day{grid-template-columns:1fr;gap:.35rem}}

.day-when{
  font-family:var(--display);
  font-size:var(--s1);font-weight:400;
  color:var(--sea-ink);
  line-height:1.2;
}
html[lang="ar"] .day-when{font-weight:400}
.day-when span{
  display:block;
  font-family:var(--text);font-size:var(--s-2);
  color:var(--ink-2);margin-block-start:.15rem;
}
.day h3{
  font-family:var(--text);
  font-size:var(--s0);font-weight:600;
  margin:0 0 .3rem;
}
.day p{margin:0;color:var(--ink-2);font-size:var(--s-1);max-width:56ch}
.day-when{margin:0}

/* ------------------------------------------------------------------- order */

.order{
  background:var(--paper-2);
  padding-block:var(--stack);
  border-block:1px solid var(--line);
}

.order-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(2rem,6vw,5rem);
  align-items:start;
}
@media (max-width:860px){.order-grid{grid-template-columns:1fr;gap:2.5rem}}

.form{display:grid;gap:1rem}
.field{display:grid;gap:.35rem}
.field label{font-size:var(--s-1);font-weight:500}
.field input,.field select,.field textarea{
  font-family:var(--text);font-size:var(--s0);
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:4px;
  padding:.75rem .9rem;
  width:100%;
  transition:border-color .18s,background .18s;
}
html[lang="ar"] .field input,html[lang="ar"] .field select,html[lang="ar"] .field textarea{font-family:var(--text)}
.field textarea{resize:vertical;min-height:6.5rem;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--sea);background:var(--paper-2);
}
.field input::placeholder,.field textarea::placeholder{color:#A79E93}
.field select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 19px) 1.25rem,calc(100% - 14px) 1.25rem;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
html[lang="ar"] .field select{background-position:19px 1.25rem,24px 1.25rem}

.pair{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:560px){.pair{grid-template-columns:1fr}}

.pot{position:absolute;inset-inline-start:-9999px;opacity:0;height:0;width:0}

.send-row{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem}
.fineprint{margin:0;font-size:var(--s-2);color:var(--ink-2)}

.msg{padding:.75rem 1rem;border-radius:4px;font-size:var(--s-1);line-height:1.5;display:none}
.msg.ok{display:block;background:rgba(62,145,134,.1);border:1px solid rgba(62,145,134,.45);color:var(--sea-ink)}
.msg.bad{display:block;background:rgba(201,139,142,.14);border:1px solid rgba(201,139,142,.5);color:#8E4B4E}

.reach{list-style:none;padding:0;margin:1.75rem 0 0;display:grid;gap:.85rem}
.reach a{
  display:inline-flex;align-items:center;gap:.6rem;
  text-decoration:none;font-size:var(--s-1);color:var(--ink);
}
.reach a:hover{color:var(--sea-ink)}
.reach svg{width:17px;height:17px;flex:none;color:var(--sea)}

/* ------------------------------------------------------------------ footer */

.foot{
  padding-block:2.25rem;
  font-size:var(--s-1);color:var(--ink-2);
}
.foot-inner{display:flex;flex-wrap:wrap;gap:.75rem 2rem;align-items:center}
.foot .mark{margin-inline-end:auto;font-size:var(--s-1);color:var(--ink)}
.foot a{text-decoration:none}
.foot a:hover{color:var(--ink)}

/* ------------------------------------------------------------------ motion */
/* One moment: the hero settles once on load. Nothing else moves on its own. */

@media (prefers-reduced-motion:no-preference){
  .hero-frame,.hero-label{opacity:0;animation:settle .9s cubic-bezier(.22,.7,.3,1) forwards}
  .hero-frame{animation-delay:.05s}
  .hero-label{animation-delay:.28s}
  @keyframes settle{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* --------------------------------------------------------------- utilities */
.skip{
  position:absolute;inset-block-start:-100px;inset-inline-start:1rem;z-index:99;
  background:var(--sea-ink);color:#fff;padding:.65rem 1rem;
  border-radius:0 0 6px 6px;text-decoration:none;font-size:var(--s-1);font-weight:500;
}
.skip:focus{inset-block-start:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}