/* ==========================================================================
   CHRISTOPHER DOUGHER — gothic brand site
   Shared stylesheet. Palette and motifs after Zdzislaw Beksinski.
   ========================================================================== */

:root{
  --ink:#08070A;
  --char:#121016;
  --char-2:#191519;
  --ash:#8B8680;
  --bone:#DFD8C8;
  --bone-dim:#B5AC9B;
  --blood:#6B1F1F;
  --blood-lit:#8C2A24;
  --ochre:#A8763E;
  --moon:#C9D3DC;

  --display:'Pirata One',Cinzel,Georgia,serif;
  --display-alt:'Pirata One',Cinzel,Georgia,serif;
  --serif:'EB Garamond','Cormorant Garamond',Georgia,'Times New Roman',serif;
  --caps:Cinzel,Georgia,serif;

  --rule:1px solid rgba(223,216,200,.14);
  --rule-iron:1px solid rgba(168,118,62,.42);
  --shadow:0 18px 48px rgba(0,0,0,.62);
  --wrap:1180px;
  --gut:clamp(1.15rem,4vw,3rem);
  --sec:clamp(3.5rem,9vw,7.5rem);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--bone-dim);
  font-family:var(--serif);
  font-size:clamp(1.02rem,.55vw + .92rem,1.16rem);
  line-height:1.78;
  letter-spacing:.006em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--ochre);text-decoration:none;}
a:hover{color:var(--bone);}
:focus-visible{outline:2px solid var(--moon);outline-offset:3px;border-radius:2px;}

h1,h2,h3,h4{font-family:var(--display);font-weight:400;color:var(--bone);
  line-height:1.06;letter-spacing:.035em;margin:0 0 .7em;}
h1{font-size:clamp(2.5rem,7.5vw,5.6rem);}
h2{font-size:clamp(1.95rem,4.6vw,3.4rem);}
h3{font-size:clamp(1.35rem,2.4vw,1.85rem);}
h4{font-size:clamp(1.05rem,1.6vw,1.28rem);letter-spacing:.08em;}
p{margin:0 0 1.15em;}
strong{color:var(--bone);font-weight:600;}

.eyebrow{font-family:var(--caps);font-size:.78rem;letter-spacing:.34em;
  text-transform:uppercase;color:#C08A4A;margin:0 0 1rem;}
.lede{font-size:1.16em;color:var(--bone);}
.pull{font-family:var(--display);font-size:clamp(1.5rem,3.4vw,2.5rem);
  color:var(--bone);line-height:1.28;letter-spacing:.03em;margin:2.4rem 0;
  padding-left:1.4rem;border-left:2px solid var(--blood-lit);}
.rule-orn{display:flex;align-items:center;gap:1rem;margin:0 0 2.2rem;color:var(--ochre);}
.rule-orn::before,.rule-orn::after{content:"";height:1px;flex:1;
  background:linear-gradient(90deg,transparent,rgba(168,118,62,.55),transparent);}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);}
.narrow{max-width:760px;}
.section{padding:var(--sec) 0;position:relative;}
.center{text-align:center;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* grain + ash mottling over everything */
.grain{position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");}
.vignette{position:fixed;inset:0;z-index:9997;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%,transparent 45%,rgba(4,3,5,.55) 100%);}

/* ---------------- header ---------------- */
.site-head{position:absolute;top:0;left:0;right:0;z-index:60;
  padding:1.1rem var(--gut);display:flex;align-items:center;
  justify-content:space-between;gap:1rem;}
.brand{font-family:var(--display);font-size:clamp(1.15rem,1.7vw,1.5rem);
  color:var(--bone);letter-spacing:.06em;line-height:1;
  text-shadow:0 2px 14px rgba(0,0,0,.85);}
.brand span{color:var(--ochre);}
.site-nav ul{list-style:none;display:flex;gap:clamp(.7rem,1.6vw,1.7rem);
  margin:0;padding:0;align-items:center;}
.site-nav a{font-family:var(--caps);font-size:.76rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bone-dim);
  padding:.4rem .2rem;border-bottom:1px solid transparent;transition:.28s;}
