/* Dr Helen Wyatt - Review build 3

   Idea: Dublin Bay at the end of an evening swim. The home page opens on the bay at sunset.
   The other pages open on the dark water from the same photo, and Helen's own photographs
   carry the rest. One typeface, hairline rules, and colours taken from the bay photo.

   Words: Obsidian note "Helen website content" (v2), with the v2 feedback applied.
   Pages are assembled from "Review build 3 source" by build.py. */

:root{
  --night:#14212b;                      /* night water: text and dark bands */
  --paper:#f6f3ec;                      /* page background, and text on dark */
  --sand:#ebe6da;                       /* quieter bands */
  --soft:#4a5761;                       /* secondary text on paper and sand */
  --mist:#b9c4cb;                       /* secondary text on dark */
  --line:rgba(20,33,43,.16);
  --line-strong:rgba(20,33,43,.55);
  --line-dark:rgba(246,243,236,.22);
  --light:#d9a24a;                      /* last light: underlines and markers only, never text on paper */
  --light-text:#ecc27d;                 /* last light, lifted so it reads as text on dark */
  --sans:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --wrap:1200px;
  --pad:clamp(20px,5vw,64px);
  --head:92px;                          /* height of the menu bar that sits over the top of each page */
  --sec:clamp(72px,9.5vw,144px);        /* space above and below a section */
  --lift:clamp(72px,9vw,132px);         /* how far a photo rides up into the dark top of a page */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);font-size:18px;line-height:1.65;color:var(--night);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol,figure{margin:0}
h1,h2,h3{font-weight:300;line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
p{text-wrap:pretty}
strong{font-weight:500}
cite{font-style:italic}
a{color:inherit;text-decoration-color:var(--light);text-decoration-thickness:1.5px;text-underline-offset:5px}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--light);outline-offset:4px}
.skip{position:absolute;left:-999px}
.skip:focus{left:16px;top:16px;z-index:30;padding:10px 14px;background:var(--paper);color:var(--night)}
.wrap{width:min(100% - 2 * var(--pad),var(--wrap));margin-inline:auto}

/* type */
h2{font-size:clamp(30px,3.3vw,48px)}
h3{font-size:clamp(21px,1.9vw,26px);line-height:1.3;letter-spacing:-.01em}
.lead{font-size:clamp(21px,1.75vw,26px);font-weight:300;line-height:1.42;letter-spacing:-.01em}
.soft{color:var(--soft)}
.note{font-size:16px;color:var(--soft)}
.prose > * + *{margin-top:1.15em}
.prose > * + .btn,.prose > * + .more{margin-top:2em}

/* square brackets in the copy: details still to come */
.gap{padding:0 .25em;background:rgba(217,162,74,.2);outline:1px dashed var(--light)}

/* buttons and links */
.btn{display:inline-block;padding:15px 28px;border:1px solid var(--night);border-radius:999px;background:var(--night);color:var(--paper);font-size:16px;font-weight:500;line-height:1.2;text-decoration:none;transition:background .15s,color .15s}
.btn:hover{background:transparent;color:var(--night)}
.btn--paper{border-color:var(--paper);background:var(--paper);color:var(--night)}
.btn--paper:hover{background:transparent;color:var(--paper)}
.more{display:inline-block;padding-bottom:3px;border-bottom:1.5px solid var(--light);font-weight:500;text-decoration:none}
.more::after{content:"\00a0\2192"}
.more:hover{border-bottom-color:currentColor}

/* the menu bar: sits over the photo or dark water at the top of every page */
.site-head{position:absolute;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;gap:44px;min-height:var(--head);padding:0 var(--pad);color:var(--paper);font-size:16px}
.brand{font-size:20px;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.site-head nav ul{display:flex;gap:32px;margin:0;padding:0;list-style:none}
.site-head nav a{padding:6px 0;border-bottom:1.5px solid transparent;text-decoration:none;white-space:nowrap}
.site-head nav a:hover{border-bottom-color:var(--paper)}
.site-head nav a[aria-current="page"]{border-bottom-color:var(--light)}
.book{margin-left:auto;padding:10px 20px;border:1px solid rgba(246,243,236,.7);border-radius:999px;font-size:15px;font-weight:500;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
.book:hover{background:var(--paper);color:var(--night)}
.menu{display:none}

/* home: the bay, with the headline in the sky and the rest on the water */
.hero{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;min-height:max(100vh,620px);min-height:max(100svh,620px);padding:calc(var(--head) + 4vh) var(--pad) clamp(28px,5vh,52px);color:var(--paper)}
.hero-photo{position:absolute;inset:0;z-index:-2}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
/* shading sits only behind the words, top and bottom, so the skyline keeps its colour */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(13,23,31,.72) 0%,rgba(13,23,31,.46) 24%,rgba(13,23,31,0) 50%),
  linear-gradient(0deg,rgba(13,23,31,.82) 0%,rgba(13,23,31,.5) 22%,rgba(13,23,31,0) 46%)}
