/* Stone Fruit Holdings
   Palette, type and layout tokens. Everything below derives from these. */

:root{
  --paper:      #e9e7de;  /* pale orchard stone */
  --paper-deep: #e0ddd2;  /* alternating band */
  --ink:        #14161a;
  --ink-soft:   #545a5f;
  --rule:       rgba(20,22,26,.16);
  --rule-firm:  rgba(20,22,26,.34);
  --plum:       #52203a;  /* bruised plum, the single accent */
  --plum-lift:  #6a2d4c;
  --on-plum:    #efe7dd;

  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --utility: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --gut: clamp(1.5rem, 5vw, 5rem);
  --max: 1240px;
  --prose: 60ch;
  --band: clamp(5.5rem, 11vh, 9.5rem);
}

*,*::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(--display);
  font-weight:350;
  font-size:clamp(1rem, .96rem + .2vw, 1.125rem);
  line-height:1.68;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
}

.wrap{ max-width:var(--max); margin:0 auto; padding-inline:var(--gut); }

/* ---------- shared type ---------- */

.eyebrow{
  font-family:var(--utility);
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0;
}

h1,h2,h3{ font-weight:250; margin:0; letter-spacing:-.015em; }

h2{
  font-size:clamp(1.65rem, 1.1rem + 1.6vw, 2.25rem);
  line-height:1.15;
  max-width:22ch;
}

p{ margin:0 0 1.35em; }
p:last-child{ margin-bottom:0; }

.prose{ max-width:var(--prose); color:#22262b; }

a{ color:inherit; }

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

/* ---------- the mark ---------- */

/* Presentation attributes live on the symbol itself: document CSS does not
   cross the <use> shadow boundary, so classes on cloned shapes never match. */
.mark{ display:block; color:currentColor; }

/* ---------- masthead ---------- */

.masthead{
  position:sticky; top:0; z-index:20;
  background:var(--paper);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease;
}
.masthead.is-stuck{ border-bottom-color:var(--rule); }

/* The bar is paper coloured, so it has to invert while the plum band is behind it,
   otherwise a light strip floats over the dark section. */
.masthead{ transition:border-color .3s ease, background-color .35s ease, color .35s ease; }
.masthead.on-dark{ background:var(--plum); border-bottom-color:rgba(239,231,221,.16); }
.masthead.on-dark .lockup-name,
.masthead.on-dark .lockup .mark{ color:var(--on-plum); }
.masthead.on-dark .nav a{ color:rgba(239,231,221,.72); }
.masthead.on-dark .nav a:hover{ color:var(--on-plum); border-bottom-color:rgba(239,231,221,.45); }
.lockup-name, .lockup .mark, .nav a{ transition:color .35s ease, border-color .2s ease; }

.masthead .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; min-height:74px;
}

.lockup{
  display:flex; align-items:center; gap:.7rem;
  text-decoration:none;
}
.lockup .mark{ width:20px; height:20px; flex:none; color:var(--plum); }
.lockup-name{
  font-size:1.06rem; font-weight:400; letter-spacing:.055em;
  text-transform:uppercase; white-space:nowrap;
}

.nav{ display:flex; align-items:center; gap:clamp(1.1rem,2.4vw,2.2rem); }
.nav a{
  font-family:var(--utility); font-size:.6875rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-soft);
  padding-block:.85rem;
  border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.nav a:hover{ color:var(--ink); border-bottom-color:var(--rule-firm); }
@media (max-width:640px){ .nav a:not(.nav-last){ display:none; } }

/* ---------- hero ---------- */

.hero{
  position:relative; overflow:hidden;
  padding-block:clamp(5rem,15vh,10.5rem) clamp(4.5rem,11vh,8rem);
}
@media (max-width:720px){
  .hero{ padding-block:clamp(3rem,9vh,5rem) clamp(3.5rem,8vh,5rem); }
}
.hero .wrap{ position:relative; z-index:2; }

.hero-watermark{
  position:absolute; z-index:1; pointer-events:none;
  right:-4%; top:52%; transform:translateY(-50%);
  width:min(44vw, 470px); height:auto;
  /* fill-opacity inherits into the <use> shadow tree, so the stone reads
     lighter than the outline without a second mark. */
  color:var(--plum); opacity:.07;
}
@media (max-width:900px){ .hero-watermark{ right:-18%; top:80%; width:min(52vw,280px); opacity:.06; } }
@media (max-width:720px){ .hero-watermark{ display:none; } }

.hero h1{
  font-size:clamp(1.9rem, 1.1rem + 2.7vw, 3.1rem);
  line-height:1.16;
  letter-spacing:-.016em;
  font-weight:250;
  max-width:27ch;
  margin:0;
}
.hero h1 em{
  font-style:italic; font-weight:300;
  color:var(--plum);
}

.hero-lead{
  margin-top:2rem;
  max-width:46ch;
  font-size:clamp(1.1rem, .98rem + .5vw, 1.35rem);
  font-weight:300;
  line-height:1.55;
  color:#2b3036;
}

.hero-meta{
  margin-top:clamp(3rem,7vh,4.5rem);
  padding-top:1.1rem;
  border-top:1px solid var(--rule);
  display:flex; flex-wrap:wrap; gap:.6rem 2.4rem;
}
@media (max-width:720px){
  .hero-meta{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem 1rem; }
}
/* Below this width "Artificial intelligence" wraps and knocks the grid rows out of line. */
@media (max-width:480px){
  .hero-meta{ grid-template-columns:1fr; gap:.5rem; }
}

