/* daniellahunter.com — design system v5. Rebuilt 31 Jul 2026.

   Held to the phytovive standard: one scale, three faces with strict jobs, generous
   whitespace, photography at scale, and no decorative effects. Everything the previous
   version leaned on (gradient scrims over images, parallax, a blush accent, buttons)
   is gone. Those are the things that dated it.

   TYPE. Three faces, never mixed jobs.
     EB Garamond  — every heading and every statement. Editorial, and distinct from
                    phytovive's Fraunces, because this is the person, not the company.
     Hanken Grotesk — anything you scan. Shared with phytovive on purpose.
     IBM Plex Mono  — labels and eyebrows only. Never reading copy.

   SCALE. Eight steps. Do not invent values between them.
   SPACING. One rhythm variable, --gap. Sections breathe or the restraint reads as empty.
*/

:root{
  --paper:#FCFDFE;
  --aqua:#EFF3F1;
  --ink:#1F2E36;
  --ink-soft:#5B6C73;
  --ink-faint:#93A3A9;
  --marine:#3C6577;
  --line:#E2EAED;

  --serif:'Cormorant Garamond',Georgia,serif;  /* the face the live site uses */
  --nav-face:var(--sans);   /* sans: the pages carry a lot of serif already */
  --sans:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --t-xs:.7rem; --t-sm:.83rem; --t-md:.98rem; --t-lg:1.2rem;
  --t-xl:1.6rem; --t-2xl:2.2rem; --t-3xl:3.1rem;

  --gap:clamp(4rem,8vw,7.5rem);
  /* the section rhythm. Matches the space between the hero image and the first
     line of copy, which is the interval the page is tuned to. Sections carry
     HALF of it top and bottom, so two adjacent sections sum to exactly one gap
     instead of stacking two full ones and doubling the space. */
  --gap-sm:clamp(3.2rem,6.3vw,5.4rem);
  --gap-half:calc(var(--gap-sm) / 2);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:400;
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:70rem;margin:0 auto;padding:0 clamp(1.5rem,5vw,4.5rem)}

/* the mono eyebrow */
.eyebrow{display:block;font-family:var(--mono);font-size:var(--t-sm);font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:var(--marine)}

/* the arrow link. A rule that draws itself, never a button. */
.arrow{display:inline-flex;align-items:center;gap:.55em;font-family:var(--mono);
  font-size:var(--t-xs);font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--marine);padding-bottom:.45em;position:relative}
.arrow::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--marine);transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.arrow:hover::after{transform:scaleX(1)}
.arrow svg{width:.95em;height:.95em;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.arrow:hover svg{transform:translateX(.3em)}

/* header */
.site-header{position:sticky;top:0;z-index:30;background:var(--paper);
  border-bottom:1px solid var(--line);display:flex;align-items:center;
  justify-content:space-between;padding:clamp(1rem,2vw,1.25rem) clamp(1.5rem,5vw,4.5rem)}
.site-header .logo{height:20px;width:auto}
.nav{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.8rem);font-family:var(--nav-face);
  font-size:var(--t-xs);font-weight:400;letter-spacing:.09em;text-transform:uppercase}
.nav a{color:var(--ink-soft);transition:color .25s}
.nav a:hover{color:var(--marine)}
.nav .ig svg{width:15px;height:15px;display:block}

/* 1 · hero. Image, then the line beneath it, left aligned and given room. */
.hero img{width:100%;height:clamp(380px,62vh,640px);object-fit:cover;object-position:50% 30%}
.hero-line{padding:var(--gap-sm) 0 var(--gap-half)}
.hero-line p{font-family:var(--serif);font-weight:300;
  font-size:clamp(1.35rem,2.5vw,var(--t-2xl));line-height:1.32;max-width:30ch;
  letter-spacing:-.005em}
.hero-line em{font-style:italic;color:var(--marine)}

/* 2 · now. One block. Image and copy are never separate sections.
   No tint behind it: the page stays one continuous paper, and the photograph
   is the only thing carrying colour. */
.now{padding:var(--gap-half) 0}
.now .row{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1fr);
  gap:clamp(2.2rem,6vw,5.5rem);align-items:center}
