/* ============================================================
   ME MERAKI — Material Studies from Greece
   Single stylesheet. Design tokens in :root — the tokens ARE the
   brand; never change them without an explicit request.
   ============================================================ */

/* ---------- fonts (self-hosted, zero external requests) ---------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:300 600;font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:300 600;font-display:swap;
  src:url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:300 600;font-display:swap;
  src:url('../fonts/inter-greek.woff2') format('woff2');
  unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:300 600;font-display:swap;
  src:url('../fonts/inter-greek-ext.woff2') format('woff2');
  unicode-range:U+1F00-1FFF}

/* ---------- design tokens ---------- */
:root{
  --offwhite:#f4f2ec;
  --bone:#eae5d9;
  --limestone:#d9d2c2;
  --sand:#c2b7a1;
  --grey-warm:#8f887b;
  --graphite:#26251f;
  --navy:#1d2836;
  --line:rgba(38,37,31,.16);
  --line-soft:rgba(38,37,31,.08);

  --sans:'Inter',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;

  --wrap:min(1240px, 92vw);
  --track-wordmark:.35em;
  --track-label:.18em;

  --fs-display:clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem);
  --fs-statement:clamp(1.35rem, 1rem + 1.4vw, 2.1rem);
  --fs-title:clamp(1.05rem, .95rem + .4vw, 1.3rem);
  --fs-body:1rem;
  --fs-label:.72rem;
  --fs-meta:.8rem;

  --space-block:clamp(4.5rem, 3rem + 6vw, 8.5rem);
}

/* ---------- reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.65;
  color:var(--graphite);
  background:var(--offwhite);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0;font-weight:300;line-height:1.2}
p{margin:0 0 1em}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
::selection{background:var(--limestone)}

.wrap{width:var(--wrap);margin-inline:auto}

/* tracked uppercase label — the signature voice of the site */
.eyebrow{
  font-size:var(--fs-label);
  font-weight:500;
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  color:var(--graphite);
}
.meta{
  font-size:var(--fs-meta);
  color:var(--grey-warm);
  line-height:1.7;
  font-variant-numeric:tabular-nums;
}

/* ---------- header ---------- */
.site-head{
  position:absolute;
  inset:0 0 auto 0;
  z-index:10;
  padding-top:clamp(1.2rem, 3vw, 2.2rem);
}
.site-head.solid{position:static;padding-bottom:clamp(1.2rem, 3vw, 2rem);border-bottom:1px solid var(--line-soft)}
.head-row{display:flex;align-items:baseline;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.brand{
  font-size:.95rem;
  font-weight:500;
  letter-spacing:var(--track-wordmark);
  text-transform:uppercase;
  white-space:nowrap;
}
.site-nav{display:flex;gap:clamp(1.1rem, 2.5vw, 2.4rem);flex-wrap:wrap}
.site-nav a{
  font-size:var(--fs-label);
  font-weight:400;
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  padding-bottom:.25em;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, color .2s ease;
}
.site-nav a:hover{border-color:var(--graphite)}
.site-nav a[aria-current="page"]{border-color:var(--graphite)}
.lang-nav{display:flex;gap:1rem}
.lang-nav a{
  font-size:var(--fs-label);
  letter-spacing:var(--track-label);
  color:var(--grey-warm);
  padding-bottom:.25em;
  border-bottom:1px solid transparent;
  transition:color .2s ease,border-color .2s ease;
}
.lang-nav a:hover{color:var(--graphite)}
.lang-nav a[aria-current="true"]{color:var(--graphite);border-color:var(--graphite)}

/* ---------- hero (home) ---------- */
.hero{
  position:relative;
  min-height:92vh;
  display:flex;
  align-items:flex-end;
}
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-media::after{
  content:"";position:absolute;inset:auto 0 0 0;height:24%;
  background:linear-gradient(to top, rgba(244,242,236,.55), rgba(244,242,236,0));
}
.hero-media img,.hero-media .ph{width:100%;height:100%;object-fit:cover}
.hero-foot{
  position:relative;
  width:var(--wrap);
  margin-inline:auto;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  padding-bottom:clamp(1.6rem, 4vw, 3rem);
}
.hero-tag{font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:none;line-height:1.9}
.hero-scroll{font-size:1.1rem;text-decoration:none;line-height:1}

/* ---------- statement ---------- */
.statement{padding:var(--space-block) 0;text-align:center}
.statement h1,.statement p.big{
  font-size:var(--fs-statement);
  font-weight:300;
  line-height:1.45;
  max-width:26em;
  margin-inline:auto;
}

/* ---------- generic section ---------- */
.block{padding:calc(var(--space-block) * .6) 0 var(--space-block)}
.sec-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1.5rem;
  padding-bottom:1.1rem;
  margin-bottom:2.2rem;
  border-bottom:1px solid var(--line-soft);
}
.sec-link{
  font-size:var(--fs-label);
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  color:var(--grey-warm);
  transition:color .2s ease;
}
.sec-link:hover{color:var(--navy)}