.hero-meta span{
  font-family:var(--utility); font-size:.6875rem; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
}

/* ---------- generic band ---------- */

.band{ padding-block:var(--band); scroll-margin-top:74px; }
.band--tint{ background:var(--paper-deep); }

.band-head{ margin-bottom:clamp(2.5rem,5vh,3.75rem); }
.band-head h2{ margin-top:1rem; }

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

/* ---------- sectors ---------- */

.sectors{ border-top:1px solid var(--rule-firm); }

.sector{
  display:grid;
  grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:.35rem clamp(1.5rem,4vw,4rem);
  align-items:baseline;
  padding-block:clamp(1.5rem,3.2vh,2.25rem);
  border-bottom:1px solid var(--rule);
  transition:border-color .25s ease;
}
.sector:hover{ border-bottom-color:var(--plum); }
.sector:hover .sector-name{ color:var(--plum); }

.sector-name{
  font-size:clamp(1.4rem, .95rem + 1.5vw, 2rem);
  font-weight:250;
  line-height:1.15;
  letter-spacing:-.015em;
  transition:color .25s ease;
}
.sector-note{
  margin:0;
  max-width:64ch;
  color:#2f343a;
}
@media (max-width:720px){
  .sector{ grid-template-columns:1fr; gap:.5rem; }
}

/* ---------- approach ---------- */

.tenets{
  list-style:none; margin:2.75rem 0 0; padding:0;
  display:grid; gap:0;
}
.tenets li{
  padding-block:1.4rem;
  border-top:1px solid var(--rule);
  display:grid;
  grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:.35rem clamp(1.5rem,4vw,4rem);
  align-items:baseline;
}
.tenets li:last-child{ border-bottom:1px solid var(--rule); }
.tenet-label{
  font-family:var(--utility); font-size:.6875rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--plum);
}
.tenet-body{ margin:0; max-width:64ch; color:#2f343a; }
@media (max-width:720px){
  .tenets li{ grid-template-columns:1fr; gap:.55rem; }
}

/* ---------- contact ---------- */

.contact{
  scroll-margin-top:74px;
  background:var(--plum);
  color:var(--on-plum);
  padding-block:clamp(5rem,12vh,8.5rem);
}
.contact .eyebrow{ color:rgba(239,231,221,.74); }
.contact h2{
  margin:1rem 0 0;
  color:var(--on-plum);
  font-size:clamp(1.65rem, 1.1rem + 1.6vw, 2.25rem);
}
.contact-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(2.5rem,6vw,5rem);
  align-items:end;
}
@media (max-width:860px){
  .contact-grid{ grid-template-columns:1fr; align-items:start; }
}

.contact-lead{
  margin:1.75rem 0 0;
  max-width:38ch;
  color:rgba(239,231,221,.82);
  font-weight:300;
  font-size:clamp(1.05rem,.98rem + .35vw,1.2rem);
}

.contact-lines{ margin-top:2.75rem; }
.mailto{
  display:inline-block;
  font-size:clamp(1.35rem, .95rem + 1.5vw, 2.1rem);
  font-weight:250;
  letter-spacing:-.015em;
  text-decoration:none;
  color:var(--on-plum);
  border-bottom:1px solid rgba(239,231,221,.32);
  padding-bottom:.12em;
  transition:border-color .25s ease, color .25s ease;
  word-break:break-word;
}
.mailto:hover{ border-bottom-color:var(--on-plum); }

.locale{
  margin:1.4rem 0 0;
  font-family:var(--utility); font-size:.6875rem; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(239,231,221,.74);
}

.contact-seal{ color:var(--on-plum); opacity:.15; align-self:center; }
.contact-seal .mark{ width:clamp(120px, 18vw, 230px); height:auto; }
@media (max-width:860px){ .contact-seal{ display:none; } }

/* ---------- colophon ---------- */

.colophon{
  background:var(--plum);
  color:rgba(239,231,221,.7);
  padding-bottom:clamp(3rem,7vh,4.5rem);
}
.colophon .wrap{ border-top:1px solid rgba(239,231,221,.18); padding-top:1.75rem; }
.colophon p{
  font-family:var(--utility);
  font-size:.75rem;
  line-height:1.8;
  letter-spacing:.04em;
  max-width:82ch;
  margin:0 0 .55rem;
}
.colophon p:last-child{ margin-bottom:0; }

/* ---------- entrance motion ---------- */

.js .rise{ opacity:0; transform:translateY(14px); }
.js .is-in .rise, .js .rise.is-in{
  opacity:1; transform:none;
  transition:opacity .85s cubic-bezier(.22,.61,.36,1), transform .85s cubic-bezier(.22,.61,.36,1);
}
.js .is-in .rise:nth-child(2){ transition-delay:.08s; }
.js .is-in .rise:nth-child(3){ transition-delay:.16s; }
.js .is-in .rise:nth-child(4){ transition-delay:.24s; }

@media (prefers-reduced-motion: reduce){
  .rise{ opacity:1 !important; transform:none !important; transition:none !important; }
}