:root{
  --bg:#fbf6ea; --panel:#ffffff; --ink:#1d2a24; --soft:#5f7168;
  --line:#e2d8c2; --accent:#34674b; --on-accent:#ffffff; --radius:10px;
  --gold:#b68721;
  --serif: Baskerville, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#101915; --panel:#1a2822; --ink:#e7f0ea; --soft:#8fa89a;
    --line:#2c4437; --accent:#e3bb63; --on-accent:#101915; --radius:4px;
    --gold:#e3bb63;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--serif); font-size:1.06rem; line-height:1.65;
}
.wrap{max-width:44rem; margin:0 auto; padding:2rem 1.25rem 4rem}
header{border-bottom:1px solid var(--line); margin-bottom:2.25rem}
.brand{display:inline-block; text-decoration:none; color:inherit; padding-bottom:1.1rem}
.brand b{font-weight:600; font-size:2.1rem; letter-spacing:.005em; line-height:1.1}
nav{display:flex; gap:1.4rem; padding-bottom:.9rem; font-size:.98rem}
nav a{color:var(--soft); text-decoration:none; border-bottom:1px solid transparent; padding-bottom:2px}
nav a:hover,nav a:focus{color:var(--accent); border-bottom-color:var(--accent)}
nav a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--accent)}
h1{font-size:1.6rem; line-height:1.25; font-weight:600; margin:0 0 .6rem}
h2{font-size:1.22rem; font-weight:600; margin:2.2rem 0 .5rem}
p{margin:0 0 1.1rem; max-width:34rem}
.lede{font-size:1.18rem; color:var(--soft); max-width:32rem; margin-bottom:1.8rem}
a{color:var(--accent)}
dl{margin:0}
dt{color:var(--soft); font-size:.94rem; margin-top:1.1rem}
dd{margin:.15rem 0 0}
.verse{
  position:relative; z-index:0;           
  background:var(--bg);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:var(--radius);
  padding:.85rem 1rem;
  color:var(--soft); font-style:italic; margin:1.6rem 0; max-width:32rem;
}
.verse::before, figure.cliff figcaption::before, figure.vine figcaption::before{
  content:""; position:absolute; inset:0; z-index:-1;
  border-radius:inherit; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.04;
}
.verse span, figure.cliff figcaption span, figure.vine figcaption span{display:block; font-style:normal; font-size:.9rem; margin-top:.35rem; color:var(--accent)}
footer{
  border-top:1px solid var(--line); margin-top:3.5rem; padding-top:1.2rem;
  color:var(--soft); font-size:.9rem;
}

main{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.75rem 2rem 1.9rem;
}
main > :last-child{margin-bottom:0}

@media (max-width:32rem){
  .wrap{padding-left:.85rem; padding-right:.85rem}
  main{padding:1.15rem 1.1rem 1.25rem}
}


@media (min-width:40rem){
  .wrap{max-width:50rem; padding:2.5rem 1.75rem 4.5rem}
  main{padding:2rem 2.4rem 2.2rem}
}

@media (min-width:72rem){
  .wrap{
    max-width:80rem;
    padding:3.25rem 3rem 5rem;
    display:grid;
    grid-template-columns:minmax(0,47rem) minmax(0,1fr);
    column-gap:4rem;
    align-items:start;
  }

  header{
    grid-column:1 / -1;
    display:flex; align-items:flex-end; justify-content:space-between;
    gap:3rem; margin-bottom:2.9rem;
  }
  .brand{padding-bottom:1.15rem}
  .brand b{font-size:2.45rem}
  nav{padding-bottom:1.15rem; gap:1.7rem; font-size:1.02rem}

  main{
    grid-column:1;
    --sheet-pad-right:4.75rem;
    --sheet-pad-left:3.4rem;
    padding:2.9rem var(--sheet-pad-right) 3.1rem var(--sheet-pad-left);
  }

  h1,h2{max-width:34rem}

  footer{grid-column:1 / -1}

  .wrap{container-type:inline-size}
  .wrap > :not(header):not(footer){
    --composition-shift:clamp(0px, 100cqw - 1048px, 100px);
    transform:translateX(var(--composition-shift));
  }
  html body .wrap > .deco{right:var(--composition-shift)}
}


figure.cliff, figure.vine{
  margin:2rem 0 2.2rem;
  padding:0;
}

.cliff-frame{
  aspect-ratio:12 / 5;            
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:.5rem 1rem;
  color:var(--soft);
  font-size:.9rem;
  font-style:italic;
}

.cliff-img, .vine-img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:12 / 5;            
  object-fit:cover;               
  border:1px solid var(--line);
  border-radius:var(--radius);
}