.site-nav a:hover,.site-nav a[aria-current="page"]{
  color:var(--bone);border-bottom-color:var(--ochre);}
.home .site-nav{display:none;}
.home .menu-btn{display:none;}
.menu-btn{display:none;background:none;border:var(--rule-iron);
  color:var(--bone);font-family:var(--caps);font-size:.72rem;
  letter-spacing:.2em;text-transform:uppercase;padding:.5rem .75rem;cursor:pointer;}
.menu-btn:hover{color:var(--ochre);border-color:var(--ochre);}

/* ---------------- hero ---------------- */
.hero{position:relative;min-height:100svh;display:grid;align-content:end;
  justify-items:center;overflow:hidden;isolation:isolate;--pos:50% 50%;
  padding:16vh var(--gut) 8rem;
  /* same photograph as the <img> below: guarantees the sky paints even if the
     image element itself is blocked or still decoding */
  background:#08070A url("hero-moon.jpg") var(--pos) / cover no-repeat;}
/* keep the moon in frame as the still is cropped by object-fit:cover */
@media (max-aspect-ratio:16/10){.hero{--pos:62% 50%}}
@media (max-aspect-ratio:4/3){.hero{--pos:72% 50%}}
@media (max-aspect-ratio:1/1){.hero{--pos:78% 50%}}
.hero__still{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:var(--pos);z-index:0;}
/* drifting cloud plates — derived from the same photograph */
.hero__cloud{position:absolute;top:0;z-index:1;pointer-events:none;
  mix-blend-mode:screen;background-repeat:no-repeat;background-size:100% 100%;
  will-change:transform;}
.hero__cloud--a{left:-8%;width:116%;aspect-ratio:2400/696;opacity:.82;
  background-image:url("hero-clouds.webp");
  animation:cloudDriftA 18s ease-in-out infinite alternate;}
.hero__cloud--b{left:-9%;width:78%;aspect-ratio:1800/1433;opacity:.52;
  background-image:url("hero-clouds-b.webp");
  animation:cloudDriftB 25s ease-in-out infinite alternate;}
@keyframes cloudDriftA{from{transform:translate3d(-12%,0,0)}to{transform:translate3d(12%,0,0)}}
@keyframes cloudDriftB{from{transform:translate3d(11%,0,0)}to{transform:translate3d(-11%,0,0)}}
/* moon halo — centred on the moon's real position in the photograph */
/* moon bloom: a transparent plate the exact size of the still, so cover-crop
   keeps the glow locked onto the real moon at every viewport */
.hero__halo{position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:url("hero-halo.png");background-size:cover;
  background-position:var(--pos);background-repeat:no-repeat;
  mix-blend-mode:screen;animation:moonPulse 7.5s ease-in-out infinite;}
@keyframes moonPulse{0%,100%{opacity:.5}50%{opacity:.95}}
.hero__scrim{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(to top,var(--ink) 0%,rgba(8,7,10,.94) 16%,
    rgba(8,7,10,.7) 34%,rgba(8,7,10,.3) 56%,rgba(8,7,10,.34) 100%);}
/* ash */
.embers{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden;}
.ember{position:absolute;bottom:-4vh;width:2px;height:2px;border-radius:50%;
  background:rgba(223,216,200,.55);animation:rise linear infinite;opacity:0;}
@keyframes rise{
  0%{transform:translate3d(0,0,0);opacity:0}
  12%{opacity:.7}
  88%{opacity:.35}
  100%{transform:translate3d(6vw,-104vh,0);opacity:0}}
.ember:nth-child(1){left:6%;animation-duration:26s;animation-delay:0s}
.ember:nth-child(2){left:14%;animation-duration:34s;animation-delay:5s;background:rgba(168,118,62,.5)}
.ember:nth-child(3){left:23%;animation-duration:29s;animation-delay:11s}
.ember:nth-child(4){left:33%;animation-duration:38s;animation-delay:2s}
.ember:nth-child(5){left:41%;animation-duration:24s;animation-delay:16s;background:rgba(168,118,62,.45)}
.ember:nth-child(6){left:52%;animation-duration:32s;animation-delay:8s}
.ember:nth-child(7){left:61%;animation-duration:36s;animation-delay:21s}
.ember:nth-child(8){left:69%;animation-duration:27s;animation-delay:3s;background:rgba(140,42,36,.5)}
.ember:nth-child(9){left:76%;animation-duration:41s;animation-delay:13s}
.ember:nth-child(10){left:84%;animation-duration:30s;animation-delay:19s}
.ember:nth-child(11){left:91%;animation-duration:35s;animation-delay:7s;background:rgba(168,118,62,.4)}
.ember:nth-child(12){left:96%;animation-duration:25s;animation-delay:24s}

.hero__inner{position:relative;z-index:6;text-align:center;max-width:1000px;}
.hero__name{font-family:var(--display);font-size:clamp(2.9rem,8.8vw,7rem);
  line-height:.98;letter-spacing:.02em;margin:0;
  color:#EDE7DA;
  text-shadow:0 0 26px rgba(201,211,220,.3),0 0 70px rgba(201,211,220,.14),
              0 8px 34px rgba(0,0,0,.92);}
.hero__sub{font-family:var(--caps);font-size:clamp(.68rem,1.5vw,.86rem);
  letter-spacing:.42em;text-transform:uppercase;color:var(--ochre);
  margin:1.5rem 0 clamp(2rem,4vw,3rem);}
.hero-nav{display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(.55rem,1.3vw,1.05rem);list-style:none;margin:0;padding:0;}
.hero-nav a{
  display:block;font-family:var(--caps);font-size:clamp(.66rem,1.25vw,.78rem);
  letter-spacing:.22em;text-transform:uppercase;color:var(--bone);
  padding:.85em 1.5em;position:relative;
  background:linear-gradient(180deg,rgba(25,21,25,.9),rgba(12,10,13,.95));
  border:1px solid rgba(168,118,62,.5);
  box-shadow:inset 0 1px 0 rgba(223,216,200,.09),inset 0 -14px 24px rgba(0,0,0,.55),0 6px 20px rgba(0,0,0,.62);
  transition:transform .3s ease,border-color .3s ease,color .3s ease,box-shadow .3s ease;
  clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),
    calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px);}