.now .shot{aspect-ratio:5/4;overflow:hidden}
.now .shot img{width:100%;height:100%;object-fit:cover}
.now h2{font-family:var(--serif);font-size:var(--t-2xl);font-weight:400;line-height:1.08;
  margin:1rem 0 1.1rem;letter-spacing:-.005em}
.now p{font-size:var(--t-md);color:var(--ink-soft);max-width:42ch;margin-bottom:1.9rem}

/* 3 · the three doors. Image, heading, one line, arrow. No scrims, no overlaid text. */
.doors{padding:var(--gap-half) 0}
.doors .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.8rem,4vw,3.4rem);margin-top:clamp(2rem,4vw,3rem)}
/* square plates: a 4/3 landscape crop was cutting the heads off the portraits */
.door .shot{aspect-ratio:1/1;overflow:hidden}
.door .shot img{width:100%;height:100%;object-fit:cover;object-position:50% 28%;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.door:hover .shot img{transform:scale(1.035)}
.door{display:flex;flex-direction:column}
.door h3{font-family:var(--serif);font-size:var(--t-xl);font-weight:400;line-height:1.14;
  margin:1.3rem 0 .55rem}
.door p{font-size:var(--t-sm);color:var(--ink-soft);margin-bottom:1.3rem;max-width:28ch}
/* blurbs differ in length, so the arrows are pushed to a shared baseline */
.door .arrow{margin-top:auto;align-self:flex-start}

/* 4 · press. A quiet row of mastheads. No tint, no box: a hairline is enough.

   SIZING. These logos are wildly different shapes, from Nasdaq at 3.5:1 to
   Architectural Digest at 15.7:1. Setting a common height makes AD four times
   wider than Forbes and it swallows the row. The eye reads equal AREA, not equal
   height, so each mark is given a width from h = sqrt(A/aspect) and they sit as
   equals. Widths below are that formula, then adjusted by eye. */
.press{padding:var(--gap-half) 0 var(--gap-sm);border-top:1px solid var(--line)}
.press .marks{display:flex;align-items:center;justify-content:space-between;
  gap:clamp(1.6rem,4vw,3.2rem);flex-wrap:wrap;margin:2.4rem 0 2.4rem}
.press .marks img{width:auto;height:auto;opacity:.72;filter:grayscale(1) contrast(1.06);
  transition:opacity .35s}
.press .marks img:hover{opacity:1}
/* img in the selector: `.press .marks img` would otherwise outrank a bare class */
.press .marks img.m-nasdaq {width:92px}
.press .marks img.m-forbes {width:98px}
.press .marks img.m-harpers{width:100px}
.press .marks img.m-nyt    {width:130px}
.press .marks img.m-ad     {width:176px}
@media (max-width:700px){
  .press .marks{gap:1.6rem 2.2rem;justify-content:flex-start}
  .press .marks img{transform:scale(.86);transform-origin:left center}
}

/* 5 · contact */
.site-footer{padding:clamp(3rem,5vw,4.5rem) 0 clamp(2.6rem,4vw,3.6rem);
  border-top:1px solid var(--line)}
.site-footer .row{display:flex;justify-content:space-between;align-items:flex-end;
  gap:2rem;flex-wrap:wrap}
.site-footer a.mail{font-family:var(--serif);font-size:var(--t-lg);color:var(--ink);
  border-bottom:1px solid var(--line);padding-bottom:.18em;transition:border-color .35s}
.site-footer a.mail:hover{border-color:var(--marine)}
.site-footer .social{display:flex;gap:1.5rem;font-family:var(--mono);font-size:var(--t-xs);
  font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.site-footer .social a:hover{color:var(--marine)}
.site-footer .fine{margin-top:2.8rem;font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}

@media (max-width:880px){
  .now .row{grid-template-columns:1fr;gap:2rem}
  .now .shot{aspect-ratio:16/10}
  .doors .grid{grid-template-columns:1fr;gap:2.8rem}
  .door .shot{aspect-ratio:1/1}
}

/* ---- mobile menu ----
   A checkbox and a label, no JavaScript: the pages are static and a menu
   should not be the one thing that needs a script to work. The input must stay
   in the DOM (not `hidden`) for the :checked ~ sibling selectors to drive the
   bars and the panel; it is taken out of the layout with position:absolute.
   The old rule here hid nav items 3 and up below 520px, which quietly dropped
   Journal, Press and Contact off small screens altogether. */
.navtoggle{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.burger{display:none}

@media (max-width:780px){
  .site-header{flex-wrap:wrap;padding-top:1rem;padding-bottom:1rem}
  .burger{display:flex;flex-direction:column;justify-content:space-between;
    width:23px;height:15px;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .burger span{display:block;height:1.5px;width:100%;background:var(--ink);
    border-radius:1px;transition:transform .38s cubic-bezier(.2,.7,.2,1),opacity .2s}
  .navtoggle:checked ~ .burger span:nth-child(1){transform:translateY(6.75px) rotate(45deg)}
  .navtoggle:checked ~ .burger span:nth-child(2){opacity:0}
  .navtoggle:checked ~ .burger span:nth-child(3){transform:translateY(-6.75px) rotate(-45deg)}

  .nav{flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;
    max-height:0;overflow:hidden;
    transition:max-height .45s cubic-bezier(.2,.7,.2,1)}
  .navtoggle:checked ~ .nav{max-height:26rem}
  .nav a{padding:1.05rem .1rem;border-bottom:1px solid var(--line);
    font-size:.78rem;letter-spacing:.15em}
  .nav a:first-child{margin-top:.9rem;border-top:1px solid var(--line)}
  .nav a:last-child{border-bottom:0}
  .nav .ig{display:flex;align-items:center;gap:.7em}
  .nav .ig::after{content:"Instagram";font:inherit}
  .nav .ig svg{width:16px;height:16px}
}

/* ---- press page ---- */
/* thin abstract strip at the top of inner pages */
.page-strip{position:relative}
.page-strip img{width:100%;height:clamp(260px,42vh,440px);object-fit:cover;object-position:50% 50%}
.page-head{padding:clamp(3rem,6vw,5rem) 0 clamp(2.4rem,5vw,3.6rem)}
.page-head h1{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,2.2vw,var(--t-xl));
  line-height:1.35;margin:1.1rem 0 .9rem;letter-spacing:0;max-width:42ch}
.page-head p{font-size:var(--t-md);color:var(--ink-soft);max-width:44ch}

.clips{border-top:1px solid var(--line);padding-bottom:var(--gap)}
.clip{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr) auto;
  gap:clamp(1rem,3vw,2.5rem);align-items:baseline;
  padding:clamp(1.6rem,3vw,2.2rem) 0;border-bottom:1px solid var(--line)}
.clip .pub{font-family:var(--mono);font-size:var(--t-xs);font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--marine)}
.clip h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.15rem,2vw,var(--t-xl));
  line-height:1.22;color:var(--ink)}