/* ---------- placeholder plates (until real photography arrives) ----------
   Abstract Cycladic light-and-shadow washes built from the tokens.
   Swap each .ph for an <img> as photos are delivered. */
.ph{background:var(--bone);position:relative;overflow:hidden}
/* real photographs inside fixed-ratio frames crop, never distort */
.study-card img,.study-row img,.study-hero img,.notes-grid img,
.object-card img,.journal-card img,.about-teaser img,.about-body img{
  width:100%;object-fit:cover;background:var(--bone);
}
.ph::after{content:"";position:absolute;inset:0}
.ph-light::after{background:linear-gradient(118deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 42%, rgba(38,37,31,.14) 100%)}
.ph-shadow::after{background:linear-gradient(206deg, rgba(38,37,31,.20) 0%, rgba(38,37,31,0) 46%, rgba(255,255,255,.35) 100%)}
.ph-stone{background:var(--limestone)}
.ph-stone::after{background:linear-gradient(160deg, rgba(255,255,255,.4) 0%, rgba(38,37,31,.12) 88%)}
.ph-sand{background:var(--sand)}
.ph-sand::after{background:linear-gradient(24deg, rgba(38,37,31,.16) 0%, rgba(255,255,255,.38) 78%)}
.ph-sea{background:color-mix(in srgb, var(--navy) 45%, var(--graphite))}
.ph-sea::after{background:linear-gradient(190deg, rgba(244,242,236,.32) 0%, rgba(29,40,54,.15) 60%)}
.ph-wall{background:var(--offwhite)}
.ph-wall::after{background:linear-gradient(135deg, rgba(255,255,255,.7) 0%, rgba(194,183,161,.35) 55%, rgba(38,37,31,.22) 100%)}

/* ---------- studies ---------- */
.studies-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:clamp(1rem, 2vw, 1.6rem);
}
.study-card .ph,.study-card img{aspect-ratio:4/5}
.study-card figure{margin:0}
.study-num{display:block;margin-top:1rem;font-size:var(--fs-meta);color:var(--grey-warm);letter-spacing:var(--track-label)}
.study-name{
  display:block;
  margin-top:.3rem;
  font-size:var(--fs-label);
  font-weight:500;
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  line-height:1.6;
}
.study-card a{display:block}
.study-card .rule{display:block;width:1.4rem;height:1px;background:var(--graphite);margin-top:.7rem;transition:width .25s ease}
.study-card a:hover .rule{width:2.6rem}

/* studies index page: larger rows */
.study-row{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(1.5rem, 4vw, 4rem);
  padding:clamp(2rem, 4vw, 3.5rem) 0;
  border-bottom:1px solid var(--line-soft);
  align-items:center;
}
.study-row .ph,.study-row img{aspect-ratio:5/4}
.study-row h2{font-size:var(--fs-title);font-weight:500;letter-spacing:var(--track-label);text-transform:uppercase;margin:.4rem 0 1rem}
.study-row .question{font-size:var(--fs-statement);font-weight:300;line-height:1.45;max-width:22em;margin:0 0 1.4rem}