.hero-nav a:hover,.hero-nav a:focus-visible{
  transform:translateY(-2px);border-color:var(--moon);color:#F3EEE2;
  box-shadow:inset 0 1px 0 rgba(223,216,200,.14),inset 0 -14px 24px rgba(0,0,0,.45),
             0 0 22px rgba(201,211,220,.28),0 10px 26px rgba(0,0,0,.7);}
.hero-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--blood-lit),transparent);
  opacity:0;transition:opacity .3s;}
.hero-nav a:hover::after{opacity:1;}
.hero__cue{position:absolute;left:50%;bottom:2.2rem;transform:translateX(-50%);
  z-index:6;font-family:var(--caps);font-size:.63rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--ash);display:flex;
  flex-direction:column;align-items:center;gap:.6rem;}
.hero__cue::after{content:"";width:1px;height:38px;
  background:linear-gradient(180deg,var(--ochre),transparent);
  animation:cueDrop 3.4s ease-in-out infinite;}
@keyframes cueDrop{0%,100%{opacity:.35;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* ---------------- page banner (inner pages) ---------------- */
.banner{position:relative;padding:clamp(7rem,15vh,11rem) 0 clamp(2.5rem,6vw,4rem);
  text-align:center;overflow:hidden;
  background:
    radial-gradient(60% 100% at 50% 0%,rgba(107,31,31,.28),transparent 70%),
    radial-gradient(40% 70% at 82% 6%,rgba(201,211,220,.09),transparent 72%),
    linear-gradient(180deg,var(--char) 0%,var(--ink) 100%);}
.banner::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(168,118,62,.5),transparent);}
.banner h1{margin:0 0 .5rem;}
.banner p{max-width:660px;margin:0 auto;color:var(--ash);}