.clip h2 .sub{display:block;font-size:var(--t-sm);font-family:var(--sans);color:var(--ink-soft);
  margin-top:.45rem;letter-spacing:0}
.clip .go{white-space:nowrap}
.clip .yr{font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-faint);
  letter-spacing:.12em;display:block;margin-top:.4rem}
@media (max-width:880px){
  .clip{grid-template-columns:1fr;gap:.6rem}
  .clip .go{margin-top:.6rem}
}

/* ---- About page: a single readable column ---- */
.prose{max-width:38rem;padding-bottom:clamp(2rem,4vw,3rem)}
.prose p{font-family:var(--serif);font-weight:400;font-size:clamp(1.18rem,1.7vw,1.34rem);line-height:1.66;
  color:var(--ink);margin-bottom:1.5rem}
.prose p em{font-style:italic}
.prose .close{font-family:var(--serif);font-size:var(--t-xl);line-height:1.28;color:var(--ink);
  margin-top:2.6rem;padding-top:2rem;border-top:1px solid var(--line);max-width:22ch}

/* a portrait set into the column, not floated beside it */
.inset{margin:clamp(2.4rem,5vw,3.6rem) 0}
.inset img{width:100%;aspect-ratio:3/2;object-fit:cover}
.inset figcaption{margin-top:.75rem;font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}

