/* ==========================================================================
   Studio Malie Art
   Design system derived from the Studio Malie Designer Portfolio.
   Palette values sampled directly from the approved PDF.
   ========================================================================== */

:root{
  /* Palette */
  --field:      #F3F0E9;  /* the default page ground */
  --paper:      #FAF8F4;  /* rare lift for an inset panel */
  --logofield:  #EFEBEC;  /* only behind the wordmark */
  --stone:      #C9C1B4;  /* hairline rules and quiet states */
  --warm:       #736C60;  /* captions, eyebrows, footer. Darkened from #8B8478
                             so small text clears WCAG AA 4.5 to 1 on the cream field. */
  --ink:        #1C1B19;  /* headlines and body */
  --charcoal:   #2A2724;  /* the single dark section */

  /* Type */
  --serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* Rhythm */
  --gutter:  clamp(22px, 5vw, 72px);
  --section: clamp(88px, 11vw, 176px);
  --maxw:    1340px;
}

*,*::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(--field);
  color:var(--ink);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.75;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-kerning:normal;
  text-rendering:optimizeLegibility;
}

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

/* --------------------------------------------------------------- layout */

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.wrap--narrow{ max-width:980px; }
.section{ padding-block:var(--section); }
.section--tight{ padding-block:clamp(56px,7vw,104px); }
.section--flush{ padding-top:0; }
.measure{ max-width:36rem; }
.measure--wide{ max-width:44rem; }
.center{ text-align:center; }
.center .measure,.center .measure--wide{ margin-inline:auto; }

.rule{ height:1px; background:var(--stone); border:0; margin:0; }
.rule--short{ width:96px; margin-block:2.25rem; }
.center .rule--short{ margin-inline:auto; }

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

.eyebrow{
  font-family:var(--sans);
  font-size:11px;
  font-weight:400;
  line-height:1.6;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--warm);
  margin:0 0 1.75rem;
}

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

.display{
  font-size:clamp(2.45rem, 5.2vw, 4.15rem);
  line-height:1.06;
}
.title{
  font-size:clamp(1.95rem, 3.4vw, 3rem);
  line-height:1.12;
}
.subline{
  display:block;
  font-style:italic;
  font-size:.72em;
  line-height:1.25;
  margin-top:.28em;
  color:var(--ink);
}

.lead{
  font-size:clamp(1.02rem, 1.2vw, 1.16rem);
  line-height:1.78;
  margin:1.75rem 0 0;
}
p{ margin:1.1rem 0 0; }
p:first-child{ margin-top:0; }

.caption{
  font-family:var(--sans);
  font-size:13px;
  line-height:1.65;
  letter-spacing:.005em;
  color:var(--warm);
  margin:0;
}
.caption--ink{ color:var(--ink); }
.note{
  font-style:italic;
  font-size:.95rem;
  line-height:1.7;
  color:var(--warm);
  margin:.55rem 0 0;
}

.tracked{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--warm);
}
.attribution{
  font-style:italic;
  font-size:.95rem;
  color:var(--warm);
  margin:0;
}

/* ----------------------------------------------------------- text link */

.link{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  display:inline-block;
  padding-bottom:.5em;
  border-bottom:1px solid var(--stone);
  transition:border-color .4s ease, color .4s ease;
}
.link:hover,.link:focus-visible{ border-bottom-color:var(--ink); }
.link + .link{ margin-left:2.25rem; }
.linkset{ margin-top:2.75rem; }

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

.masthead{ padding-block:clamp(26px,3.4vw,44px); }
.masthead__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
}
.wordmark{ display:block; text-decoration:none; flex:0 0 auto; padding:2px 0; }
.wordmark img{ width:clamp(220px,24vw,300px); height:auto; }
.wordmark--footer img{ width:200px; }

.nav{ display:flex; gap:clamp(1.5rem,2.9vw,2.9rem); }
.nav a{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--warm);
  text-decoration:none;
  padding-bottom:.35em;
  border-bottom:1px solid transparent;
  transition:color .4s ease, border-color .4s ease;
  white-space:nowrap;
}
.nav a:hover,.nav a:focus-visible{ color:var(--ink); }
.nav a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--stone); }