.hero h1{max-width:11em;font-size:clamp(40px,6.1vw,90px);line-height:1;letter-spacing:-.03em}
.hero-sub{max-width:26em;font-size:clamp(19px,1.6vw,23px);font-weight:300;line-height:1.45}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:26px}
.hero-note{max-width:24em;font-size:15px;line-height:1.45}

/* other pages: the dark water, with the page title on it */
.page-head{position:relative;isolation:isolate;padding:calc(var(--head) + clamp(48px,7.5vw,104px)) 0 clamp(52px,6.5vw,88px);background:var(--night);color:var(--paper)}
.page-head::before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(13,23,31,.8) 0%,rgba(13,23,31,.62) 100%),
  url(img/water.webp) center 40%/cover no-repeat}
.page-head h1{max-width:13em;font-size:clamp(40px,5.4vw,78px);line-height:1.02;letter-spacing:-.03em}
.page-head .lead{max-width:29em;margin-top:26px}
.kicker{margin-bottom:16px;font-size:16px;font-weight:500;color:var(--light-text)}
.section .kicker{color:var(--soft)}
.page-head--lift{padding-bottom:calc(var(--lift) + clamp(44px,5vw,72px))}

/* a wide photo that rides up into the dark top of the page */
.feature{position:relative;z-index:1;margin-top:calc(-1 * var(--lift))}
.feature img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--sand)}
.feature + .section,.feature-wrap + .section{padding-top:clamp(56px,6.5vw,96px)}

/* sections */
.section{padding-block:var(--sec)}
.section--sand{background:var(--sand)}
.section--night{background:var(--night);color:var(--paper)}
.section--night .soft,.section--night .note{color:var(--mist)}
.section-head{max-width:44em;margin-bottom:clamp(36px,4.5vw,64px)}
.section-head > * + *{margin-top:20px}

/* two columns with a gap column between them */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,1fr) minmax(0,6fr);align-items:start}
.split > :nth-child(1){grid-column:1}
.split > :nth-child(2){grid-column:3}
.split--wide-left{grid-template-columns:minmax(0,6fr) minmax(0,1fr) minmax(0,5fr)}
.split--narrow-left{grid-template-columns:minmax(0,4fr) minmax(0,1fr) minmax(0,7fr)}
.split--centre{align-items:center}

/* photos of Helen */
.portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--sand)}
.portrait--lift{position:relative;z-index:1;margin-top:calc(-1 * (var(--sec) + var(--lift)))}
.landscape img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:38% 50%;background:var(--sand)}

/* home: Helen's introduction */
.intro h2{margin-bottom:22px;font-size:17px;font-weight:500;letter-spacing:0;color:var(--soft)}

/* home: the statement on dark */
.statement h2{font-size:clamp(21px,1.9vw,26px);line-height:1.35;letter-spacing:-.01em;color:var(--mist)}
.statement p{font-size:clamp(25px,2.7vw,39px);font-weight:300;line-height:1.28;letter-spacing:-.02em}
.statement .more{margin-top:36px;font-size:18px;letter-spacing:0}

/* home: an index of the consultations, set as ruled rows */
.index{border-top:1px solid var(--line-strong)}
.index a{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,1fr) minmax(0,5fr) minmax(0,1fr);align-items:baseline;padding:30px 0 32px;border-bottom:1px solid var(--line);text-decoration:none}
.index h3{grid-column:1;font-size:clamp(23px,2.3vw,32px);line-height:1.2;letter-spacing:-.02em}
.index p{grid-column:3;color:var(--soft)}
.index .go{grid-column:4;justify-self:end;font-size:24px;line-height:1;transition:transform .2s}
.index a:hover h3{text-decoration:underline;text-decoration-color:var(--light);text-decoration-thickness:1.5px;text-underline-offset:7px}
.index a:hover .go{transform:translateX(6px)}

/* plain lists with hairlines */
.rules{padding:0;list-style:none;border-top:1px solid var(--line)}
.rules li{padding:16px 0;border-bottom:1px solid var(--line)}
.section--night .rules,.section--night .rules li{border-color:var(--line-dark)}

/* lifestyle medicine: the two reasons people come */
.reasons > div{padding:30px 0 34px;border-top:1px solid var(--line)}
.reasons > div:first-child{border-top-color:var(--line-strong)}
.reasons h3{margin-bottom:12px}
.reasons p{color:var(--soft)}