/* ---------------- generic blocks ---------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,5vw,4.5rem);align-items:center;}
.frame{position:relative;padding:14px;background:linear-gradient(160deg,var(--char-2),var(--char));
  border:1px solid rgba(168,118,62,.35);box-shadow:var(--shadow);}
.frame::before{content:"";position:absolute;inset:6px;border:1px solid rgba(223,216,200,.09);}
.frame svg{display:block;width:100%;height:auto;}
.card{position:relative;display:flex;flex-direction:column;
  background:linear-gradient(165deg,var(--char-2),rgba(8,7,10,.96));
  border:var(--rule);box-shadow:var(--shadow);padding:1.6rem;
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;}
.card .btn{margin-top:auto;align-self:flex-start;}
.card:hover{transform:translateY(-5px);border-color:rgba(168,118,62,.5);
  box-shadow:0 26px 56px rgba(0,0,0,.72);}
.card h3{margin-bottom:.35rem;}
.grid{display:grid;gap:clamp(1.3rem,3vw,2.2rem);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.meta{font-family:var(--caps);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ash);}
.tag{display:inline-block;font-family:var(--caps);font-size:.66rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ochre);
  border:1px solid rgba(168,118,62,.4);padding:.28em .7em;margin:0 .4em .5em 0;}
.btn{display:inline-block;font-family:var(--caps);font-size:.74rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--bone);
  padding:.8em 1.6em;border:1px solid rgba(168,118,62,.5);
  background:linear-gradient(180deg,rgba(25,21,25,.9),rgba(12,10,13,.95));
  transition:.3s;}
.btn:hover{color:#F3EEE2;border-color:var(--moon);
  box-shadow:0 0 20px rgba(201,211,220,.22);transform:translateY(-2px);}
.btn--solid{background:linear-gradient(180deg,var(--blood-lit),var(--blood));
  border-color:rgba(140,42,36,.8);}
.btn--solid:hover{background:linear-gradient(180deg,#A3342C,var(--blood-lit));}

/* ---------------- books ---------------- */
.book-cover{aspect-ratio:2/3;display:grid;place-content:center;text-align:center;
  padding:1.5rem 1.2rem;position:relative;overflow:hidden;
  background:
    radial-gradient(80% 60% at 50% 32%,rgba(201,211,220,.09),transparent 70%),
    linear-gradient(170deg,#1B1619,#0A090C 70%);
  border:1px solid rgba(168,118,62,.38);
  box-shadow:inset 0 0 60px rgba(0,0,0,.9),var(--shadow);}
.book-cover::before{content:"";position:absolute;inset:9px;
  border:1px solid rgba(223,216,200,.12);}
.book-cover::after{content:"";position:absolute;inset:13px;
  border:1px solid rgba(223,216,200,.06);}
.book-cover h3{font-size:clamp(1.15rem,1.9vw,1.65rem);color:#EDE7DA;
  margin:0 0 .5rem;letter-spacing:.05em;position:relative;z-index:2;}
.book-cover .oc{width:44px;height:1px;background:var(--ochre);
  margin:.9rem auto;position:relative;z-index:2;}
.book-cover .au{font-family:var(--caps);font-size:.62rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ash);position:relative;z-index:2;}
.book-cover .mo{position:absolute;width:78%;aspect-ratio:1;border-radius:50%;
  left:50%;top:18%;transform:translateX(-50%);
  background:radial-gradient(circle at 38% 34%,rgba(201,211,220,.16),rgba(201,211,220,.05) 46%,transparent 68%);
  pointer-events:none;}