@media (max-width:680px){
  .masthead__inner{ flex-direction:column; gap:1.4rem; }
  .nav{ gap:1.35rem; flex-wrap:wrap; justify-content:center; }
}

/* ------------------------------------------------------------ imagery */

figure{ margin:0; }

.plate{ overflow:hidden; background:var(--logofield); }
.plate--portrait{ max-width:880px; margin-inline:auto; }
.plate img{ width:100%; }

.bleed{ width:100%; }
.band{
  width:100%;
  height:clamp(340px, 62vh, 720px);
  object-fit:cover;
  object-position:center;
}
.band--tall{ height:clamp(420px, 84vh, 880px); }
.band--gold{ object-position:center 42%; }

.figcap{ margin-top:1.1rem; }
.figcap .caption + .caption{ margin-top:.2rem; }

/* fade the photography in once, softly, and nothing else */
.js .fade{ opacity:0; transition:opacity 1s ease; }
.js .fade.is-in{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .js .fade{ opacity:1; transition:none; } }

/* keep the box shaped before a lazy image arrives so it is never skipped */
.plate img,.split__media img{ width:100%; height:auto; }
.band{ height:clamp(340px, 62vh, 720px); }
.band--tall{ height:clamp(420px, 84vh, 880px); }
.split--full .split__media img{ height:100%; }

/* --------------------------------------------------------------- grids */

.split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(2.5rem,6vw,6rem);
}
.split--full{
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:0;
  align-items:stretch;
}
.split--full .split__media img{ width:100%; height:100%; object-fit:cover; min-height:min(96vh,860px); }
.split__text{ padding-block:clamp(56px,7vw,96px); padding-inline:var(--gutter); }
.split--full .split__text{ display:flex; flex-direction:column; justify-content:center; }

.pair{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.4rem,3.4vw,3.25rem);
}
.trio{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.4rem,3.4vw,3.25rem);
}

@media (max-width:860px){
  .split,.split--full{ grid-template-columns:minmax(0,1fr); }
  .split--full .split__media img{ min-height:0; }
  .split__text{ padding-inline:0; }
  .split--full .split__text{ padding-inline:var(--gutter); }
  .pair,.trio{ grid-template-columns:minmax(0,1fr); gap:clamp(2.5rem,7vw,3.5rem); }
  .split--reverse .split__media{ order:-1; }
}

/* ------------------------------------------------------------- listing */

.steps{ list-style:none; margin:3rem 0 0; padding:0; counter-reset:step; }
.steps li{
  display:grid;
  grid-template-columns:3.75rem 1fr;
  align-items:baseline;
  gap:1rem;
  padding-block:1.35rem;
  border-top:1px solid var(--stone);
  font-family:var(--sans);
  font-size:14px;
  letter-spacing:.01em;
}
.steps li:last-child{ border-bottom:1px solid var(--stone); }
.steps li::before{
  counter-increment:step;
  content:"0" counter(step);
  font-size:11px;
  letter-spacing:.2em;
  color:var(--warm);
}

.terms{ margin:3rem 0 0; }
.terms__row{ padding-block:1.7rem; border-top:1px solid var(--stone); }
.terms__row:last-child{ border-bottom:1px solid var(--stone); }
.terms dt{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--warm);
  margin:0 0 .7rem;
}
.terms dd{ margin:0; font-size:1rem; line-height:1.72; max-width:40rem; }

.offer{ margin-top:3.25rem; }
.offer__row{ padding-block:1.6rem; border-top:1px solid var(--stone); }
.offer__row:last-child{ border-bottom:1px solid var(--stone); }
.offer h3{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink);
  margin:0 0 .6rem;
}
.offer p{ margin:0; font-size:.98rem; color:var(--warm); line-height:1.7; }

/* ---------------------------------------------------------------- work */

.work__title{
  font-size:clamp(1.5rem,2.3vw,2.05rem);
  font-style:italic;
  line-height:1.15;
  margin:0;
}
.work__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:2rem;
  margin-bottom:clamp(1.75rem,3vw,2.75rem);
}
.work__meta{ margin-top:1.1rem; }
.work__meta .work__title{ margin-bottom:.55rem; }

/* --------------------------------------------------------------- dark */

