/* ------------------------------------------------------------------
   Layout and type modelled on spruethmagers.com
   Shared by index.html and contact.html

   Colours:   #D4273B throughout, sampled from the jumper in the 'you'
              photograph. It measures 5.06:1 on white and clears WCAG AA
              for body text as it stands, with no darkening, unlike the
              brighter red used earlier. Footer #B52132, white on it at
              6.50:1.
   Type:      the gallery licenses Neue Haas Grotesk Text Pro from
              fonts.com; the fallback below is Helvetica Neue, which is
              what iPhones already have, so the phone view is very close.
              Body 17px, line-height 1.3, no letter-spacing, bold for names
   Measure:   content sits in a centred 93% column (92% from 1024px up)
   Breakpoint: 1200px. Below it: hamburger menu, one column, picture above
               its text. From 1200px: inline navigation, two columns that
               alternate picture left / picture right.
   Images:    in /images, 2000px on the long side, JPEG, EXIF stripped.
              No text is set over a photograph.
   ------------------------------------------------------------------ */

:root{
  --red:#D4273B;         /* sampled from the jumper. 5.06:1 on white, clears AA */
  --red-deep:#B52132;    /* footer ground. White on it is 6.50:1 */
  --ink:#2E2B2A;         /* running text. 14.05:1 on white */
  --grey:#DDDDDD;
  --white:#FFFFFF;
  --font:"NeueHaasGroteskText Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
  --gutter:3.5%;                /* (100% - 93%) / 2 */
  --hh:48px;                    /* header height; set precisely by script */
}

/* If you license the typeface, drop the files in /fonts and uncomment:
@font-face{ font-family:"NeueHaasGroteskText Pro"; src:url(fonts/NHaasGroteskTXPro-55Rg.woff2) format("woff2"); font-weight:400; font-style:normal; }
@font-face{ font-family:"NeueHaasGroteskText Pro"; src:url(fonts/NHaasGroteskTXPro-56It.woff2) format("woff2"); font-weight:400; font-style:italic; }
@font-face{ font-family:"NeueHaasGroteskText Pro"; src:url(fonts/NHaasGroteskTXPro-75Bd.woff2) format("woff2"); font-weight:700; font-style:normal; }
*/

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  padding-top:var(--hh);
  font-family:var(--font);
  font-size:17px;
  line-height:1.3;
  color:var(--red);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
