/*
Theme Name: Fuller Frameworks
Theme URI: https://fullerframeworks.com/
Author: Drew Fuller
Description: Single-page theme for Fuller Frameworks - handcrafted backyard
  sauna and cold-plunge retreats in Bozeman, Montana.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fuller-frameworks
*/

:root{
    --bg0:#0e0b09; --bg1:#191410; --copper:#c89768; --copper-l:#d7ac82; --sage:#7c8a63;
    --cream:#ece4d6; --mut:#a89e8e; --hair:rgba(236,228,214,.13); --ink:#14100c;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;font-family:'Jost',system-ui,sans-serif;color:var(--cream);line-height:1.6;
    background-color:var(--bg0);
    background-image:url("assets/img/texture.svg");background-size:1200px auto;background-attachment:fixed;background-position:center top;
    -webkit-font-smoothing:antialiased}
  .serif{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;letter-spacing:.005em}
  h1,h2,h3{margin:0;font-weight:500}
  p{margin:0} a{color:inherit;text-decoration:none}
  .wrap{max-width:1200px;margin:0 auto;padding:0 40px}
  .eyebrow{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--copper);font-weight:500}
  .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
  .reveal.in{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}html{scroll-behavior:auto}}
  section[id]{scroll-margin-top:90px}

  /* header */
  nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;
      padding:20px 40px;transition:background .4s,padding .4s;background:linear-gradient(180deg,rgba(14,11,9,.85),transparent)}
  nav.scrolled{background:rgba(14,11,9,.96);padding:12px 40px;box-shadow:0 1px 0 var(--hair)}
  .brand{display:flex;align-items:center;gap:14px}
  .emblem{width:46px;height:44px;display:block;flex:none}
  .emblem svg{width:100%;height:100%}
  .bwm{display:flex;flex-direction:column;line-height:1}
  .b1{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:600;letter-spacing:.34em;color:var(--cream);padding-left:.34em}
  .b2{font-size:.52rem;letter-spacing:.42em;color:var(--copper);margin-top:3px;text-align:center}
  .nav-cta{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;padding:12px 22px;border:1px solid var(--hair);color:var(--cream);transition:border-color .3s,background .3s}
  .nav-cta:hover{border-color:var(--copper);background:rgba(200,151,104,.08)}

  /* hero */