.dark{ background:var(--charcoal); color:var(--field); }
.dark .eyebrow,.dark .caption,.dark .note,.dark .attribution{ color:#A9A197; }
.dark .subline{ color:inherit; }
.dark .rule,.dark .rule--short{ background:#4A4540; }
.dark .link{ color:var(--field); border-bottom-color:#4A4540; }
.dark .link:hover,.dark .link:focus-visible{ border-bottom-color:var(--field); }

/* ---------------------------------------------------------------- form */

.form{ margin-top:3.25rem; display:grid; gap:2.4rem; }
.form__row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2.4rem; }
@media (max-width:680px){ .form__row{ grid-template-columns:minmax(0,1fr); } }

.field label{
  display:block;
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--warm);
  margin-bottom:.85rem;
}
.field input,.field select,.field textarea{
  width:100%;
  font-family:var(--serif);
  font-size:1rem;
  line-height:1.6;
  color:var(--ink);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--stone);
  border-radius:0;
  padding:.55rem 0;
  transition:border-color .4s ease;
  appearance:none;
}
.field select{ font-family:var(--sans); font-size:.95rem; }
.field textarea{ resize:vertical; min-height:7.5rem; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;
  border-bottom-color:var(--ink);
}
.field input::placeholder,.field textarea::placeholder{ color:var(--stone); }

.submit{
  justify-self:start;
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--ink);
  border-radius:0;
  padding:0 0 .55em;
  cursor:pointer;
  transition:opacity .4s ease;
}
.submit:hover{ opacity:.55; }

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

.footer{ padding-block:clamp(56px,6vw,88px) clamp(40px,4.5vw,60px); }
.footer .rule{ margin-bottom:clamp(30px,3.4vw,44px); }
.footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.25rem;
  flex-wrap:wrap;
}
.footer__inner span,.footer__inner a{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--warm);
  text-decoration:none;
  transition:color .4s ease;
}
.footer__inner a:hover{ color:var(--ink); }
@media (max-width:680px){
  .footer__inner{ flex-direction:column; text-align:center; gap:.85rem; }
}

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ==========================================================================
   Revision 2 additions. Nothing above this line was changed.
   ========================================================================== */

.skip{
  position:absolute; left:-9999px; top:0; z-index:10;
  font-family:var(--sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  background:var(--field); color:var(--ink); padding:1rem 1.25rem; border:1px solid var(--ink);
}
.skip:focus{ left:1rem; top:1rem; }

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:1px solid var(--ink); outline-offset:3px;
}

.inline{ color:inherit; text-decoration:none; border-bottom:1px solid var(--stone); }
.inline:hover{ border-bottom-color:var(--ink); }

.offer__go{ margin-top:1rem; }
.crumb{ padding-top:clamp(18px,2.4vw,30px); }
.detail__aside{ align-self:start; }

/* a work card is a link, and must not look like a product tile */
.workcard{ display:block; text-decoration:none; color:inherit; }
.workcard .plate{ transition:opacity .5s ease; }
.workcard:hover .plate{ opacity:.86; }
.workcard:hover .work__title{ color:var(--warm); }
.work__title{ transition:color .4s ease; }

/* ------------------------------------------------------------- the stages */

.stages{
  list-style:none; margin:clamp(2.75rem,5vw,4.5rem) 0 0; padding:0; counter-reset:stage;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(2.5rem,6vw,6rem);
}
.stages li{
  padding-block:1.9rem; border-top:1px solid var(--stone); counter-increment:stage;
  display:grid; grid-template-columns:3.25rem minmax(0,1fr); align-items:baseline;
  column-gap:1rem;
}
.stages li::before{
  content:"0" counter(stage);
  grid-column:1; grid-row:1 / span 2;
  font-family:var(--sans); font-size:11px; letter-spacing:.2em; color:var(--warm);
}
.stages h3{ grid-column:2; grid-row:1; }
.stages p{ grid-column:2; grid-row:2; }
.stages h3{
  font-family:var(--serif); font-size:1.14rem; font-weight:400; line-height:1.3; margin:0 0 .4rem;
}
.stages p{ margin:0; font-family:var(--sans); font-size:13px; line-height:1.7; color:var(--warm); }
@media (max-width:860px){ .stages{ grid-template-columns:minmax(0,1fr); } }

/* --------------------------------------------------------- choice blocks */