/* fees, set as a printed price list */
.fee{padding:26px 0 clamp(44px,5vw,64px);border-top:1px solid var(--line-strong)}
.fee-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 28px}
.fee-top h3,.price{font-size:clamp(24px,2.5vw,34px);font-weight:300;line-height:1.2;letter-spacing:-.02em}
.price{font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.price small{margin-left:8px;font-size:16px;font-weight:400;letter-spacing:0;color:var(--soft)}
.price small:first-child{margin:0 8px 0 0}
.fee-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,1fr) minmax(0,6fr);margin-top:22px}
.fee-body > p{grid-column:1;color:var(--soft)}
.fee-body > ul{grid-column:3}
.fee-body--plain{display:block;max-width:41em}
.fee-body--plain > p + p{margin-top:1em}
.section--night .fee{border-top-color:var(--line-dark)}
.section--night .fee-body > p,.section--night .price small{color:var(--mist)}

/* about: training and experience, with the years in the margin */
.cv{padding:0;list-style:none;border-top:1px solid var(--line-strong)}
.cv li{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);column-gap:28px;padding:18px 0;border-bottom:1px solid var(--line)}
.cv .when{color:var(--soft);font-variant-numeric:lining-nums tabular-nums}

/* questions */
.faq{border-top:1px solid var(--line-strong)}
.qa{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,1fr) minmax(0,6fr);padding:34px 0 38px;border-bottom:1px solid var(--line)}
.qa h2{grid-column:1;font-size:clamp(21px,1.9vw,26px);line-height:1.3;letter-spacing:-.01em}
.qa p{grid-column:3}

/* the foot of every page: getting in touch, then the letterhead, on a soft copy of the bay */
.close{position:relative;isolation:isolate;padding:var(--sec) 0 40px;background:var(--night);color:var(--paper)}
.close::before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(13,23,31,.5) 0%,rgba(13,23,31,.86) 62%,rgba(13,23,31,.94) 100%),
  url(img/bay-blur.webp) center 30%/cover no-repeat}
.close h2{margin-bottom:22px}
.email{display:inline-block;margin-top:14px;font-size:clamp(23px,2.7vw,38px);font-weight:300;letter-spacing:-.02em}
.topics{padding:0;list-style:none;border-top:1px solid var(--line-dark)}
.topics li{padding:16px 0;border-bottom:1px solid var(--line-dark)}
.foot{margin-top:clamp(72px,9vw,128px);font-size:15px;line-height:1.6;color:var(--mist)}
.foot strong{color:var(--paper)}
.urgent{padding:18px 22px;border:1px solid var(--line-dark);color:var(--paper)}
.foot-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,3fr);gap:40px;margin-top:36px}
.foot-name{font-size:20px;letter-spacing:-.01em;color:var(--paper)}

/* tablets and small laptops: the menu folds away */
@media (max-width:1000px){
  .site-head{gap:20px}
  .site-head nav{display:none}
  .menu{display:block}
  .menu summary{padding:10px 0;list-style:none;font-weight:500;cursor:pointer}
  .menu summary::-webkit-details-marker{display:none}
  .menu-close,.menu[open] .menu-open{display:none}
  .menu[open] .menu-close{display:inline}
  .menu-panel{position:absolute;left:0;right:0;top:100%;padding:4px var(--pad) 30px;background:var(--night);box-shadow:0 1px 0 var(--line-dark)}
  .menu-panel ul{margin:0;padding:0;list-style:none}
  .menu-panel a{display:block;padding:15px 0;border-bottom:1px solid var(--line-dark);font-size:22px;font-weight:300;letter-spacing:-.01em;text-decoration:none}
  .menu-panel a[aria-current="page"]{color:var(--light-text)}
}

/* narrow screens: one column */
@media (max-width:860px){
  .split,.split--wide-left,.split--narrow-left,.fee-body,.qa{display:block}
  .split > * + *{margin-top:36px}
  .qa p{margin-top:12px}
  .fee-body > ul{margin-top:22px}
  .index a{grid-template-columns:minmax(0,1fr) 40px;row-gap:8px}
  .index h3{grid-column:1}
  .index p{grid-column:1;grid-row:2}
  .index .go{grid-column:2;grid-row:1}
  .portrait--lift{margin-top:0}
  .portrait{max-width:520px}
  .foot-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .cv li{grid-template-columns:minmax(0,1fr)}
}

/* phones */
@media (max-width:640px){
  :root{--head:72px;--lift:0px}
  body{font-size:17px}
  .book{display:none}
  .menu{margin-left:auto}
  .brand{font-size:19px}
  .hero{padding-top:calc(var(--head) + 3vh)}
  .hero::before{background:
    linear-gradient(180deg,rgba(13,23,31,.76) 0%,rgba(13,23,31,.5) 26%,rgba(13,23,31,0) 48%),
    linear-gradient(0deg,rgba(13,23,31,.86) 0%,rgba(13,23,31,.6) 26%,rgba(13,23,31,0) 50%)}
  .hero-cta{flex-direction:column;align-items:flex-start}
  .page-head--lift{padding-bottom:clamp(44px,8vw,64px)}
  .feature-wrap{width:100%}
  .feature img{aspect-ratio:4/3;object-position:34% 50%}
  .urgent{padding:16px 18px}
}