figure.cliff figcaption, figure.vine figcaption{
  position:relative; z-index:0;           
  margin-top:.55rem;
  max-width:34rem;
  background:var(--bg);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:var(--radius);
  padding:.85rem 1rem;
  color:var(--soft);
  font-size:.9rem;
  line-height:1.5;
}
figure.cliff figcaption em, figure.vine figcaption em{font-style:italic}

@media (min-width:72rem){
  figure.cliff{
    --cliff-overhang:calc(100cqw - 47rem + 1px - 10px - var(--composition-shift) - var(--cliff-shift)); 
    --cliff-shift:200px;          
    margin-left:var(--cliff-shift);
    margin-right:calc(-1 * (var(--sheet-pad-right) + var(--cliff-overhang) + var(--cliff-shift)));
  }
  figure.cliff figcaption{max-width:87.8%}
}

@media (min-width:100rem){
  .verse, figure.vine{
    --verse-overhang:50px;      
    margin-left:calc(-1 * (var(--sheet-pad-left) + 1px + var(--verse-overhang)));
  }
  figure.vine figcaption{max-width:calc(34rem + var(--sheet-pad-left) + 1px + var(--verse-overhang))}
  figure.cliff figcaption{max-width:89.57%}
}


body.about .deco{display:none}

@media (min-width:72rem){

  body.about .wrap{position:relative; z-index:0}

  body.about .deco{
    display:block;
    position:absolute; inset:0;
    z-index:-1;
    pointer-events:none;
  }

  body.about .deco > *{position:absolute; border:0; border-radius:0}

  body.about .deco .tex::before{
    content:""; position:absolute; inset:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity:var(--tex);
  }


  body.about .ab-rule-a{left:1052px; top:1784px; width:1px; height:514px; background:var(--gold); z-index:1}

  body.about .ab-rule-b{left:836px; top:2338px; width:1px; height:294px; background:var(--gold); z-index:4}


  body.about .ab-orn-1{left:984px; top:1918px; width:112px; height:96px; background:var(--bg); border:1px solid var(--gold); --tex:.16; z-index:3}

  body.about .ab-orn-2{left:742px; top:2088px; width:96px; height:96px; border:1px solid var(--gold); z-index:2}

  body.about .ab-orn-3{left:812px; top:2390px; width:134px; height:64px; border:1px solid var(--gold); z-index:1}


  body.about .ab-rule-c{left:944px; top:196px; width:1px; height:328px; background:var(--gold); z-index:1}

  body.about .ab-orn-4{left:916px; top:250px; width:104px; height:58px; background:var(--panel); border:1px solid var(--gold); z-index:3}

  body.about .ab-orn-5{left:836px; top:392px; width:76px; height:76px; border:1px solid var(--gold); z-index:2}

  body.about .ab-orn-6{left:1000px; top:2488px; width:80px; height:70px; border:1px solid var(--gold); z-index:2}
}



body.home main{
  background:none;
  border:0;
  border-radius:0;
  padding:0;
}

body.home .plate{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.75rem 2rem 1.9rem;      
  margin-bottom:var(--plate-gap);
  margin-left:var(--plate-shift, 0px);
  margin-right:calc(-1 * var(--plate-shift, 0px));
}

body.home{--plate-gap:1.25rem}

body.home .plate:last-child{margin-bottom:0}

body.home .plate > :first-child{margin-top:0}
body.home .plate > :last-child{margin-bottom:0}

@media (max-width:32rem){
  body.home .plate{padding:1.15rem 1.1rem 1.25rem}
  body.home{--plate-gap:.85rem}
}

@media (min-width:40rem){
  body.home .plate{padding:2rem 2.4rem 2.2rem}
  body.home{--plate-gap:1.1rem}
}

@media (min-width:72rem){
  body.home .plate{
    padding:2.9rem var(--sheet-pad-right) 3.1rem var(--sheet-pad-left);
  }
  body.home{--plate-gap:1.5rem}

  body.home .plate:nth-child(3){--plate-shift:5rem}    
  body.home .plate:nth-child(5){--plate-shift:11rem}  
  body.home .plate:nth-child(2){--plate-shift:2.5rem}  
}



body.home .deco{display:none}