.choice{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  padding:clamp(2rem,3.4vw,2.9rem); border:1px solid var(--stone); background:transparent;
  transition:border-color .4s ease, background-color .4s ease;
}
.choice:hover,.choice:focus-visible{ border-color:var(--ink); background:var(--paper); }
.choice__eyebrow{
  font-family:var(--sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--warm); margin-bottom:1.25rem;
}
.choice__title{ font-size:clamp(1.5rem,2.2vw,2rem); font-style:italic; line-height:1.15; }
.choice__body{ font-size:.98rem; line-height:1.72; margin-top:1rem; color:var(--ink); }
.choice__go{
  font-family:var(--sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  margin-top:2rem; padding-bottom:.5em; border-bottom:1px solid var(--stone); align-self:flex-start;
}

/* ----------------------------------------------------------- form states */

.field__error{
  font-family:var(--sans); font-size:12px; color:var(--ink); margin:.6rem 0 0;
}
.field__error::before{ content:"* "; }
.field [aria-invalid="true"]{ border-bottom-color:var(--ink); }
.formstate{
  font-family:var(--sans); font-size:13px; line-height:1.7; color:var(--warm); margin:1.5rem 0 0;
  max-width:40rem;
}
.formstate:empty{ display:none; }
.formstate--notice{ border-top:1px solid var(--stone); padding-top:1.25rem; }

/* ==================================================== guided commission ==== */

.gc{ padding-block:clamp(40px,5vw,72px) clamp(80px,10vw,150px); }

.gc__bar{ position:relative; margin-bottom:clamp(2.5rem,5vw,4rem); }
.gc__track{ height:1px; background:var(--stone); }
.gc__fill{
  position:absolute; left:0; top:0; height:1px; background:var(--ink); width:0;
  transition:width .5s ease;
}
.gc__count{
  display:flex; justify-content:space-between; gap:1rem; margin-top:1rem;
  font-family:var(--sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--warm);
}

.gc__step[hidden]{ display:none !important; }
.gc__step{ animation:gcin .5s ease both; }
@keyframes gcin{ from{ opacity:0 } to{ opacity:1 } }
@media (prefers-reduced-motion: reduce){ .gc__step{ animation:none } }

.gc__q{ border:0; margin:0; padding:0; }
.gc__legend{
  display:block; padding:0; font-size:clamp(1.75rem,3vw,2.6rem); line-height:1.14;
  font-family:var(--serif); font-weight:400;
}
.gc__hint{
  font-family:var(--sans); font-size:12px; letter-spacing:.06em; color:var(--warm);
  margin:1rem 0 0;
}

.gc__options{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:0; margin-top:clamp(2rem,3.4vw,3rem);
}
.gc__options--two{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
/* hairlines come from the cells themselves, so an unfilled grid track
   stays empty cream instead of showing a block of backing colour */
.gc__opt{
  position:relative; background:var(--field);
  border:1px solid var(--stone); margin:-1px 0 0 -1px;
}
.gc__opt input{
  position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none;
}
.gc__opt label{
  display:flex; flex-direction:column; gap:.45rem; min-height:100%;
  padding:clamp(1.5rem,2.4vw,2.1rem); cursor:pointer;
  transition:background-color .35s ease;
}
.gc__opt label:hover{ background:var(--paper); }
.gc__name{ font-size:1.08rem; line-height:1.3; }
.gc__desc{ font-family:var(--sans); font-size:12.5px; line-height:1.62; color:var(--warm); }
.gc__opt input:checked + label{ background:var(--charcoal); color:var(--field); }
.gc__opt input:checked + label .gc__desc{ color:#A9A197; }
.gc__opt input:focus-visible + label{ outline:1px solid var(--ink); outline-offset:-4px; }

/* A slot for artwork crops or palette references. It stays collapsed until a
   real image is supplied in assets/js/config.js, so no empty boxes ever show. */
.gc__swatch{ display:none; }
.gc__swatch[style]{
  display:block; width:100%; aspect-ratio:3/2; margin-bottom:1rem;
  background-size:cover; background-position:center;
}

.gc__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2.4rem; margin-top:2.5rem; }
@media (max-width:680px){ .gc__grid{ grid-template-columns:minmax(0,1fr); } }

.gc__other{ margin-top:2rem; }
.gc__other[hidden]{ display:none !important; }

.gc__drop{
  margin-top:2.5rem; padding:clamp(2rem,4vw,3rem); border:1px solid var(--stone);
  text-align:center; transition:border-color .35s ease, background-color .35s ease;
}
.gc__drop.is-over{ border-color:var(--ink); background:var(--paper); }
.gc__drop p{ font-family:var(--sans); font-size:12.5px; color:var(--warm); margin:.5rem 0 0; }
.gc__files{ list-style:none; margin:1.5rem 0 0; padding:0; text-align:left; }
.gc__files li{
  font-family:var(--sans); font-size:12.5px; color:var(--ink);
  padding-block:.7rem; border-top:1px solid var(--stone);
  display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
}
.gc__files button{
  font-family:var(--sans); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  background:none; border:0; border-bottom:1px solid var(--stone); color:var(--warm);
  padding:0 0 .3em; cursor:pointer;
}
.gc__files button:hover{ color:var(--ink); border-bottom-color:var(--ink); }

.gc__nav{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  margin-top:clamp(2.75rem,5vw,4rem); padding-top:1.75rem; border-top:1px solid var(--stone);
}
.gc__btn{
  font-family:var(--sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  background:none; border:0; border-bottom:1px solid var(--ink); color:var(--ink);
  padding:0 0 .55em; cursor:pointer; transition:opacity .35s ease;
}
.gc__btn:hover{ opacity:.55; }
.gc__btn--quiet{ border-bottom-color:var(--stone); color:var(--warm); }
.gc__btn--quiet:hover{ color:var(--ink); }
.gc__btn[hidden]{ display:none !important; }

/* --------------------------------------------------------------- summary */

.gc__summary{ margin-top:clamp(2rem,3.4vw,3rem); }
.gc__sumrow{
  display:grid; grid-template-columns:minmax(0,13rem) minmax(0,1fr) auto;
  gap:1rem 2rem; align-items:baseline;
  padding-block:1.4rem; border-top:1px solid var(--stone);
}
.gc__sumrow:last-of-type{ border-bottom:1px solid var(--stone); }
.gc__sumrow dt{
  font-family:var(--sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--warm); margin:0;
}
.gc__sumrow dd{ margin:0; font-size:1.05rem; line-height:1.5; }
.gc__edit{
  font-family:var(--sans); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  background:none; border:0; border-bottom:1px solid var(--stone); color:var(--warm);
  padding:0 0 .3em; cursor:pointer;
}
.gc__edit:hover{ color:var(--ink); border-bottom-color:var(--ink); }
@media (max-width:680px){
  .gc__sumrow{ grid-template-columns:minmax(0,1fr) auto; }
  .gc__sumrow dt{ grid-column:1 / -1; }
}

/* reserved for the pricing matrix, inactive until real figures exist */
.gc__range[hidden]{ display:none !important; }
.gc__range{ margin-top:2.5rem; padding-top:1.75rem; border-top:1px solid var(--stone); }

.gc__done{ text-align:center; padding-block:clamp(3rem,6vw,5rem); }

/* a work detail spec column stands alone */
.split--detail{ grid-template-columns:minmax(0,1fr); max-width:44rem; }

/* Presence carries the most weight in a commission conversation */
.gc__options--emphasis{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.gc__options--emphasis label{ padding:clamp(2.1rem,3.6vw,3rem); gap:.7rem; }
.gc__options--emphasis .gc__name{ font-size:1.35rem; }

/* the estimated commission range on the summary screen */
.gc__range{ margin-top:2.5rem; padding-top:1.75rem; border-top:1px solid var(--stone); }
.gc__rangeval{
  font-size:clamp(1.7rem,3vw,2.5rem); line-height:1.15; margin:.35rem 0 0;
}
.gc__rangeval.is-quiet{ font-size:clamp(1.1rem,1.6vw,1.3rem); font-style:italic; color:var(--warm); }
.gc__rangenote{
  font-family:var(--sans); font-size:12.5px; line-height:1.7; color:var(--warm); margin:.9rem 0 0;
}
.gc__rangenote:empty{ display:none; }

/* the published commission pricing guide */
.guide{ margin-top:clamp(2.25rem,4vw,3.25rem); }
.guide__row{
  display:flex; justify-content:space-between; align-items:baseline; gap:1.5rem;
  padding-block:1.1rem; border-top:1px solid var(--stone);
}
.guide__row:last-child{ border-bottom:1px solid var(--stone); }
.guide__row dt,.guide__row span:first-child{ font-size:1.02rem; margin:0; }
.guide__row dd,.guide__row span:last-child{
  font-family:var(--sans); font-size:13px; letter-spacing:.02em; color:var(--warm);
  margin:0; text-align:right; white-space:nowrap;
}
.guide__group{ margin-top:clamp(2rem,3.4vw,2.75rem); }
.guide__group > .eyebrow{ margin-bottom:.5rem; }

details.disclose{ margin-top:clamp(2.5rem,4.5vw,3.5rem); border-top:1px solid var(--stone); }
details.disclose > summary{
  list-style:none; cursor:pointer; padding-block:1.5rem;
  font-family:var(--sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
details.disclose > summary::-webkit-details-marker{ display:none; }
details.disclose > summary::after{ content:"Show"; color:var(--warm); }
details.disclose[open] > summary::after{ content:"Hide"; }
details.disclose > summary:hover::after{ color:var(--ink); }
details.disclose > summary:focus-visible{ outline:1px solid var(--ink); outline-offset:3px; }
.disclose__body{ padding-bottom:clamp(1.5rem,3vw,2.5rem); }
.disclose__cols{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 clamp(2.5rem,6vw,5rem);
}
@media (max-width:760px){ .disclose__cols{ grid-template-columns:minmax(0,1fr); } }

/* footer social pair */
.footer__social{ display:inline-flex; align-items:baseline; gap:1.1rem; flex-wrap:wrap; justify-content:center; }
.footer__social a{ border-bottom:1px solid transparent; transition:border-color .4s ease, color .4s ease; }
.footer__social a:hover{ color:var(--ink); border-bottom-color:var(--stone); }
.footer__handle{ color:var(--stone); }

/* upload validation messages */
.gc__uploaderr{
  font-family:var(--sans); font-size:12.5px; line-height:1.7; color:var(--ink);
  margin:1rem 0 0; text-align:left;
}
.gc__uploaderr:empty{ display:none; }
.gc__uploaderr li{ list-style:none; padding-block:.35rem; }
.gc__uploaderr li::before{ content:"* "; }

/* Comfortable tap targets for the text CTAs. The invisible extension sits
   behind the label, so typography, spacing and the underline are unchanged. */
.link{ position:relative; }
.link::after{ content:""; position:absolute; inset:-13px -8px; }

/* Interior visualizations reuse the existing plate language: contained,
   uncropped, generous margins. */
.plate--interior{ max-width:920px; margin-inline:auto; }
.figcap--interior{ max-width:920px; margin-inline:auto; }

/* The disclosure label. Sized and tracked to read as a quiet editorial credit
   rather than a caption. It sits below the image, never over it, and carries no
   box, rule or container of its own. Colour is left at full strength because
   fading it further drops small text below the contrast standard. */
.credit{
  font-family:var(--sans);
  font-size:10px;
  line-height:1.6;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--warm);
  margin:1.1rem 0 0;
}
.band + .credit,
figcaption > .credit{ margin-top:1.25rem; }

/* Editorial rhythm. A full bleed image is given more air than a text section so
   the page breathes between visual moments instead of stacking at one interval. */
/* An editorial crop is composed deliberately, so the container must not crop it
   again. Full width, natural height, artwork complete and never reshaped. */
.band--editorial{ height:auto; object-fit:fill; }

.section--air{ padding-block:clamp(104px,13vw,208px); }
.section--air > figure{ margin:0; }
.section--air + .section,
.section--air + .section--tight{ padding-top:clamp(72px,9vw,140px); }
.band + figcaption{ display:block; }

/* ==========================================================================
   Homepage cadence. Scoped to .home so no other page is affected.

   Each transition is tuned on its own rather than sharing one interval:
   the two consecutive images sit close so they read as one visual moment,
   the collection chapter opens with more air, and text stays connected to
   the imagery it belongs to. Mobile is set independently, not inherited.

   Selectors are deliberately specific enough to beat the sitewide
   .section--air and .section--air + .section--tight rhythm rules.
   ========================================================================== */

/* hero band into the studio statement */
.home .section.home__statement{ padding-block:clamp(52px,7.6vw,112px) clamp(48px,6.6vw,96px); }

/* the offerings split: text kept close to the artwork beside it */
.home .split--full .split__text{ padding-block:clamp(48px,6.4vw,88px); }

/* offerings into the first editorial image, then straight into its pair */
.home .section--air.home__editorial{ padding-block:clamp(44px,6vw,88px) clamp(30px,5vw,76px); }
.home .section--air + .section--tight.home__texture{ padding-block:0 clamp(60px,8.2vw,124px); }

/* the collection chapter, then a closing split that runs to the footer */
.home .section.home__collection{ padding-block:0 clamp(50px,6.8vw,104px); }
/* The closing commission invitation is a centred text moment now that its
   paired photograph is gone. The collection above supplies most of the gap,
   so this only adds the small lift a heading needs before the footer rule. */
.home .section.home__closing{ padding-block:clamp(6px,1vw,16px) clamp(8px,1.2vw,20px); }
/* The closing now opens on its rule rather than on an eyebrow, so the rule's
   own top margin would add to the section gap. Drop it and the interval
   matches the rest of the page again. */
.home .home__closing .rule--short{ margin-top:0; }

/* an image and the label that belongs to it stay tied together */
.home figcaption > .credit{ margin-top:1rem; }

@media (max-width: 860px){
  /* Phone and small tablet rhythm, set for the screen rather than inherited.
     Intimate and fluid, with the image pair almost touching. */
  .home .section.home__statement{ padding-block:54px 42px; }
  .home .split--full .split__text{ padding-block:42px; }
  .home .section--air.home__editorial{ padding-block:16px 28px; }
  .home .section--air + .section--tight.home__texture{ padding-block:0 54px; }
  .home .section.home__collection{ padding-block:0 46px; }
  .home .section.home__closing{ padding-block:6px 16px; }
  .home .trio{ gap:2.4rem; }
}

@media (max-width: 460px){
  .home .section.home__statement{ padding-block:46px 36px; }
  .home .split--full .split__text{ padding-block:36px; }
  .home .section--air.home__editorial{ padding-block:12px 22px; }
  .home .section--air + .section--tight.home__texture{ padding-block:0 46px; }
  .home .section.home__collection{ padding-block:0 40px; }
  .home .section.home__closing{ padding-block:4px 14px; }
  .home .trio{ gap:2.1rem; }
}

/* ==========================================================================
   Commissions cadence. Scoped to .cm. Tuned per transition, not globally.
   ========================================================================== */

.cm .split.cm__hero{ padding-block:0; }
.cm .split--full .split__text{ padding-block:clamp(48px,6.4vw,88px); }

/* hero into the process, then the process into the mockup it explains */
.cm .section.cm__process{ padding-block:clamp(46px,6vw,92px) clamp(48px,6.4vw,96px); }
.cm .section--tight.cm__mockup{ padding-block:0 clamp(40px,5.2vw,80px); }

/* the mockup section flows straight into the image that supports it */
.cm .section--air.cm__editorial{ padding-block:0 clamp(46px,6vw,92px); }
.cm .section--air + .section.cm__pricing{ padding-block:0 clamp(44px,5.6vw,86px); }

/* pricing into terms, which needs real separation rather than the 10px it had */
.cm .section--tight.cm__terms{ padding-block:clamp(40px,5.4vw,84px) clamp(46px,6vw,92px); }
.cm .section.cm__designers{ padding-block:clamp(56px,7.4vw,116px); }

@media (max-width: 860px){
  .cm .split--full .split__text{ padding-block:42px; }
  .cm .section.cm__process{ padding-block:44px 46px; }
  .cm .section--tight.cm__mockup{ padding-block:0 36px; }
  .cm .section--air.cm__editorial{ padding-block:0 40px; }
  .cm .section--air + .section.cm__pricing{ padding-block:0 40px; }
  .cm .section--tight.cm__terms{ padding-block:36px 42px; }
  .cm .section.cm__designers{ padding-block:52px; }
}

@media (max-width: 460px){
  .cm .split--full .split__text{ padding-block:36px; }
  .cm .section.cm__process{ padding-block:38px 40px; }
  .cm .section--tight.cm__mockup{ padding-block:0 30px; }
  .cm .section--air.cm__editorial{ padding-block:0 34px; }
  .cm .section--air + .section.cm__pricing{ padding-block:0 34px; }
  .cm .section--tight.cm__terms{ padding-block:30px 36px; }
  .cm .section.cm__designers{ padding-block:44px; }
}

/* ==========================================================================
   Studio cadence. Scoped to .st. A short, intimate page; the heading sits
   close to the image it introduces and the text blocks stay connected.
   ========================================================================== */

.st .section--tight.st__lead{ padding-block:clamp(44px,5.8vw,88px) clamp(20px,2.6vw,40px); }
.st .st__band{ padding-block:0; }
.st .section.st__practice{ padding-block:clamp(34px,4.2vw,62px) clamp(40px,5.2vw,80px); }
.st .section--tight.st__material{ padding-block:0 clamp(42px,5.6vw,86px); }
.st .section--tight.st__close{ padding-block:0 clamp(46px,6vw,92px); }

@media (max-width: 860px){
  .st .section--tight.st__lead{ padding-block:44px 22px; }
  .st .section.st__practice{ padding-block:32px 36px; }
  .st .section--tight.st__material{ padding-block:0 40px; }
  .st .section--tight.st__close{ padding-block:0 44px; }
}

@media (max-width: 460px){
  .st .section--tight.st__lead{ padding-block:38px 18px; }
  .st .section.st__practice{ padding-block:28px 30px; }
  .st .section--tight.st__material{ padding-block:0 34px; }
  .st .section--tight.st__close{ padding-block:0 38px; }
}

/* ==========================================================================
   Closing path navigation. Not a button: the same small tracked label the
   masthead navigation uses, in the same warm grey that lifts to ink on hover,
   separated by hairlines in the rule colour. No box, no fill, no underline.
   ========================================================================== */

.pathnav{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:0;
  margin:0;
}
.pathnav a{
  font-family:var(--sans);
  font-size:11px;
  line-height:1.6;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--warm);
  text-decoration:none;
  padding:.55em clamp(1.1rem,2.4vw,2rem);
  transition:color .4s ease;
}
.pathnav a:hover,.pathnav a:focus-visible{ color:var(--ink); }
.pathnav__sep{
  display:inline-block;
  width:1px;
  height:.95em;
  background:var(--stone);
  flex:0 0 auto;
}

/* On a narrow screen the row becomes a stack, and hairlines that would strand
   themselves at the start of a line are dropped rather than left hanging. */
@media (max-width: 620px){
  .pathnav{ flex-direction:column; gap:1.35rem; }
  .pathnav a{ padding:0; }
  .pathnav__sep{ display:none; }
}

/* A line of type that is itself the link: no underline, and the same quiet
   lift on hover the rest of the site uses. */
.quietlink{
  color:inherit;
  text-decoration:none;
  transition:color .4s ease;
}
.quietlink:hover,.quietlink:focus-visible{ color:var(--ink); }

/* ==========================================================================
   Original Works cadence. Scoped to .ow. Only the transition from the surface
   detail photograph and its caption into the closing commission invitation is
   tuned; that one interval was inherited from two full section paddings and
   read as a blank band, well outside the rhythm the rest of the site uses.
   Every other interval on the page is left exactly as approved.
   ========================================================================== */

.ow .section--tight.ow__detail{ padding-bottom:clamp(28px,3.4vw,52px); }
.ow .section--tight.ow__close{ padding-top:clamp(10px,1.4vw,24px); }

@media (max-width: 860px){
  .ow .section--tight.ow__detail{ padding-bottom:28px; }
  .ow .section--tight.ow__close{ padding-top:10px; }
}

@media (max-width: 460px){
  .ow .section--tight.ow__detail{ padding-bottom:24px; }
  .ow .section--tight.ow__close{ padding-top:8px; }
}

/* The offerings list sat 115px below the artwork on a phone, inherited from the
   desktop margin. Tie it back to the image it belongs beside. */
.home .offer{ margin-top:2rem; }
@media (max-width: 860px){ .home .offer{ margin-top:1.25rem; } }
@media (max-width: 460px){ .home .offer{ margin-top:1rem; } }