/* ---------- field notes ---------- */
.notes-grid{
  display:grid;
  grid-template-columns:repeat(9, 1fr);
  grid-auto-rows:clamp(70px, 9vw, 120px);
  gap:clamp(.6rem, 1.2vw, 1rem);
}
.notes-grid .ph,.notes-grid img{width:100%;height:100%;object-fit:cover}
.note{margin:0}
.n-a{grid-column:span 2;grid-row:span 2}
.n-b{grid-column:span 2;grid-row:span 2}
.n-c{grid-column:span 2;grid-row:span 2}
.n-d{grid-column:span 3;grid-row:span 2}
.n-e{grid-column:span 3;grid-row:span 1}
.n-f{grid-column:span 2;grid-row:span 1}
.n-g{grid-column:span 2;grid-row:span 1}
.n-h{grid-column:span 2;grid-row:span 1}

/* ---------- objects ---------- */
.objects-grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:clamp(1rem, 2vw, 1.6rem);
}
.objects-grid.archive{grid-template-columns:repeat(4, 1fr);row-gap:3rem}
.object-card figure{margin:0}
.object-card .ph,.object-card img{aspect-ratio:4/5}
.object-card .code{
  display:block;
  margin-top:1rem;
  font-size:var(--fs-meta);
  font-weight:500;
  letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
}
.object-card .rec{margin:.35rem 0 0}
.object-card .rec span{display:block}
.availability{color:var(--graphite)}
.availability.sold,.availability.collection{color:var(--grey-warm)}

/* ---------- about teaser / journal ---------- */
.duo{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(2rem, 5vw, 5rem);
  align-items:start;
}
.about-teaser .ph,.about-teaser img{aspect-ratio:4/5;max-width:340px}
.about-text p{max-width:34em}
.readmore{
  font-size:var(--fs-label);
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  border-bottom:1px solid var(--graphite);
  padding-bottom:.25em;
  transition:color .2s ease,border-color .2s ease;
}
.readmore:hover{color:var(--navy);border-color:var(--navy)}

.journal-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(1.2rem, 2.5vw, 2rem);
}
.journal-card figure{margin:0}
.journal-card .ph,.journal-card img{aspect-ratio:4/3}
.journal-card h3{font-size:var(--fs-title);font-weight:400;margin-top:1rem}
.journal-card time,.journal-card .meta{display:block;margin-top:.3rem}

/* journal index: editorial list */
.journal-list .journal-entry{
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(1.5rem, 4vw, 4rem);
  padding:clamp(2rem, 4vw, 3rem) 0;
  border-bottom:1px solid var(--line-soft);
}
.journal-list .ph,.journal-list img{aspect-ratio:4/3}
.journal-entry h2{font-size:var(--fs-display);font-weight:300;margin:.2rem 0 .8rem}
.journal-entry p{max-width:36em}

/* ---------- page hero (inner pages) ---------- */
.page-hero{padding:calc(var(--space-block) * .8) 0 calc(var(--space-block) * .5)}
.page-hero h1{font-size:var(--fs-display);font-weight:300;max-width:18em;margin-top:1.2rem}
.page-hero .standfirst{font-size:var(--fs-title);font-weight:300;color:var(--grey-warm);max-width:34em;margin-top:1.2rem}

/* study page */
.study-hero figure{margin:0}
.study-hero .ph,.study-hero img{aspect-ratio:21/9;width:100%}
.q-loc{margin-top:1.6rem}
.qa .prose{margin-top:1rem}
.qa{
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(1.5rem, 4vw, 4rem);
  padding:var(--space-block) 0;
}
.qa .question{font-size:var(--fs-statement);font-weight:300;line-height:1.45;margin:0}
.prose{max-width:38em}
.prose p{margin-bottom:1.2em}
.tests{list-style:none;margin:0;padding:0;max-width:44em}
.tests li{
  display:grid;
  grid-template-columns:8em 1fr;
  gap:1.5rem;
  padding:1rem 0;
  border-bottom:1px solid var(--line-soft);
}

/* ---------- journal article (field note) ---------- */
.article-body{padding:calc(var(--space-block) * .7) 0 var(--space-block)}
.article-body .prose{margin-inline:auto}
.article-fig{margin:3rem auto;max-width:52em}
.article-fig figcaption{margin-top:.8rem}
.fn-sig{margin:3.5rem auto 0;max-width:38em;padding-top:1.6rem;border-top:1px solid var(--line)}
.fn-sig .eyebrow{display:block;margin-bottom:.7rem}
.fn-sig p{font-size:var(--fs-title);font-weight:300;color:var(--grey-warm);margin:0;line-height:1.5}
.backlink{max-width:38em;margin:3rem auto 0}