/* ---- The Collective: alternating chapters, image and copy side by side ---- */
.chapters{padding-bottom:var(--gap)}
.chapter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5.5vw,5rem);align-items:center;
  padding:clamp(2.4rem,5vw,4rem) 0;border-bottom:1px solid var(--line)}
.chapter:last-child{border-bottom:0}
.chapter .shot{aspect-ratio:4/5;overflow:hidden}
.chapter .shot img{width:100%;height:100%;object-fit:cover}
.chapter:nth-child(even) .shot{order:2}
.chapter h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,3vw,var(--t-2xl));
  line-height:1.1;margin:.9rem 0 .3rem;letter-spacing:-.005em}
.chapter .tag{font-family:var(--serif);font-style:italic;font-size:var(--t-lg);
  color:var(--marine);display:block;margin-bottom:1rem}
.chapter p{font-size:var(--t-md);color:var(--ink-soft);max-width:42ch;margin-bottom:1.4rem}
/* a footnote, not a stamp: four lines of mono caps read far too heavy here */
.chapter .past{font-family:var(--sans);font-size:var(--t-sm);letter-spacing:0;
  text-transform:none;color:var(--ink-faint);line-height:1.6}
@media (max-width:880px){
  .chapter{grid-template-columns:1fr;gap:1.6rem}
  .chapter:nth-child(even) .shot{order:0}
  .chapter .shot{aspect-ratio:16/10}
}

/* ---- centred narrow column, used on About ---- */
.narrow{max-width:44rem;margin:0 auto;text-align:center}
.narrow .prose{max-width:none;text-align:left}
.narrow .prose p{font-size:clamp(1.18rem,1.7vw,1.34rem);line-height:1.7;color:var(--ink-soft)}
.narrow .prose .close{font-size:var(--t-lg);color:var(--ink);text-align:center;max-width:none;
  margin-top:3rem;padding-top:2.4rem}

/* ---- About: portrait beside the opening copy ----
   The single centred column read as a wall of text. A photograph set alongside
   the first paragraphs gives the page a face straight away, which is what the
   live site does.

   TWO EQUAL COLUMNS, alternating. A photograph run full width across the page
   cut the reading in half and threw the whole layout out. Every photograph now
   sits in one column with copy beside it, so the page holds two consistent
   edges the whole way down. Below 880px it collapses to one column. */
.about-grid{display:grid;grid-template-columns:1fr 1fr;
  column-gap:clamp(2rem,5.5vw,4.5rem);row-gap:clamp(2.6rem,5.5vw,4.5rem);
  align-items:center;padding-bottom:clamp(2rem,4vw,3rem)}

.about-grid .shot{overflow:hidden}
.about-grid .shot img{width:100%;height:100%;object-fit:cover}
.about-grid .shot-portrait{aspect-ratio:4/5}
.about-grid .shot-portrait img{object-position:50% 26%}
.about-grid .shot-plate{aspect-ratio:4/5}
.about-grid .shot-plate img{object-position:52% 45%}

.about-grid p{font-family:var(--serif);font-weight:400;
  font-size:clamp(1.12rem,1.6vw,1.28rem);line-height:1.7;color:var(--ink-soft);
  margin-bottom:1.4rem}
.about-grid p:last-child{margin-bottom:0}

/* the last passage sat in one column with the other half of the row empty,
   which read as a missing image rather than an ending. Spanning it and pulling
   it to the centre makes it a deliberate close to the page. */
.about-grid .closing{grid-column:1/-1;max-width:52ch;margin:0 auto;
  padding-top:clamp(.5rem,1.5vw,1.2rem)}
.about-grid .close{font-family:var(--serif);font-size:var(--t-xl);line-height:1.3;
  color:var(--ink);margin-top:clamp(2.2rem,4vw,3rem);padding-top:1.8rem;
  border-top:1px solid var(--line);text-align:center}

@media (max-width:880px){
  .about-grid{grid-template-columns:1fr;row-gap:1.8rem}
  .about-grid > *{order:0}
  .about-grid .shot{aspect-ratio:4/3}
  .about-grid .shot-portrait,.about-grid .shot-plate{aspect-ratio:4/3}
}