.book-body{padding:1.3rem 0 0;}
.book-card{display:flex;flex-direction:column;}
.book-card .book-cover{transition:border-color .35s ease,box-shadow .35s ease;}
.book-card:hover .book-cover{border-color:rgba(168,118,62,.62);
  box-shadow:inset 0 0 60px rgba(0,0,0,.9),0 26px 56px rgba(0,0,0,.72);}
.taglist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;}
.taglist li{font-family:var(--caps);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone-dim);
  border:1px solid rgba(223,216,200,.16);padding:.5em .9em;}

/* ---------------- shirts ---------------- */
.product{display:flex;flex-direction:column;}
.product__art{aspect-ratio:4/5;display:grid;place-items:center;position:relative;
  background:linear-gradient(175deg,#151215,#0A090C);
  border:1px solid rgba(223,216,200,.1);overflow:hidden;}
.product__art svg{width:74%;height:auto;position:relative;z-index:2;}
.product__art::after{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 60% at 50% 38%,rgba(201,211,220,.08),transparent 72%);}
.product h3{margin:.9rem 0 .2rem;}
.price{font-family:var(--caps);font-size:.85rem;letter-spacing:.14em;color:var(--ochre);}

/* ---------------- projects ---------------- */
.tl{position:relative;padding-left:clamp(1.6rem,4vw,3rem);}
.tl::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:1px;
  background:linear-gradient(180deg,transparent,rgba(168,118,62,.55) 12%,rgba(168,118,62,.45) 88%,transparent);}
.tl__item{position:relative;padding:0 0 clamp(2.4rem,5vw,3.6rem);}
.tl__item::before{content:"";position:absolute;left:calc(clamp(1.6rem,4vw,3rem) * -1 + 1px);top:.62em;
  width:11px;height:11px;border-radius:50%;background:var(--ink);
  border:1px solid var(--ochre);box-shadow:0 0 14px rgba(168,118,62,.55);}
.tl__plate{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:1.2rem;}
.tl__plate div{aspect-ratio:1;border:1px solid rgba(223,216,200,.09);
  background:linear-gradient(160deg,#161316,#0A090C);overflow:hidden;}
.tl__plate svg{width:100%;height:100%;display:block;}

/* ---------------- contact ---------------- */
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;}
.field{margin-bottom:1.15rem;}
.field label{display:block;font-family:var(--caps);font-size:.7rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ash);margin-bottom:.5rem;}
.field input,.field textarea{width:100%;font-family:var(--serif);font-size:1rem;
  color:var(--bone);background:rgba(18,16,22,.85);
  border:1px solid rgba(223,216,200,.16);padding:.85rem .95rem;transition:.28s;}
.field textarea{min-height:170px;resize:vertical;}
.field input:focus,.field textarea:focus{outline:none;
  border-color:var(--blood-lit);box-shadow:0 0 0 3px rgba(107,31,31,.28);}
.field .err{display:none;font-size:.86rem;color:#C4645C;margin-top:.4rem;}
.field.invalid input,.field.invalid textarea{border-color:#8C2A24;}
.field.invalid .err{display:block;}
.form__note{font-size:.9rem;color:var(--ash);}
.form__msg{margin-top:1.2rem;padding:1rem 1.15rem;border:var(--rule-iron);
  background:rgba(25,21,25,.75);color:var(--bone);display:none;}
.form__msg.show{display:block;}
.contact-form{max-width:740px;margin:0 auto;padding:clamp(1.3rem,4vw,2.4rem);text-align:left;background:var(--char);border:var(--rule-iron);}
.contact-form h2{margin:0 0 .5rem;}
.contact-form .field textarea{min-height:210px;line-height:1.5;}
.contact-form .btn{cursor:pointer;}
.contact-form .btn:disabled{cursor:not-allowed;opacity:.55;}
.contact-form .form__note{margin:1rem 0 0;}
.contact-form .form__note a{color:var(--moon);}
.socials{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;margin:1.4rem 0 0;padding:0;}
.socials a{display:block;font-family:var(--caps);font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--bone-dim);
  border:1px solid rgba(223,216,200,.16);padding:.6em 1em;transition:.3s;}
.socials a:hover{color:var(--bone);border-color:var(--ochre);
  box-shadow:0 0 18px rgba(168,118,62,.22);}

/* ---------------- footer ---------------- */
.site-foot{border-top:var(--rule);padding:clamp(2.4rem,6vw,4rem) 0 3rem;
  background:linear-gradient(180deg,transparent,rgba(18,16,22,.6));}
.site-foot__in{display:flex;flex-wrap:wrap;gap:1.4rem;
  justify-content:space-between;align-items:center;}
.site-foot p{margin:0;font-size:.88rem;color:var(--ash);}
.foot-nav{list-style:none;display:flex;flex-wrap:wrap;gap:1.1rem;margin:0;padding:0;}
.foot-nav a{font-family:var(--caps);font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ash);}
.foot-nav a:hover{color:var(--ochre);}

