/* Allura — red clay.
   Art direction: a ceramicist's material sample book. Grain over every ground,
   hairline rules as the connective device, a catalogue that numbers itself, and
   the three clay states shown as actual colour fields rather than described. */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink-body);
  font-family:var(--face-body);font-size:var(--step-0);line-height:1.6;
  -webkit-font-smoothing:antialiased;position:relative}
/* The tooth. Over the whole page, under every interaction. */
body::before{content:"";position:fixed;inset:0;z-index:999;pointer-events:none;
  background:var(--grain);opacity:.055;mix-blend-mode:multiply}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--face-display);font-weight:500;margin:0;
  text-wrap:balance;color:var(--ink);letter-spacing:var(--tracking-display)}
p{margin:0}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s-2);top:var(--s-2);background:var(--ground);
  padding:var(--s-1);z-index:1000}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.label{font-family:var(--face-body);font-size:var(--step--1);font-weight:600;
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--accent)}
.measure{max-width:var(--measure)}
.shell{max-width:var(--page);margin-inline:auto;padding-inline:var(--s-3)}

/* ============ header ============ */
.site-head{display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-2) var(--s-3);position:sticky;top:0;z-index:40;
  background:var(--ground);border-bottom:var(--rule)}
.mark{margin-inline-end:auto}
.mark img{width:132px}
.site-nav{display:flex;gap:var(--s-3);font-size:var(--step--1);
  letter-spacing:var(--tracking-label);text-transform:uppercase;font-weight:600}
.site-nav a{display:inline-flex;align-items:center;min-height:44px;
  position:relative;transition:color .18s ease}
.site-nav>.nav-item>a::before{content:"";position:absolute;inset-inline:0;
  bottom:12px;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.site-nav>.nav-item>a:hover::before,
.site-nav>.nav-item>a.here::before{transform:scaleX(1)}
.site-nav a:hover{color:var(--accent)}
.nav-toggle{display:none;background:none;border:var(--rule);color:var(--ink);
  font:inherit;font-size:var(--step--1);font-weight:600;min-height:44px;
  padding-inline:var(--s-2);letter-spacing:var(--tracking-label);
  text-transform:uppercase;cursor:pointer}

.nav-item{position:relative}
.has-sub>a::after{content:"";display:inline-block;margin-inline-start:.5em;
  border:.28em solid transparent;border-top-color:currentColor;
  transform:translateY(.2em)}
.submenu{display:none;position:absolute;inset-inline-start:0;inset-block-start:100%;
  min-width:15rem;background:var(--ground);border:var(--rule);
  padding:var(--s-1) 0;z-index:50}
.nav-item:hover>.submenu,.nav-item:focus-within>.submenu{display:block}
.submenu a{display:flex;align-items:center;min-height:44px;
  padding:var(--s-1) var(--s-2);text-transform:none;letter-spacing:0;
  font-weight:400;font-size:var(--step--1);transition:background .18s ease}
.submenu a:hover{background:var(--surface)}

@media (max-width:860px){
  .nav-toggle{display:block}
  .site-nav{display:none;position:absolute;inset-block-start:100%;inset-inline:0;
    flex-direction:column;gap:0;background:var(--ground);
    padding:var(--s-2) var(--s-3);border-bottom:var(--rule)}
  .site-nav.open{display:flex}
  .nav-item{width:100%}
  .submenu{display:block;position:static;border:0;min-width:0;background:none;
    padding:0 0 var(--s-1) var(--s-2)}
}

/* ============ hero — type over image, no box ============ */
/* The hero holds a 16:9 plate and lets it keep its own proportions, so the
   whole studio reads instead of a tight centre crop. Height follows the image,
   capped so it never eats the fold on a short window. */
.hero{position:relative;display:grid;align-items:end;overflow:hidden;
  isolation:isolate;aspect-ratio:16/9;max-height:78vh;min-height:24rem}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 42%;z-index:-2}