/* ---- Collective: square plates, brand marks instead of set headings ----

   LOGO SIZING. Every mark was exported onto an identical 1280x467 canvas with
   transparent padding, so a shared `height` sized the canvas and not the artwork.
   The files are now trimmed to their alpha bounding box, which exposes how
   different they really are: phytovive and Sanara are wordmarks at ~4:1, while
   Real Coconut and Sana are SQUARE emblems at 1:1. At a common height a square
   mark is a quarter of the width and reads as tiny, which is what was happening.
   Heights below come from h = k * aspect^-0.4, a blend between equal-height and
   equal-area, so all five carry the same optical weight. By Daniella Hunter is
   14:1 and has to be capped on width instead. */
.chapter .shot{aspect-ratio:1/1}
.chapter .brandlogo{width:auto;height:auto;margin:0 0 1.2rem;display:block}
.chapter .l-phytovive{height:42px}
.chapter .l-sanara   {height:46px}
.chapter .l-rck      {height:78px}
.chapter .l-sana     {height:78px}
.chapter .l-bydh     {width:196px}

.chapter h2.name{font-family:var(--serif);font-weight:400;font-size:var(--t-xl);
  line-height:1.18;margin:0 0 .55rem;letter-spacing:0}
/* the italic line under each mark. This is the voice of the brand, so it leads
   the block: it must sit ABOVE the body copy in the hierarchy, not below it. */
.chapter .tag{font-size:clamp(1.2rem,1.8vw,1.42rem);font-style:italic;
  font-family:var(--serif);color:var(--marine);display:block;
  line-height:1.35;margin:0 0 1.3rem}
/* the copy was set at --t-sm and read as fine print beside a big square plate */
.chapter p{font-size:var(--t-md);line-height:1.72;color:var(--ink-soft);max-width:38ch;
  margin-bottom:1.4rem}
.chapter .past{font-size:var(--t-sm);max-width:34ch}
/* more room between chapters, and the eyebrow given space above the mark */
.chapter{padding:clamp(3.2rem,6.5vw,5.5rem) 0;
  gap:clamp(2.4rem,6vw,6rem);align-items:center}
.chapter .eyebrow{margin-bottom:1.5rem}
/* the page heading already carries its own space below it, so the first
   chapter does not need a full interval on top as well */
.chapters .chapter:first-child{padding-top:clamp(.5rem,1.5vw,1.2rem)}

/* ---- postcards: a horizontal scroll of the work, on the home page ---- */
.gallery{padding:var(--gap-half) 0 0}
.gallery .rail{display:flex;gap:clamp(.8rem,1.6vw,1.2rem);overflow-x:auto;
  scroll-snap-type:x proximity;padding:clamp(1.8rem,3.5vw,2.6rem) 0 clamp(2.4rem,4vw,3rem);
  scrollbar-width:none}
.gallery .rail::-webkit-scrollbar{display:none}
.gallery .rail::before,.gallery .rail::after{content:"";flex:0 0 clamp(1.5rem,5vw,4.5rem)}
.gallery .rail img{height:clamp(240px,34vh,400px);width:auto;object-fit:cover;
  scroll-snap-align:center;flex:0 0 auto}
.gallery .wrap{padding-bottom:0}
/* the rail's heading and its link to the full set, on one line */
.gallery .head{display:flex;align-items:baseline;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap}

/* ---- Postcards page: a masonry column layout ----
   CSS columns rather than grid, because the images are mixed portrait and
   landscape and a grid would either crop them or leave ragged gaps. Columns
   let each keep its own proportions and simply flow. */
.postcards{padding:0 0 var(--gap-sm)}
.postcards .cards{column-count:3;column-gap:clamp(.8rem,1.6vw,1.2rem)}
.postcards figure{break-inside:avoid;margin:0 0 clamp(.8rem,1.6vw,1.2rem)}
.postcards img{width:100%;height:auto;display:block}
@media (max-width:880px){ .postcards .cards{column-count:2} }
@media (max-width:560px){ .postcards .cards{column-count:1} }