body.menu-open{ overflow:hidden; }
p{ margin:0 0 1em; }
ul{ list-style:none; margin:0; padding:0; }
strong,b{ font-weight:700; }
a{ color:inherit; text-decoration:underline; text-underline-offset:.12em; }
a:hover{ text-decoration-thickness:1.5px; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
img{ display:block; max-width:100%; height:auto; }
.wrap{ width:93%; margin:0 auto; }

/* ---------- Header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:var(--white);
}
.site-header .inner{
  display:flex; align-items:center; justify-content:flex-end;
  padding:.6em 0 .37em;
  border-bottom:1px solid var(--red);
}
.wordmark{
  font-weight:700; font-size:1.15em; line-height:1.3;
  text-decoration:none; letter-spacing:-.01em; white-space:nowrap;
  margin-top:.15em;
}
.wordmark:hover{ text-decoration:none; }
.main-nav{ display:none; }

/* Hamburger (three 2px lines, 7px apart; squeezes into a cross) */
.burger{
  position:fixed; top:0; left:var(--gutter); z-index:1001;
  width:25px; height:45px; display:flex; align-items:flex-start;
}
.burger .box{ display:block; position:relative; width:25px; height:16px; margin-top:16px; }
.burger .bar,
.burger .bar::before,
.burger .bar::after{
  position:absolute; left:0; width:25px; height:2px; background:var(--red);
}
.burger .bar{
  top:50%; margin-top:-1px; display:block;
  transition:transform .13s cubic-bezier(.55,.055,.675,.19);
}
.burger .bar::before,
.burger .bar::after{ content:""; display:block; }
.burger .bar::before{ top:-7px; transition:top .1s .13s ease, opacity .1s ease; }
.burger .bar::after{ top:7px; transition:top .1s .13s ease, transform .13s cubic-bezier(.55,.055,.675,.19); }
.burger.is-active .bar{ transform:rotate(45deg); transition-delay:.12s; transition-timing-function:cubic-bezier(.215,.61,.355,1); }
.burger.is-active .bar::before{ top:0; opacity:0; transition:top .1s ease, opacity .1s .12s ease; }
.burger.is-active .bar::after{ top:0; transform:rotate(-90deg); transition:top .1s ease, transform .13s .12s cubic-bezier(.215,.61,.355,1); }

/* Mobile menu: white sheet below the header, slides in from the left */
.mobile-menu{
  position:fixed; top:var(--hh); left:0; right:0; bottom:0; z-index:999;
  background:var(--white);
  display:flex; flex-direction:column;
  transform:translateX(-100%); opacity:0; visibility:hidden;
  transition:transform .5s, opacity .5s, visibility 0s .5s;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.mobile-menu.open{ transform:none; opacity:1; visibility:visible; transition:transform .5s, opacity .5s, visibility 0s; }
.mobile-menu > ul{ padding-top:.1em; }
.mobile-menu li > a{
  display:block; position:relative;
  margin:0 var(--gutter);
  font-size:1.15em; line-height:1.7;
  text-decoration:none;
}
.mobile-menu li.current > a{ text-decoration:underline; }
.mobile-menu li > a:hover{ text-decoration:underline; }
.mobile-menu .sub-arrow{
  position:absolute; right:0; top:0; width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
}
.mobile-menu .sub-arrow svg{ width:12px; height:12px; transition:transform .3s; }
.mobile-menu li.sub-open .sub-arrow svg{ transform:rotate(180deg); }
.mobile-menu .sub{ display:none; }
.mobile-menu li.sub-open .sub{ display:block; }
.mobile-menu .sub a{ padding-left:1.2em; font-size:1em; }
.mobile-menu .social{ margin-top:auto; padding:1em var(--gutter) 2em; }
.social-icons span{ display:inline-block; vertical-align:middle; }
.social-icons svg{ display:block; width:20px; height:20px; }
.mobile-menu .social-icons span{ margin-right:1.6em; }

/* ---------- Opening carousel ----------
   All eight pictures in turn, each with its heading set over the image in
   white, as on spruethmagers.com. Their slideshow pictures are gallery
   interiors with large calm areas; these are street photographs with no
   quiet corner, so a soft gradient sits under the caption. Measured
   against the pixels beneath, white clears 4.5:1 on every slide.        */
.hero{
  position:relative; overflow:hidden;
  /* the carousel fills the browser at every width. svh is the viewport
     with the phone's address bar showing, so the picture is not cut off
     when that bar slides away; vh is the fallback for older browsers. */
  height:calc(100vh - var(--hh));
  height:calc(100svh - var(--hh));
  min-height:380px;
  background:#111;
}
.slide{ position:absolute; inset:0; opacity:0; transition:opacity .9s ease; }
.slide.active{ opacity:1; z-index:1; }
.slide img,
.slide video.clip{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; }
.slide::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top,
    rgba(0,0,0,.80) 0%, rgba(0,0,0,.62) 20%, rgba(0,0,0,.22) 46%, transparent 70%);
}
.slide .caption{
  position:absolute; left:var(--gutter); bottom:1.4em; z-index:2;
  margin-bottom:0;
}
.slide .caption .h,
.slide .caption .d{ color:#fff; }
.hero .arrow{
  position:absolute; top:50%; z-index:3; width:34px; height:48px; margin-top:-24px;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  /* the pictures run from near-black to near-white, so the arrow carries its
     own dark ground rather than relying on what is behind it */
  filter:drop-shadow(0 0 2px rgba(0,0,0,.95))
         drop-shadow(0 0 5px rgba(0,0,0,.85))
         drop-shadow(0 1px 10px rgba(0,0,0,.6));
}
.hero .arrow svg{ width:15px; height:27px; }
.hero .arrow.prev{ left:.6%; }
.hero .arrow.next{ right:.6%; }
.hero .dots{
  position:absolute; left:0; right:0; bottom:.55em; z-index:3;
  display:flex; justify-content:center; gap:9px;
}
.hero .dots button{
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.45);
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.7));
}
.hero .dots button[aria-current="true"]{ background:#fff; }

/* ---------- Current / Upcoming bar ---------- */
.sub-nav{ border-top:1px solid var(--red); background:var(--white); }
.sub-nav .inner{ padding:.6em 0 .37em; }
.sub-nav ul{ display:flex; }
.sub-nav li{ padding-right:2.3em; }
.sub-nav a{ text-decoration:none; }
.sub-nav li.current a,.sub-nav a:hover{ text-decoration:underline; }

/* ---------- Section title ---------- */
.strip{
  display:block;
  text-decoration:none;
  margin-bottom:1.1em;
}
.strip .h{
  display:block;
  font-size:1.3em; line-height:1.2; font-weight:700;
  letter-spacing:.04em; margin-bottom:.15em;
}
.strip .d{ display:block; }
a.strip:hover .h{ text-decoration:underline; }

/* ---------- The eight sections ---------- */
.feed{ margin-top:25px; padding:1.1em 0 6em; }
.card{ margin-bottom:3em; }
.card .image{ margin-bottom:1.3em; }
.card .image img,
.card .image video.clip{ width:100%; display:block; }
.image-caption{ font-size:85%; line-height:1.3; margin-top:.4em; }
.image-caption p{ margin-bottom:1em; }
.tagline{ margin-bottom:.7em; }
.card .text p:last-child{ margin-bottom:0; }
.btn{
  display:block; width:100%;
  padding:.2em 1.2em;
  margin:1.2em 0 0;
  text-align:center; text-decoration:none;
  box-shadow:inset 0 0 0 1px currentColor;
  transition:background .3s;
}
.btn:hover,.btn:focus{ background:rgba(0,0,0,.07); text-decoration:none; }

/* ---------- Plain page (contact and the like) ---------- */
.page{ margin-top:25px; padding:1.1em 0 6em; }
.page h1{
  font-size:1.15em; line-height:1.3; font-weight:400;
  margin:0 0 1.4em;
}
.page .lede{ max-width:32em; }
.page .lede p{ margin-bottom:1.4em; }
.page .block{
  border-top:1px solid var(--red);
  padding-top:1.1em; margin-top:2.4em; max-width:32em;
}

/* ---------- Footer ---------- */
.site-footer{ background:var(--red-deep); color:var(--white); text-align:center; }
.site-footer a{ color:var(--white); text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }
.site-footer .inner{ display:flex; flex-direction:column; }
.footer-nav{ padding:.32em 0; }
.footer-nav li{ padding:.4em 0; }
.copyright{ border-top:1px solid var(--white); padding:.8em 0; }

/* ---------- Back to top ---------- */
.back-to-top{
  position:fixed; right:var(--gutter); bottom:37px; z-index:900;
  width:50px; height:50px; border-radius:50%;
  background:var(--grey); opacity:0; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .3s;
}
.back-to-top.show{ opacity:.8; pointer-events:auto; }
.back-to-top:hover{ opacity:1; }
.back-to-top svg{ width:20px; height:20px; display:block; }

/* ================================================================
   1024px and up
   ================================================================ */
/* 1200px, not 1024: nine categories with 'a blog: clinical notes' among
   them need about that much bar before the wordmark gets clipped. Below
   it the hamburger takes over, which holds the nine as a list. */
@media (min-width:1200px){
  :root{ --gutter:4%; --hh:72px; }
  .wrap{ width:92%; }

  .burger,.mobile-menu{ display:none; }
  .site-header .inner{
    justify-content:space-between;
    gap:1em;
    padding:1.24em 0;
    border-bottom-color:transparent;
  }
  .wordmark{ font-size:1em; margin-top:0; }
  .main-nav{ display:block; }
  .main-nav ul{ display:flex; flex-wrap:nowrap; }
  /* nine items, one of them four words long, so they are kept on one line
     each and the spacing closes up as the window narrows */
  .main-nav li{
    padding-right:clamp(.9em, 1.9vw, 2.3em);
    line-height:1.6; position:relative; white-space:nowrap;
  }
  .main-nav li:last-child{ padding-right:0; }
  .wordmark{ flex:0 0 auto; padding-left:1.4em; }
  .main-nav a{ text-decoration:none; }
  .main-nav li.current > a,.main-nav a:hover{ text-decoration:underline; }
  .main-nav .sub{
    display:none; position:absolute; left:0; top:100%;
    background:var(--white); padding:.3em 0 .6em; min-width:9em;
  }
  .main-nav li:hover .sub{ display:block; }
  .main-nav .sub li{ padding:0; line-height:1.6; }

  .hero{ min-height:540px; }
  .slide .caption{ left:4.5%; bottom:3.2em; }
  .slide .caption .h{ font-size:2.1em; }
  .slide .caption .d{ font-size:1.25em; }
  .hero .arrow.prev{ left:1.4%; }
  .hero .arrow.next{ right:1.4%; }

  /* Current / Upcoming bar sticks under the header */
  .sub-nav{ position:sticky; top:var(--hh); z-index:998; }
  .sub-nav .inner{ padding:1.24em 0; line-height:1.6; }

  /* Two columns, 7/12 picture and 40.5% text, alternating sides.
     A picture keeps its own proportions and is never taller than 65vh,
     so an upright photograph sits narrower than the column. */
  .feed{ margin-top:0; padding-top:2em; }
  .card{ display:flex; flex-flow:row wrap; align-items:flex-start; margin-bottom:4em; }
  .card .image{ width:58.3333%; margin-bottom:1.3em; }
  .card .image img,
  .card .image video.clip{ width:auto; max-width:100%; max-height:65vh; }
  .card .text{ width:40.5%; padding-left:25px; margin-left:auto; }
  .card.flip .image{ order:2; }
  .card.flip .image img,
  .card.flip .image video.clip{ margin-left:auto; }
  .card.flip .image .image-caption{ text-align:left; }
  .card.flip .text{ order:1; padding-left:0; padding-right:25px; margin-left:0; margin-right:auto; }
  .tagline{ margin-bottom:1em; }
  .btn{ width:13em; }

  /* Plain page */
  .page{ margin-top:0; padding-top:3em; }

  /* Footer in one row: copyright left, links centre, icons right */
  .site-footer{ padding:2em 0 1.9em; }
  /* three columns so the links sit on the true centre of the page, not
     on the centre of what is left after the copyright */
  .site-footer .inner{
    width:92%; margin:0 auto;
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  }
  .footer-nav{ order:2; padding:0; text-align:center; }
  .footer-nav li{ display:inline-block; padding:0; margin:0 1em; }
  .copyright{ order:1; border:0; padding:0; text-align:left; }
  .site-footer .inner::after{ content:""; order:3; }
}

/* ---------- The blog list ----------
   Titles from emdr_notes, newest first. Five on load, five more each time
   the button is used. The body of a note is in the page already but hidden,
   so opening one needs no further request. */
.note-list{ margin:0 0 1.1em; }
.note-list li{ border-top:1px solid var(--red); }
.note-list li:last-child{ border-bottom:1px solid var(--red); }
.note-title{
  display:block; width:100%;
  padding:.62em 0 .66em;
  text-align:left; color:inherit;
}
.note-title .note-t{ display:block; line-height:1.3; }
.note-title .note-d{
  display:block; font-size:85%; line-height:1.3;
  margin-top:.15em; opacity:.72;
}
.note-title:hover .note-t,
.note-title[aria-expanded="true"] .note-t{ text-decoration:underline; }
.note-body{ padding:0 0 1em; }
.note-body p{ margin:0 0 .9em; }
.note-body p:last-child{ margin-bottom:0; }
.note-body img{ max-width:100%; height:auto; margin:.6em 0; }
.note-more[disabled]{ opacity:.45; cursor:default; }

/* ---------- Downloads ---------- */
.dl-list .note-d{ opacity:.85; }
.dl-links{ margin:.6em 0 0; }
.dl-label{ font-weight:700; }
.dl-link{ text-decoration:underline; }
.audio-player{ margin:.6em 0; }
.audio-player audio{ width:100%; }
.dl-support{ font-size:85%; line-height:1.45; margin:1.2em 0 0; }

/* ---------- Contact page ---------- */
.page .note-title{ padding:.2em 0 .4em; }
.page .note-body h2{ font-size:1.05em; font-weight:700; margin:1.4em 0 .4em; }
.page .note-body h3{ font-size:1em; font-weight:700; margin:1.1em 0 .3em; }
.page .note-body h2:first-child{ margin-top:.6em; }

/* events: year headings */
.ev-year{
  font-weight:700;
  letter-spacing:.04em;
  margin:1.4rem 0 .3rem;
  padding-bottom:.2rem;
  border-bottom:1px solid var(--red);
}
.ev-year:first-of-type{ margin-top:.6rem; }

/* contact page: the privacy policy expander */
.page .block{ max-width:46rem; border-top:1px solid var(--red); margin-top:2.4rem; }
.page .block .note-title{ padding:1rem 0; }
.page .block .note-body h2{
  font-size:1rem; font-weight:700; letter-spacing:.02em;
  margin:1.6rem 0 .4rem;
}
.page .block .note-body h2:first-child{ margin-top:.4rem; }
.page .block .note-body p{ margin:0 0 .8rem; }
.policy-date{ font-size:.85rem; opacity:.75; margin-top:1.6rem !important; }

/* the handwriting clip stands in for a photograph; the still shows instead
   when the visitor has asked for less motion */
@media (prefers-reduced-motion: reduce){
  video.clip{ display:none; }
  .has-clip-still{ display:block !important; }
}

/* ---------- Running text ----------
   Headings, rules, navigation and links stay the red of the jumper; the
   prose itself is an off-black so it does not fight the photographs.
   #2E2B2A measures 14.05:1 on white. */
.card .text p,
.page .lede p,
.page .block .note-body p,
.dl-support{ color:var(--ink); }

.card .text p.ev-year{ color:var(--red); }

/* links within the prose take the same off-black, underline included, so the
   red stays on the headings, rules and navigation */
.card .text p a,
.page .lede p a,
.page .block .note-body a,
.dl-support a{ color:var(--ink); text-decoration-color:var(--ink); }

/* A full-viewport slide crops to fill, and on a phone it crops hard from the
   sides. Where the subject sits at an edge, hold that edge instead of the
   centre: hold-left on the events picture keeps the standing figure in frame. */
.slide img.hold-left{ object-position:left center; }
.slide img.hold-right{ object-position:right center; }

/* ---------- Header over the opening picture ----------
   On the home page the navigation sits on the picture itself, in white, the
   way the caption does at the foot of it. A soft dark wash along the top
   carries the white wherever the picture happens to be pale. Once the
   picture has scrolled away the header returns to red on white, so the
   navigation stays readable over the sections and the footer. */
body.home{ padding-top:0; }
body.home .hero{
  height:100vh;
  height:100svh;
}
body.home .site-header{
  background:transparent;
  transition:background-color .25s ease, color .25s ease;
}
body.home .site-header::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  height:calc(var(--hh) + 2.6em);
  background:linear-gradient(to bottom,
    rgba(0,0,0,.66) 0,
    rgba(0,0,0,.60) 46%,
    rgba(0,0,0,.28) 68%,
    rgba(0,0,0,0) 100%);
}
body.home .site-header .inner{ border-bottom-color:transparent; }
body.home .site-header,
body.home .site-header a,
body.home .wordmark{
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
body.home .burger .bar,
body.home .burger .bar::before,
body.home .burger .bar::after{ background:#fff; }

/* past the picture, and whenever the phone menu is open, the ordinary header */
body.home.past-hero .site-header,
body.home.menu-open .site-header{ background:var(--white); }
body.home.past-hero .site-header::before,
body.home.menu-open .site-header::before{ opacity:0; }
body.home.past-hero .site-header .inner,
body.home.menu-open .site-header .inner{ border-bottom-color:var(--red); }
body.home.past-hero .site-header,
body.home.past-hero .site-header a,
body.home.past-hero .wordmark,
body.home.menu-open .site-header,
body.home.menu-open .site-header a,
body.home.menu-open .wordmark{ color:var(--red); }
body.home.past-hero .site-header a,
body.home.past-hero .wordmark,
body.home.menu-open .site-header a,
body.home.menu-open .wordmark{ text-shadow:none; }
body.home.past-hero .burger .bar,
body.home.past-hero .burger .bar::before,
body.home.past-hero .burger .bar::after,
body.home.menu-open .burger .bar,
body.home.menu-open .burger .bar::before,
body.home.menu-open .burger .bar::after{ background:var(--red); }

/* An anchor should land below the sticky header, not behind it. */
html{ scroll-padding-top:calc(var(--hh) + .6em); }