@media (max-width:760px){
  /* A 16:9 plate on a phone is a letterbox sliver — give it room vertically. */
  .hero{aspect-ratio:4/5;max-height:none}
  .hero>img{object-position:center 46%}
}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,var(--light) 0%,transparent 62%)}
.hero-copy{padding:var(--s-5) var(--s-3) var(--s-4);
  max-width:var(--page);margin-inline:auto;width:100%;color:var(--ground)}
.hero-copy .label{color:var(--ground)}
.hero h1{font-size:var(--step-5);line-height:.86;color:var(--ground);
  margin:var(--s-2) 0 var(--s-2);text-indent:-.04em}
.hero-sub{font-size:var(--step-1);font-weight:300;color:var(--ground);
  max-width:28ch;border-top:1px solid var(--ground);padding-top:var(--s-2)}

/* ============ the catalogue — centred, symmetric ============ */
.catalogue{padding-block:var(--s-6) var(--s-5);text-align:center}
.cat-head{display:grid;justify-items:center;gap:var(--s-1);
  margin-bottom:var(--s-5)}
.cat-head h1,.cat-head h2{font-size:var(--step-3);max-width:20ch}
.cat-head .label{margin:0}
.cat-count{font-size:var(--step--1);letter-spacing:var(--tracking-label);
  text-transform:uppercase;font-weight:600;color:var(--taupe);
  font-variant-numeric:tabular-nums}
.cat-head::after{content:"";width:3rem;height:2px;background:var(--accent);
  margin-top:var(--s-2)}

.entries{display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--s-4) var(--s-3)}
.entry{flex:0 1 15rem;display:grid;grid-template-rows:auto auto auto 1fr;
  gap:var(--s-1);justify-items:center;cursor:pointer}
.entry-no{font-size:.68rem;font-weight:600;color:var(--accent);
  font-variant-numeric:tabular-nums;letter-spacing:var(--tracking-label);
  text-transform:uppercase}
.entry figure{margin:0;overflow:hidden;width:100%}
.entry figure img,.entry figure .no-photo{aspect-ratio:4/5;object-fit:cover;
  width:100%;transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.entry:hover figure img,.entry:focus-visible figure img{transform:scale(1.04)}
.entry h2,.entry h3{font-size:var(--step-1);line-height:1.15;max-width:14ch;
  display:flex;flex-direction:column;align-items:center;gap:var(--s-1);
  transition:color .18s ease;margin-top:var(--s-1)}
.entry:hover h2,.entry:hover h3{color:var(--accent)}
.entry p{font-size:var(--step--1);max-width:24ch;color:var(--taupe)}
.no-photo{background:var(--surface);position:relative}
.no-photo::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,transparent 0 10px,var(--ground) 10px 11px)}
.badge{font-family:var(--face-body);font-size:.62rem;font-weight:600;
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--accent);border:1px solid var(--accent);padding:.15em .5em;
  white-space:nowrap}

/* ============ the three states, as actual material ============ */
.states{display:grid;grid-template-columns:repeat(3,1fr);
  border-block:2px solid var(--ink)}
.state{padding:var(--s-5) var(--s-3) var(--s-4);min-height:18rem;
  display:grid;align-content:end;gap:var(--s-1)}
.state+.state{border-inline-start:var(--rule)}
.state:nth-child(1){background:var(--clay-raw)}   /* raw — grey-pink, darker */
.state:nth-child(2){background:var(--cream)}      /* dry — the palest it gets */
.state:nth-child(3){background:var(--clay-fired);color:var(--ground)}
.state:nth-child(3) h3,.state:nth-child(3) .state-no{color:var(--ground)}
.state-no{font-size:var(--step--1);font-weight:600;color:var(--accent);
  font-variant-numeric:tabular-nums;letter-spacing:var(--tracking-label)}
.state h3{font-size:var(--step-2)}
.state p{font-size:var(--step--1);max-width:26ch}

/* ============ explore — asymmetric, image bleeds off the edge ============ */
.explore{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  align-items:start;gap:var(--s-5);padding-block:var(--s-5);
  max-width:var(--page);margin-inline:auto;padding-inline:var(--s-3)}
.explore-copy h2{font-size:var(--step-3);margin-bottom:var(--s-2)}
.explore-copy p{font-size:var(--step-1);font-weight:300;max-width:34ch;
  margin-bottom:var(--s-2)}