@media (min-width:72rem){

  body.home .wrap{position:relative; z-index:0}

  body.home .deco{
    display:block;
    position:absolute; inset:0;
    z-index:-1;
    pointer-events:none;
  }

  body.home .deco > *{position:absolute; border:0; border-radius:0}

  body.home .deco .tex::before{
    content:""; position:absolute; inset:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity:var(--tex);
  }


  body.home .rule-a{left:22px; top:196px; width:1px; height:546px; background:var(--gold); z-index:4}

  body.home .rule-b{left:828px; top:138px; width:1px; height:522px; background:var(--gold); z-index:1}

  body.home .rule-c{left:1008px; top:262px; width:1px; height:686px; background:var(--gold); z-index:1}





  body.home .orn-1{left:770px; top:194px; width:152px; height:152px; background:var(--bg); border:1px solid var(--gold); --tex:.16; z-index:3}

  body.home .orn-2{left:902px; top:404px; width:84px; height:84px; border:1px solid var(--gold); z-index:3}

  body.home .orn-3{left:946px; top:452px; width:148px; height:76px; background:var(--line); border:1px solid var(--gold); z-index:2}

  body.home .orn-4{left:16px; top:600px; width:46px; height:46px; border:1px solid var(--gold); z-index:2}


  body.home .orn-6{left:862px; top:640px; width:134px; height:56px; border:1px solid var(--gold); z-index:2}

  body.home .orn-7{left:872px; top:842px; width:156px; height:78px; background:var(--bg); border:1px solid var(--gold); --tex:.22; z-index:3}



  body.home .orn-10{left:48px; top:424px; width:46px; height:46px; border:1px solid var(--gold); z-index:2}





  body.home .orn-14{left:54px; top:676px; width:108px; height:88px; border:1px solid var(--gold); z-index:2}
}



body.contact .deco{display:none}

@media (min-width:72rem){

  body.contact .wrap{position:relative; z-index:0}

  body.contact .deco{
    display:block;
    position:absolute; inset:0;
    z-index:-1;
    pointer-events:none;
  }

  body.contact .deco > *{position:absolute; border:0; border-radius:0}

  body.contact .deco .tex::before{
    content:""; position:absolute; inset:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity:var(--tex);
  }



  body.contact .ct-rule-b{left:842px; top:221px; width:1px; height:266px; background:var(--gold); z-index:1}



  body.contact .ct-orn-3{left:812px; top:275px; width:130px; height:66px; background:var(--bg); border:1px solid var(--gold); --tex:.22; z-index:3}

  body.contact .ct-orn-2{left:636px; top:456px; width:118px; height:68px; border:1px solid var(--gold); z-index:2}
}


body.credits .deco{display:none}

@media (min-width:72rem){
  body.credits .wrap{position:relative; z-index:0}
  body.credits .deco{
    display:block;
    position:absolute; inset:0;
    z-index:-1;
    pointer-events:none;
  }
  body.credits .deco > *{position:absolute; border:0; border-radius:0}
  body.credits .deco .tex::before{
    content:""; position:absolute; inset:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity:var(--tex);
  }

  body.credits .cr-rule-a{left:872px; top:236px; width:1px; height:452px; background:var(--gold); z-index:1}

  body.credits .cr-orn-1{left:840px; top:300px; width:110px; height:80px; background:var(--bg); border:1px solid var(--gold); --tex:.13; z-index:3}

  body.credits .cr-rule-b{left:1000px; top:830px; width:1px; height:158px; background:var(--gold); z-index:1}

  body.credits .cr-orn-2{left:968px; top:900px; width:122px; height:52px; background:var(--bg); border:1px solid var(--gold); --tex:.28; z-index:3}
}


body.services .deco{display:none}

@media (min-width:72rem){
  body.services .wrap{position:relative; z-index:0}
  body.services .deco{
    display:block;
    position:absolute; inset:0;
    z-index:-1;
    pointer-events:none;
  }
  body.services .deco > *{position:absolute; border:0; border-radius:0}
  body.services .deco .tex::before{
    content:""; position:absolute; inset:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity:var(--tex);
  }

  body.services .sv-rule-a{left:858px; top:184px; width:1px; height:236px; background:var(--gold); z-index:1}

  body.services .sv-orn-1{left:830px; top:240px; width:110px; height:80px; background:var(--bg); border:1px solid var(--gold); --tex:.16; z-index:3}

  body.services .sv-orn-2{left:980px; top:356px; width:76px; height:76px; border:1px solid var(--gold); z-index:2}
}


body.gleanings .deco{display:none}

@media (min-width:72rem){
  body.gleanings .wrap{position:relative; z-index:0}
  body.gleanings .deco{
    display:block;
    position:absolute; inset:0;
    z-index:-1;
    pointer-events:none;
  }
  body.gleanings .deco > *{position:absolute; border:0; border-radius:0}
  body.gleanings .deco .tex::before{
    content:""; position:absolute; inset:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity:var(--tex);
  }

  body.gleanings .gl-rule-a{left:1000px; top:206px; width:1px; height:350px; background:var(--gold); z-index:1}

  body.gleanings .gl-orn-1{left:950px; top:300px; width:134px; height:56px; background:var(--bg); border:1px solid var(--gold); --tex:.22; z-index:3}

  body.gleanings .gl-orn-2{left:776px; top:470px; width:80px; height:70px; border:1px solid var(--gold); z-index:2}
}