.hero-media,.hero-scrim{position:absolute;inset:0}
.hero-media{overflow:hidden;background:#0e0b09}
.hero-media img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.94)}
.hero-scrim{pointer-events:none;background:linear-gradient(to bottom,rgba(14,11,9,.90) 0%,rgba(14,11,9,.52) 30%,rgba(14,11,9,.58) 62%,rgba(14,11,9,.95) 100%)}
.hero>.eyebrow,.hero>h1,.hero>.lede,.hero>.hactions,.hero>.cue{position:relative;z-index:2}
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:130px 32px 80px;position:relative}
  .hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 40%,transparent,rgba(14,11,9,.4));pointer-events:none}
  .hero .eyebrow{margin-bottom:22px}
  .hero h1{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(2.8rem,6.5vw,5.4rem);line-height:1.02;max-width:15ch;letter-spacing:.01em}
  .hero .accent{font-style:italic;color:var(--copper-l);display:block;font-size:.82em;margin-top:.1em}
  .hero .lede{max-width:52ch;color:var(--mut);font-size:1.08rem;margin:26px auto 34px}
  .hactions{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
  .btn{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;padding:15px 30px;cursor:pointer;border:1px solid transparent;transition:filter .3s,border-color .3s,background .3s}
  .btn-p{background:var(--copper);color:var(--ink);font-weight:500}.btn-p:hover{filter:brightness(1.08)}
  .btn-g{border-color:var(--hair);color:var(--cream)}.btn-g:hover{border-color:var(--copper)}
  .cue{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mut);display:flex;flex-direction:column;align-items:center;gap:8px}
  .cue .st{width:1px;height:34px;background:linear-gradient(var(--copper),transparent);animation:cue 1.9s ease-in-out infinite}
  @keyframes cue{0%,100%{opacity:.3}50%{opacity:1}}

  .pad{padding:120px 0}
  .panel{background:rgba(25,20,16,.62)}
  .band{background:rgba(14,11,9,.55)}

  /* full picture (two column) */
  .fp{display:grid;grid-template-columns:1fr 1fr;gap:70px}
  @media(max-width:900px){.fp{grid-template-columns:1fr;gap:40px}}
  .fp h2{font-family:'Cormorant Garamond',serif;font-size:clamp(2.2rem,4vw,3.4rem);line-height:1.08;margin:16px 0 26px}
  .fp h2 em{font-style:italic;color:var(--copper-l);display:block}
  .fp .body p{color:var(--mut);margin-bottom:18px;font-size:1rem}
  .fp-list{display:flex;flex-direction:column;gap:34px}
  .fpi{display:grid;grid-template-columns:52px 1fr;gap:6px}
  .fpi .n{font-family:'Cormorant Garamond',serif;font-size:1.7rem;color:var(--copper);line-height:1}
  .fpi .l{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cream);margin-bottom:8px}
  .fpi .d{color:var(--mut);font-size:.94rem}
  .fp-photo{margin-top:66px;position:relative;overflow:hidden;border:1px solid var(--hair)}
  .fp-photo img{width:100%;aspect-ratio:var(--iasp,16/9);object-fit:cover;object-position:center;display:block}
  .fp-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 26px;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(1.05rem,1.8vw,1.4rem);color:var(--cream);background:linear-gradient(0deg,rgba(10,8,6,.9),rgba(10,8,6,.35) 60%,transparent)}

  /* tiers */
  .head{max-width:640px;margin:0 auto 60px;text-align:center}
  .head h2{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,4vw,3rem);margin-top:12px}
  .head p{color:var(--mut);margin-top:14px}
  .tier{display:grid;grid-template-columns:1.15fr .85fr;gap:0;align-items:stretch;margin-bottom:26px;border:1px solid var(--hair)}
  @media(max-width:900px){.tier,.tier.img-right{grid-template-columns:1fr}}
  .tier.img-right{grid-template-columns:.85fr 1.15fr}
  .t-photo{min-height:420px;background:linear-gradient(150deg,#2a2018,#140f0b);display:flex;align-items:flex-end;padding:18px}
  .t-photo span{font-size:.72rem;color:var(--mut);background:rgba(0,0,0,.4);padding:6px 12px;border-radius:2px}
  /* real-photo tiers: show the whole 3:2 image, never crop the structure */
  .tier.has-img{align-items:center}
  .t-photo.has-img{min-height:0;padding:0;background:#0b0906;aspect-ratio:3/2}
  .t-photo.has-img img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
  @media(max-width:900px){.t-photo.has-img{aspect-ratio:3/2}}
  .t-detail{padding:48px 44px;display:flex;flex-direction:column;background:rgba(25,20,16,.5)}
  .t-detail h3{font-size:clamp(2.4rem,3.6vw,3.2rem);line-height:1;margin:14px 0 6px}
  .t-dim{color:var(--mut);font-size:.95rem;letter-spacing:.05em}
  .rule{height:1px;background:var(--hair);margin:22px 0}
  .feat{list-style:none;padding:0;margin:0 0 26px;display:flex;flex-direction:column;gap:14px}
  .feat li{display:flex;align-items:center;gap:14px;color:var(--cream);font-size:.98rem}
  .fdot{width:7px;height:7px;border:1px solid var(--copper);transform:rotate(45deg);flex:none}
  .t-price{margin-top:auto;font-family:'Cormorant Garamond',serif;font-size:1.5rem;color:var(--cream)}
  .t-price span{font-family:'Jost',sans-serif;font-size:.82rem;color:var(--mut)}

  /* how it works */
  .hiw-head{text-align:center;margin-bottom:70px}
  .hiw-head h2{font-family:'Cormorant Garamond',serif;font-size:clamp(2.4rem,5vw,4rem);line-height:1.08;margin-top:18px}
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
  @media(max-width:860px){.steps{grid-template-columns:1fr 1fr;gap:40px}}
  @media(max-width:520px){.steps{grid-template-columns:1fr}}
  .step .n{font-family:'Cormorant Garamond',serif;font-size:2.8rem;color:var(--sage);line-height:1;margin-bottom:18px}
  .step .l{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cream);margin-bottom:12px;min-height:2.2em}
  .step .d{color:var(--mut);font-size:.92rem}

  /* founder */
  .founder{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:center}
  @media(max-width:860px){.founder{grid-template-columns:1fr;gap:34px}}
  .fportrait{aspect-ratio:4/5;background:linear-gradient(160deg,#3a2a1c,#140f0b);display:flex;align-items:flex-end;padding:18px;border:1px solid var(--hair)}
  .fportrait span{font-size:.72rem;color:var(--mut);background:rgba(0,0,0,.4);padding:6px 12px}
  .fcopy h2{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,3.4vw,2.8rem);line-height:1.1;margin:14px 0 6px}
  .fcopy .role{color:var(--copper);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:20px}
  .fcopy p{color:var(--mut);margin-bottom:15px}

  /* contact */
  .contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
  @media(max-width:860px){.contact{grid-template-columns:1fr;gap:40px}}
  .ccopy h2{font-family:'Cormorant Garamond',serif;font-size:clamp(2.2rem,4vw,3.2rem);line-height:1.08;margin-top:14px}
  .ccopy .accent{font-style:italic;color:var(--copper-l)}
  .ccopy p{color:var(--mut);margin:20px 0}
  form.consult{display:flex;flex-direction:column;gap:20px}
  form.consult label{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);display:block;margin-bottom:9px}
  form.consult input,form.consult select,form.consult textarea{width:100%;font-family:'Jost',sans-serif;font-size:.98rem;padding:12px 2px;background:transparent;border:none;border-bottom:1px solid var(--hair);color:var(--cream)}
  form.consult textarea{min-height:120px;border:1px solid var(--hair);padding:14px;resize:vertical}
  form.consult input:focus,form.consult textarea:focus,form.consult select:focus{outline:none;border-color:var(--copper)}
  form.consult button{margin-top:6px;background:var(--copper);color:var(--ink);border:none;padding:17px;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500;cursor:pointer}
  .fnote{font-size:.68rem;color:var(--mut);text-align:center;letter-spacing:.05em}

  /* footer */
  footer{padding:80px 0 50px;text-align:center;border-top:1px solid var(--hair)}
  .fbrand{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:8px}
  .fbrand .emblem{width:64px;height:60px}
  .fbrand .b1{font-size:1.9rem}
  .foot-tag{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--copper-l);font-size:1.25rem;margin-top:14px}
  .foot-loc{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mut);margin-top:16px}
  .foot-cr{font-size:.72rem;color:var(--mut);margin-top:22px;opacity:.7}

  /* ==========================================================================
     Multi-page additions: nav links, interior page heroes, home teasers,
     the Projects placeholder and generic page/404 bodies.
     ========================================================================== */

  /* primary nav */
  .brand-link{display:flex;align-items:center;gap:14px}
  .nav-links{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0}
  .nav-links a{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);
    padding:6px 0;position:relative;transition:color .3s}
  .nav-links a:hover{color:var(--cream)}
  .nav-links a.is-current{color:var(--cream)}
  .nav-links a.is-current::after{content:"";position:absolute;left:0;right:0;bottom:0;
    height:1px;background:var(--copper)}

  @media(max-width:1040px){
    nav{flex-wrap:wrap;justify-content:center;gap:14px 0;padding:14px 24px}
    nav.scrolled{padding:10px 24px}
    .nav-links{order:3;width:100%;justify-content:center;gap:22px;
      border-top:1px solid var(--hair);padding-top:12px}
    .brand{margin-right:auto}
    .nav-cta{margin-left:auto}
  }
  @media(max-width:460px){
    .nav-links{gap:16px}
    .nav-links a{font-size:.64rem;letter-spacing:.14em}
    .nav-cta{font-size:.64rem;padding:10px 16px}
  }

  /* interior page hero */
  .page-hero{padding:190px 0 70px;position:relative;text-align:center;
    border-bottom:1px solid var(--hair);
    background:radial-gradient(120% 140% at 50% 0%,rgba(200,151,104,.10),transparent 62%)}
  .page-hero h1{font-family:'Cormorant Garamond',Georgia,serif;
    font-size:clamp(2.4rem,5.4vw,4rem);line-height:1.06;margin-top:16px}
  .ph-lede{max-width:620px;margin:22px auto 0;color:var(--mut);font-size:1.02rem}
  @media(max-width:1040px){.page-hero{padding:210px 0 60px}}
  @media(max-width:560px){.page-hero{padding:200px 0 48px}}

  /* home teasers reuse the .tier grid, with copy instead of a spec list */
  .t-detail h2{font-family:'Cormorant Garamond',Georgia,serif;
    font-size:clamp(1.7rem,2.8vw,2.4rem);line-height:1.12;margin-top:10px}
  .t-body{color:var(--mut);margin-top:4px}
  .t-cta{display:inline-block;margin-top:26px;font-size:.72rem;letter-spacing:.2em;
    text-transform:uppercase;color:var(--copper);transition:color .3s}
  .t-cta:hover{color:var(--copper-l)}
  .t-cta span{display:inline-block;transition:transform .3s}
  .t-cta:hover span{transform:translateX(5px)}

  /* centred call to action band on the home page */
  .home-cta{text-align:center}
  .home-cta h2{font-family:'Cormorant Garamond',Georgia,serif;
    font-size:clamp(2rem,4vw,3rem);margin-top:12px}
  .home-cta p{color:var(--mut);margin-top:16px;max-width:560px;
    margin-left:auto;margin-right:auto}
  .home-cta .hactions{margin-top:34px}

  /* Projects placeholder, 404 and archive bodies */
  .soon{max-width:720px;margin:0 auto;text-align:center}
  .soon-rule{width:54px;height:1px;background:var(--copper);margin:0 auto 30px}
  .soon h2{font-family:'Cormorant Garamond',Georgia,serif;
    font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.14}
  .soon p{color:var(--mut);margin-top:18px}

  /* generic editable page content */
  .page-body{max-width:760px;margin:0 auto}
  .page-body p{color:var(--mut);margin-top:18px}
  .page-body h2,.page-body h3{font-family:'Cormorant Garamond',Georgia,serif;margin-top:36px}
  .page-body a{color:var(--copper);text-decoration:underline;text-underline-offset:3px}
  .page-body ul,.page-body ol{color:var(--mut);margin-top:18px;padding-left:22px}
  .page-body li{margin-top:8px}
  .page-body img{max-width:100%;height:auto;display:block;margin:28px auto}

  /* "Rendering" badge — these studios are drawn, not photographed, and the
     page says so rather than letting a visitor assume otherwise. */
  .t-photo.has-img{position:relative}
  .render-tag{position:absolute;left:14px;bottom:14px;
    background:rgba(14,11,9,.74);border:1px solid var(--hair);color:var(--cream);
    font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
    padding:7px 11px;line-height:1;pointer-events:none}
  @media(max-width:560px){.render-tag{left:10px;bottom:10px;font-size:.55rem;padding:6px 9px}}

  /* ==========================================================================
     Link affordance. Buttons and the brand mark carry their own signals, so
     they stay clean; anything that reads as a text link gets an underline.
     ========================================================================== */

  /* links inside body copy */
  p a, li a, figcaption a,
  .body a, .lede a, .ph-lede a, .page-body a, .soon a, .fcopy a, .ccopy a{
    color:var(--copper);
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:3px;
    transition:color .3s;
  }
  p a:hover, li a:hover, figcaption a:hover,
  .body a:hover, .lede a:hover, .ph-lede a:hover, .page-body a:hover,
  .soon a:hover, .fcopy a:hover, .ccopy a:hover{color:var(--copper-l)}

  /* standalone text links, e.g. "View the studios →" */
  .t-cta{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}

  /* nav items are never underlined; position and the colour shift on hover
     are enough, and the current page keeps its copper rule. */
  .nav-links a,
  .nav-links a:hover{text-decoration:none}

  /* founder portrait */
  .fportrait{padding:0;overflow:hidden}
  .fportrait img{width:100%;height:100%;object-fit:cover;object-position:center 32%;display:block}

  /* ==========================================================================
     Sauna kit installation page
     ========================================================================== */
  .price-block{max-width:720px;margin:0 auto;text-align:center}
  .price-figure{font-family:'Cormorant Garamond',Georgia,serif;
    font-size:clamp(3rem,7vw,4.6rem);line-height:1;color:var(--copper);margin-top:14px}
  .price-note{color:var(--mut);margin-top:22px;line-height:1.75}


  /* entry tier + other work, on the Products page */
  .entry{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;
    border:1px solid var(--copper);padding:38px 40px;margin-bottom:26px;
    background:rgba(200,151,104,.05)}
  @media(max-width:760px){.entry{grid-template-columns:1fr;gap:26px;padding:30px 24px}}
  .entry h3{font-family:'Cormorant Garamond',Georgia,serif;
    font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.15;margin-top:10px}
  .entry p{color:var(--mut);margin-top:12px;max-width:640px}
  .entry .price{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--copper);margin-top:14px}

  .other-work{border-top:1px solid var(--hair);margin-top:54px;padding-top:40px;
    text-align:center}
  .other-work ul{list-style:none;margin:18px 0 0;padding:0;
    display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px}
  .other-work li{color:var(--mut);font-size:.84rem;letter-spacing:.1em;
    text-transform:uppercase}

  /* ==========================================================================
     Prior work (About), credentials (Installation), direct contact details
     ========================================================================== */


  /* credentials */
  .creds-grid{list-style:none;margin:0;padding:0;display:grid;
    grid-template-columns:1fr 1fr;gap:1px;background:var(--hair);
    border:1px solid var(--hair)}
  @media(max-width:760px){.creds-grid{grid-template-columns:1fr}}
  .creds-grid li{background:var(--bg0);padding:30px 28px;display:flex;
    flex-direction:column;gap:10px}
  .creds-grid .k{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
    color:var(--copper)}
  .creds-grid .v{color:var(--mut);font-size:.9rem;line-height:1.65}

  /* direct contact details */
  .direct{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
    gap:14px 30px;margin-top:34px}
  .contact .direct{justify-content:flex-start;margin-top:22px}
  .direct a{color:var(--cream);text-decoration:none;transition:color .3s}
  .direct a:hover{color:var(--copper)}
  .direct-phone{font-family:'Cormorant Garamond',Georgia,serif;
    font-size:clamp(1.5rem,3vw,2rem);letter-spacing:.02em;line-height:1}
  .direct-mail{font-size:.8rem;letter-spacing:.14em;text-transform:lowercase;
    color:var(--mut);text-decoration:underline;text-underline-offset:4px}

  .foot-contact{margin-top:10px;font-size:.8rem;letter-spacing:.08em;color:var(--mut)}
  .foot-contact a{color:var(--mut);text-decoration:none;transition:color .3s}
  .foot-contact a:hover{color:var(--copper)}
  .foot-sep{margin:0 10px;opacity:.5}


  /* contact page: phone and email set at the same weight */
  .contact .direct{gap:10px 26px}
  .contact .direct a{
    font-family:'Cormorant Garamond',Georgia,serif;
    font-size:clamp(1.2rem,2.2vw,1.55rem);
    line-height:1.2;letter-spacing:.01em;text-transform:none;
    color:var(--cream);text-decoration:none;
  }
  .contact .direct a:hover{color:var(--copper)}

  /* ==========================================================================
     About: intro band, previous-work slider
     ========================================================================== */

  .intro{display:grid;grid-template-columns:.95fr 1.05fr;gap:60px;align-items:center}
  @media(max-width:940px){.intro{grid-template-columns:1fr;gap:38px}}
  .intro-media{margin:0;border:1px solid var(--hair);background:#0b0906}
  .intro-media img{width:100%;height:auto;display:block}
  .intro-media figcaption{padding:14px 18px;font-size:.76rem;letter-spacing:.06em;
    color:var(--mut);border-top:1px solid var(--hair)}
  .intro-copy h1{font-family:'Cormorant Garamond',Georgia,serif;
    font-size:clamp(2.1rem,4vw,3.1rem);line-height:1.1;margin-top:14px}
  .intro-copy .w-body{margin-top:24px}
  .intro-copy .w-body p{color:var(--mut);margin-top:16px;line-height:1.75}
  .intro-copy .w-body p:first-child{margin-top:0}
  .intro-copy strong{color:var(--cream);font-weight:500}
  /* the About page opens on this band, so clear the fixed nav */
  .intro-sec{padding-top:170px}
  @media(max-width:1040px){.intro-sec{padding-top:190px}}

  /* slider */
  .slider{position:relative;margin-top:14px}
  .slides{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
    scroll-behavior:smooth;padding-bottom:6px;
    scrollbar-width:none;-ms-overflow-style:none}
  .slides::-webkit-scrollbar{display:none}
  .slides:focus-visible{outline:1px solid var(--copper);outline-offset:6px}
  .slide{flex:0 0 clamp(250px,30%,340px);scroll-snap-align:start;
    border:1px solid var(--hair);background:rgba(255,255,255,.012)}
  .slide-img{aspect-ratio:4/3;background:#0b0906;overflow:hidden}
  .slide-img img{width:100%;height:100%;object-fit:cover;display:block}
  .slide-img.is-drawing{background:#efece5;padding:14px;display:flex;align-items:center}
  .slide-img.is-drawing img{object-fit:contain;height:auto;max-height:100%}
  .slide-meta{padding:22px 22px 26px}
  .slide-meta h3{font-family:'Cormorant Garamond',Georgia,serif;
    font-size:1.25rem;line-height:1.2;margin-top:9px}
  .slide-meta p{color:var(--mut);font-size:.84rem;line-height:1.65;margin-top:11px}

  .slide-nav{position:absolute;top:calc(50% - 40px);transform:translateY(-50%);z-index:3;
    width:42px;height:42px;border:1px solid var(--hair);background:rgba(14,11,9,.88);
    color:var(--cream);cursor:pointer;font-size:1rem;line-height:1;
    transition:border-color .3s,opacity .3s}
  .slide-nav:hover{border-color:var(--copper)}
  .slide-nav[disabled]{opacity:.22;cursor:default}
  .slide-nav.prev{left:-21px}
  .slide-nav.next{right:-21px}
  @media(max-width:860px){.slide-nav{display:none}}

  .prior-note{max-width:820px;margin:38px auto 0;text-align:center;
    color:var(--mut);font-size:.86rem;line-height:1.7}