.explore-copy .rule{width:4rem;height:2px;background:var(--accent);
  margin-bottom:var(--s-3)}
.explore figure{margin:0;position:relative}
.explore figure img{width:100%;aspect-ratio:5/4;object-fit:cover}
.explore figcaption{font-size:var(--step--1);margin-top:var(--s-1);color:var(--taupe)}
@media (min-width:1025px){
  .explore{padding-inline-end:0}
  .explore figure{margin-inline-end:calc((100vw - var(--page))/-2)}
}
@media (max-width:1024px){.explore{grid-template-columns:1fr;gap:var(--s-3)}}

/* ============ collection + prose pages ============ */
.page-head{padding-block:var(--s-5) var(--s-3);border-bottom:2px solid var(--ink);
  max-width:var(--page);margin-inline:auto;padding-inline:var(--s-3)}
.page-head h1{font-size:var(--step-4);margin-block:var(--s-1) var(--s-2)}
.page-head .lede{font-size:var(--step-1);font-weight:300;max-width:38ch}
.studio-note{border-inline-start:3px solid var(--accent);padding:var(--s-2);
  background:var(--surface);max-width:var(--measure);font-size:var(--step--1);
  margin-top:var(--s-3)}

.products{max-width:var(--page);margin:var(--s-4) auto var(--s-6);
  padding-inline:var(--s-3);display:grid;
  grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:var(--s-3) var(--s-3)}
.product{display:grid;gap:var(--s-1);align-content:start}
.product figure{margin:0;overflow:hidden}
.product img,.product .no-photo{aspect-ratio:4/5;object-fit:cover;width:100%;
  transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.product:hover img{transform:scale(1.04)}
.product h3{font-size:var(--step-0);padding-top:var(--s-1);border-top:var(--rule)}
.product p{font-size:var(--step--1);color:var(--taupe)}

.prose{max-width:var(--measure);margin:var(--s-5) auto var(--s-6);
  padding-inline:var(--s-3)}
.prose h1{font-size:var(--step-4);margin-block:var(--s-1) var(--s-3)}
.prose h2{font-size:var(--step-2);margin:var(--s-4) 0 var(--s-2);
  padding-top:var(--s-2);border-top:var(--rule)}
.prose p,.prose ul{margin-bottom:var(--s-2)}
.prose .lede{font-size:var(--step-1);font-weight:300}
.prose ul{padding-inline-start:1.1em}
.prose li{margin-bottom:var(--s-1)}
.prose a{border-bottom:1px solid var(--accent);transition:color .18s ease}
.prose a:hover{color:var(--accent)}

/* ============ footer ============ */
.site-foot{background:var(--accent);color:var(--ground);margin-top:var(--s-5);
  padding:var(--s-5) var(--s-3) var(--s-4)}
.foot-grid{max-width:var(--page);margin-inline:auto;display:grid;
  grid-template-columns:auto 1fr;gap:var(--s-4);align-items:start}
.foot-mark img{width:150px}
.foot-lines{display:grid;gap:var(--s-1);justify-items:end;text-align:end}
.foot-line{font-family:var(--face-display);font-size:var(--step-2);
  letter-spacing:var(--tracking-display)}
.foot-note{font-size:var(--step--1)}
.disclosure{max-width:var(--page);margin:var(--s-4) auto 0;padding-top:var(--s-2);
  border-top:1px solid var(--surface);font-size:.72rem;max-width:var(--page);
  line-height:1.6}
@media (max-width:760px){
  .foot-grid{grid-template-columns:1fr;gap:var(--s-3)}
  .foot-lines{justify-items:start;text-align:start}
  .states{grid-template-columns:1fr}
  .state+.state{border-inline-start:0;border-top:var(--rule)}
  .state{min-height:0;padding-block:var(--s-4) var(--s-3)}
  .entry+.entry{padding-inline-start:0;border-inline-start:0}
  .entry{padding-inline:0}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;
    animation-iteration-count:1!important;transition-duration:.01ms!important;
    scroll-behavior:auto!important}
}