/* ---------------- responsive ---------------- */
@media (max-width:980px){
  .split{grid-template-columns:1fr;}
  .grid-3{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:820px){
  .hero__cloud--a{opacity:.58;}
  .hero__cloud--b{opacity:.32;width:88%;left:-14%;}
}
@media (max-width:760px){
  .menu-btn{display:inline-block;}
  .site-nav{position:absolute;top:100%;right:var(--gut);left:var(--gut);
    background:rgba(10,9,12,.97);border:var(--rule-iron);
    padding:1rem 1.2rem;box-shadow:var(--shadow);display:none;}
  .site-nav.open{display:block;}
  .site-nav ul{flex-direction:column;align-items:flex-start;gap:.35rem;}
  .grid-2,.grid-3{grid-template-columns:1fr;}
  .form__row{grid-template-columns:1fr;}
  .tl__plate{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:420px){
  .hero-nav a{padding:.75em 1.15em;letter-spacing:.16em;}
  .site-foot__in{flex-direction:column;align-items:flex-start;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .hero__cloud,.hero__halo,.ember,.hero__cue::after{animation:none !important;}
  .hero__halo{opacity:.8;}
  .ember{display:none;}
}

/* Additions for the revised, factual pages */
.skip-link{position:absolute;left:1rem;top:-5rem;z-index:10000;padding:.5rem 1rem;background:var(--bone);color:var(--ink)}
.skip-link:focus{top:1rem}
.section--tight{padding-top:0}
.space-top{margin-top:2.6rem}
.taglist{display:flex;gap:.4rem;flex-wrap:wrap}
.design-grid{margin-top:2.3rem}
.hero__cue:hover{color:var(--bone)}
@media (max-width:760px){
  .home .site-nav{display:none}
  .hero{padding-bottom:5.5rem}
  .hero__inner{width:100%}
  .hero__name{font-size:clamp(2.5rem,11vw,4rem);overflow-wrap:break-word}
  .hero-nav{gap:.5rem}
  .hero-nav a{font-size:.65rem;padding:.8em .95em;letter-spacing:.12em}
  .hero__cue{bottom:1rem}
}
@media (max-width:360px){.hero-nav a{font-size:.61rem}}

/* Portrait, shops, and the personal writing desk */
.portrait-frame{background:#220d10;border:1px solid rgba(168,118,62,.48);padding:.65rem;box-shadow:var(--shadow)}
.portrait-frame img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block}
.meet-section,.about-section{grid-template-columns:minmax(250px,.82fr) minmax(0,1.18fr)}
.button-row{display:flex;align-items:center;flex-wrap:wrap;gap:.8rem;margin:1.6rem 0}
.button-row--center{justify-content:center}
.btn--pending{opacity:.66;cursor:default;pointer-events:none}
.pull{text-align:left}
.journal-notice{max-width:860px;margin:0 auto 2rem;padding:1.1rem 1.4rem;border-left:2px solid var(--ochre);background:var(--char)}
.journal-notice p{margin:0}.journal-notice strong{font-family:var(--caps);font-size:.78rem;letter-spacing:.12em}
.journal-form{max-width:860px;margin:0 auto 3.5rem}.journal-form:hover{transform:none}
.journal-form h2{font-size:clamp(1.8rem,3vw,2.5rem)}
.journal-form__row{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:1rem}
.journal-form label{display:block;font-family:var(--caps);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bone);margin:0 0 1.3rem}
.journal-form input:not([type=file]),.journal-form textarea,.journal-form select{display:block;width:100%;min-width:0;padding:.75rem .8rem;margin-top:.45rem;border:1px solid rgba(223,216,200,.27);border-radius:0;background:#100e13;color:var(--bone);font-family:var(--serif);font-size:1.08rem;letter-spacing:normal;text-transform:none}
.journal-form textarea{resize:vertical;min-height:170px;line-height:1.5}
.journal-form button{font-family:var(--caps);cursor:pointer}
.journal-form .file-button{margin:0;cursor:pointer}.journal-form .file-button:hover{color:var(--bone);border-color:var(--moon)}
.journal-status{min-height:1.6rem;margin:1rem 0 0;color:var(--moon)}
.journal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
.journal-panel{padding:1.6rem;border:1px solid rgba(168,118,62,.35);background:linear-gradient(155deg,#19201b,#0d0d0e 78%)}
.journal-panel--negative{background:linear-gradient(155deg,#231718,#0d0d0e 78%);border-color:rgba(150,77,70,.4)}
.journal-panel h2{margin:0 0 .25rem}.journal-panel .eyebrow{margin-bottom:.4rem}
.journal-intro{color:var(--bone-dim);font-style:italic}
.journal-list{display:grid;gap:1rem;margin-top:1.4rem}
.journal-entry{border-top:1px solid rgba(223,216,200,.2);padding-top:1rem;overflow-wrap:anywhere}
.journal-entry h3{font-size:1.4rem;margin:.1rem 0}.journal-entry p{white-space:pre-wrap;margin:.55rem 0}
.journal-entry time{color:var(--ash);font-family:var(--caps);font-size:.67rem;letter-spacing:.12em}
.journal-entry button{font-family:var(--caps);font-size:.65rem;color:var(--bone);background:none;border:1px solid rgba(223,216,200,.32);padding:.35rem .6rem;margin-right:.45rem;cursor:pointer}
.journal-empty{font-style:italic;color:var(--ash)}
@media(max-width:850px){.journal-form__row{grid-template-columns:1fr 1fr}.journal-form__row label:first-child{grid-column:1/-1}}
@media(max-width:760px){.meet-section,.about-section,.journal-grid{grid-template-columns:1fr}.portrait-frame{max-width:560px;margin:0 auto}.journal-form__row{grid-template-columns:1fr}.journal-form__row label:first-child{grid-column:auto}}

/* The shirt shops are the main call to action on the home and design pages. */
.shop-spotlight{width:min(100%,920px);margin:2rem auto 2.5rem;}
.shop-spotlight__label{font-family:var(--caps);font-size:.85rem;letter-spacing:.23em;text-transform:uppercase;color:var(--bone);margin:0 0 .9rem;}
.shop-spotlight__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.75rem,2vw,1.4rem);}
.shop-tile{min-height:clamp(150px,16vw,205px);padding:clamp(1.15rem,3vw,2.2rem);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:.25rem;color:#f6f0e4;background:linear-gradient(145deg,#702420,#320f14 70%,#191014);border:2px solid #c28b51;box-shadow:inset 0 0 0 5px rgba(8,7,10,.56),0 18px 36px rgba(0,0,0,.7);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
a.shop-tile:hover,a.shop-tile:focus-visible{color:#fff9e9;border-color:#f0cf91;transform:translateY(-4px);box-shadow:inset 0 0 0 5px rgba(8,7,10,.56),0 0 32px rgba(194,139,81,.48),0 20px 38px rgba(0,0,0,.72);}
.shop-tile__action{font-family:var(--caps);font-size:.72rem;letter-spacing:.25em;text-transform:uppercase;color:#e4c79d;line-height:1.5;}
.shop-tile__name{font-family:var(--display);font-size:clamp(2.25rem,5vw,3.9rem);line-height:1.08;letter-spacing:.03em;color:#fff7e9;}
.shop-tile__detail{font-family:var(--serif);font-size:1.05rem;color:#f0e2ce;line-height:1.35;}
.shop-tile--teepublic{background:linear-gradient(145deg,#334045,#182328 75%,#11151a);border-color:#a7bfbe;}
.shop-tile--teepublic .shop-tile__action{color:#d6eeed;}
.hero .shop-spotlight{position:relative;z-index:7;margin:0 auto 2rem;}
.hero--shops{align-content:center;padding-top:8rem;padding-bottom:5rem;}
.hero .shop-spotlight__label{text-shadow:0 2px 12px #08070a;}
.hero .hero__sub{margin-bottom:1.4rem;}
.hero .hero-nav{margin-top:1.5rem;}
.shop-section{padding-top:clamp(2.6rem,6vw,4.8rem);background:linear-gradient(180deg,#171114,var(--ink));}
.shop-section .shop-spotlight{margin-bottom:1rem;}
.shop-section h2{margin-bottom:.3rem;}
.shop-section .shop-note{margin:1rem auto 0;max-width:640px;}
@media(max-width:700px){
  .shop-spotlight__grid{grid-template-columns:1fr;}
  .shop-tile{min-height:118px;padding:1rem;}
  .shop-tile__name{font-size:clamp(2rem,9vw,2.9rem);}
  .hero--shops{padding-top:6.5rem;padding-bottom:4.8rem;}
  .hero .shop-spotlight{margin:0 auto 1.3rem;}
  .hero .shop-tile{min-height:105px;}
  .hero .hero-nav{margin-top:1.2rem;}
  .hero .hero__sub{margin:.8rem 0;}
}

/* A readable quotation beside the Watchers in the Sky project. */
.watchers-trust{padding:clamp(2.5rem,6vw,5rem) 0;
  background:linear-gradient(180deg,#151319 0%,#08070a 100%);}
.watchers-trust__panel{max-width:960px;margin:auto;padding:clamp(1.5rem,4vw,3.5rem);
  border:1px solid rgba(194,139,81,.66);text-align:center;
  background:radial-gradient(ellipse at 50% 0%,rgba(97,106,119,.24),transparent 60%),#131116;
  box-shadow:0 22px 45px rgba(0,0,0,.44);}
.watchers-trust h2{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,5vw,3.7rem);
  line-height:1.16;letter-spacing:0;margin:0 0 .55em;color:#f3eee3;}
.watchers-trust blockquote{margin:0 auto 1.7rem;max-width:750px;}
.watchers-trust blockquote p{font-family:var(--serif);font-size:clamp(1.4rem,3vw,2.25rem);
  line-height:1.3;color:#f6e8d2;margin:0 0 .65rem;}
.watchers-trust blockquote footer{font-family:var(--caps);font-size:.72rem;
  letter-spacing:.12em;color:#d5b27d;}
.watchers-trust__blessing{font-size:clamp(1.13rem,2vw,1.4rem);color:var(--bone);
  margin:0 auto 1.6rem;}

.art-visions__layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(1.4rem,4vw,3.5rem);align-items:center;}
.art-visions__image{border:1px solid rgba(168,118,62,.6);padding:.5rem;
  background:#171318;box-shadow:var(--shadow);}
.art-visions__image img{width:100%;aspect-ratio:1.4;object-fit:cover;}
.art-visions__copy h2{font-family:var(--serif);font-weight:600;letter-spacing:0;
  line-height:1.13;}
.art-visions__copy .btn{margin-top:.7rem;}
.watchers-paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,3vw,2rem);margin-top:clamp(2rem,5vw,4rem);}
@media(max-width:760px){
  .art-visions__layout,.watchers-paths{grid-template-columns:1fr;}
  .art-visions__image img{aspect-ratio:1.5;}
}