/* ---------- about page ---------- */
.about-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,5rem);padding-bottom:var(--space-block)}
.about-body .ph,.about-body img{aspect-ratio:4/5}

/* ---------- contact ---------- */
.contact-list{list-style:none;margin:2.5rem 0 0;padding:0;max-width:34em}
.contact-list li{
  display:grid;
  grid-template-columns:9em 1fr;
  gap:1.5rem;
  padding:1.1rem 0;
  border-bottom:1px solid var(--line-soft);
}
.contact-list a{border-bottom:1px solid var(--line);padding-bottom:.15em;transition:color .2s ease,border-color .2s ease}
.contact-list a:hover{color:var(--navy);border-color:var(--navy)}
/* contact form — inputs as hairline underlines, per the design language */
.contact-form{max-width:34em}
.contact-form .field{margin-bottom:1.8rem}
.contact-form label{
  display:block;
  font-size:var(--fs-label);
  font-weight:500;
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  margin-bottom:.55rem;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea{
  width:100%;
  padding:.65em .1em;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:transparent;
  font:inherit;
  color:var(--graphite);
}
.contact-form input:focus-visible,
.contact-form textarea:focus-visible{border-bottom-color:var(--navy)}
.contact-form textarea{resize:vertical;min-height:9em}
.contact-form .submit{
  font:inherit;
  font-size:var(--fs-label);
  font-weight:500;
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  background:var(--graphite);
  color:var(--offwhite);
  border:0;
  padding:1em 2.6em;
  cursor:pointer;
  transition:background .2s ease;
}
.contact-form .submit:hover{background:var(--navy)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{display:none;margin:1.5rem 0 0;color:var(--grey-warm)}
.form-note:target{display:block}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line-soft);padding:2.4rem 0 2.8rem;margin-top:var(--space-block)}
.foot-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:2rem;
  flex-wrap:wrap;
}
.foot-brand{display:flex;flex-direction:column;gap:.4rem}
.foot-links{display:flex;gap:clamp(1.2rem, 3vw, 2.6rem);flex-wrap:wrap}
.foot-links a{
  font-size:var(--fs-label);
  letter-spacing:var(--track-label);
  text-transform:uppercase;
  color:var(--grey-warm);
  transition:color .2s ease;
}
.foot-links a:hover{color:var(--graphite)}
.foot-copy{font-size:var(--fs-meta);color:var(--grey-warm)}

/* ---------- reveal (progressive enhancement; no-JS = visible) ---------- */
@media (prefers-reduced-motion: no-preference){
  .js .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s ease}
  .js .reveal.in{opacity:1;transform:none}
}

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

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .studies-grid{grid-template-columns:repeat(3, 1fr)}
  .objects-grid{grid-template-columns:repeat(3, 1fr)}
  .objects-grid.archive{grid-template-columns:repeat(2, 1fr)}
  .notes-grid{grid-template-columns:repeat(6, 1fr)}
  .n-d{grid-column:span 3}
  .duo,.qa,.about-body,.study-row,.journal-list .journal-entry{grid-template-columns:1fr}
  .journal-grid{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width: 640px){
  .head-row{flex-direction:column;gap:1rem;align-items:flex-start}
  /* keep the vessel (at ~66% of the hero image) in the narrow crop */
  .hero-media img{object-position:66% center}
  /* studies, field notes, objects and journal stack full-width, one per row */
  .studies-grid{grid-template-columns:1fr}
  .objects-grid,.objects-grid.archive{grid-template-columns:1fr}
  .journal-grid{grid-template-columns:1fr}
  .notes-grid{grid-template-columns:1fr;grid-auto-rows:auto}
  .notes-grid .note{grid-column:auto;grid-row:auto}
  .notes-grid .ph,.notes-grid img{height:auto;aspect-ratio:3/2}
  .tests li,.contact-list li{grid-template-columns:1fr;gap:.3rem}
  .hero{min-height:78vh}
}