/* Kiki Palace — one stylesheet, no build step.
   Paper & ink body, deep-teal hero block. */

:root{
  --paper:#FAFAF7;
  --paper-2:#F3F2EC;
  --ink:#15181A;
  --dim:#5F6467;
  --rule:#DEDCD2;
  --teal:#1F5C66;       /* accent — from the cover's title lettering */
  --teal-hi:#2E7F8B;
  --deep:#14313A;       /* hero block — the cover's dominant color */
  --deep-2:#1C4650;
  --cyan:#4FBAC6;
  --blush:#9A5C6B;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --measure:66ch;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:18px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--teal)}
h1,h2,h3,h4{font-weight:400;margin:0;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

.wrap{max-width:1120px;margin-inline:auto;padding-inline:24px}
.narrow{max-width:760px;margin-inline:auto;padding-inline:24px}
@media(max-width:520px){.wrap,.narrow{padding-inline:18px}}

.label{
  font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--teal);
  display:block;
}
.label-dim{color:var(--dim)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:99;background:var(--ink);color:var(--paper);padding:10px 14px;font-family:var(--sans);font-size:14px}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* ---------- header ---------- */
.site-head{border-bottom:1px solid var(--rule);background:var(--paper)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:20px;flex-wrap:wrap}
.brand{font-family:var(--serif);font-size:20px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.site-nav ul{display:flex;gap:26px;flex-wrap:wrap;font-family:var(--sans);font-size:14px}
.site-nav a{color:var(--dim);text-decoration:none;padding-bottom:3px}
.site-nav a:hover{color:var(--ink)}
.site-nav a[aria-current="page"]{color:var(--ink);border-bottom:1px solid var(--teal)}

/* ---------- hero block (deep teal) ---------- */
.hero{display:grid;grid-template-columns:1.3fr .7fr;margin-top:40px}
@media(max-width:880px){.hero{grid-template-columns:1fr;margin-top:24px}}
.hero-text{
  background:var(--deep);color:#EDF3F3;
  padding:52px 48px 56px;position:relative;overflow:hidden;
}
@media(max-width:600px){.hero-text{padding:34px 24px 40px}}
.hero-text::after{
  content:"";position:absolute;right:-80px;bottom:-100px;width:280px;height:280px;
  border-radius:50%;background:radial-gradient(circle,rgba(79,186,198,.28),transparent 68%);
}
.hero-kicker{
  display:inline-block;font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--deep);
  background:var(--cyan);padding:6px 12px;position:relative;z-index:1;
}
.hero h1{
  font-size:clamp(40px,7vw,80px);line-height:.98;letter-spacing:-.02em;
  margin-top:26px;position:relative;z-index:1;
}
.hero h1 i{font-style:italic;color:var(--cyan)}
.hero-sub{
  font-family:var(--sans);font-size:16px;line-height:1.6;color:#AFC7C9;
  max-width:42ch;margin-top:22px;position:relative;z-index:1;
}
.hero-by{
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:#83A8AB;margin-top:28px;position:relative;z-index:1;
}
.hero-by a{color:var(--cyan)}
.hero-cover{
  background:linear-gradient(170deg,var(--deep-2),#25585F);
  display:flex;align-items:center;justify-content:center;padding:36px;
}
.hero-cover img{width:100%;max-width:250px;box-shadow:0 24px 48px rgba(6,22,26,.42)}

/* buy bar */
.buybar{display:flex;flex-wrap:wrap;border:2px solid var(--deep);border-top:0}
.buybar a{
  flex:1 1 200px;text-align:center;padding:19px 16px;text-decoration:none;
  font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
}
.buybar a+a{border-left:2px solid var(--deep)}
@media(max-width:600px){.buybar a+a{border-left:0;border-top:2px solid var(--deep)}}
.buy-amazon{background:var(--deep);color:#fff}
.buy-amazon:hover{background:#0E262D}
.buy-direct{background:var(--paper);color:var(--deep)}
.buy-direct:hover{background:var(--paper-2)}
.buy-read{background:var(--blush);color:#fff}
.buy-read:hover{background:#87505D}
.buy-note{
  font-family:var(--sans);font-size:13px;color:var(--dim);
  margin-top:14px;text-align:center;
}

/* ---------- sections (paper & ink) ---------- */
.section{border-top:1px solid var(--rule);padding-block:56px}
.section:first-of-type{border-top:0}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:30px}
.section-head p{font-style:italic;color:var(--dim);font-size:18px}
h2.sec{font-size:clamp(26px,3.6vw,38px)}

/* poem columns */
.poem-cols{display:grid;grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.poem-cols{grid-template-columns:1fr}}
.poem{padding:2px 28px;border-left:1px solid var(--rule);display:flex;flex-direction:column}
.poem:first-child{padding-left:0;border-left:0}
@media(max-width:820px){
  .poem{padding:24px 0 0;border-left:0;border-top:1px solid var(--rule);margin-top:24px}
  .poem:first-child{border-top:0;margin-top:0;padding-top:2px}
}
.poem h3{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);margin-bottom:12px}
.poem blockquote{margin:0;font-size:19px;line-height:1.5;font-style:italic}
.poem .tags{font-family:var(--sans);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--teal);margin-top:auto;padding-top:16px;display:block}

/* about strip */
.about-strip{display:grid;grid-template-columns:230px 1fr;gap:44px;align-items:start}
@media(max-width:760px){.about-strip{grid-template-columns:1fr;gap:26px}}
.portrait{border:1px solid var(--rule);background:var(--paper-2);padding:10px}
@media(max-width:760px){.portrait{max-width:240px}}
.stand{
  font-style:italic;color:var(--teal);font-size:21px;line-height:1.45;
  border-left:2px solid var(--teal);padding-left:20px;margin-top:26px;
}
.prose p{max-width:var(--measure);margin-top:16px}
.prose p:first-child{margin-top:0}

/* reads (video) */
.reads{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:760px){.reads{grid-template-columns:repeat(2,1fr);gap:16px}}
@media(max-width:460px){.reads{grid-template-columns:1fr}}
.read{
  position:relative;aspect-ratio:9/16;background:var(--deep);overflow:hidden;
  border:1px solid var(--rule);
}
.read iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.read-facade{
  position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;cursor:pointer;
  background:linear-gradient(165deg,var(--deep-2),#0F272E);color:#DCE9EA;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  font-family:var(--sans);font-size:13px;letter-spacing:.06em;text-align:center;padding:20px;
}
.read-facade:hover .play{background:var(--cyan);color:var(--deep)}
.play{
  width:54px;height:54px;border-radius:50%;border:1px solid var(--cyan);color:var(--cyan);
  display:flex;align-items:center;justify-content:center;font-size:18px;
  transition:background .2s,color .2s;
}
.reads-empty{
  border:1px dashed var(--rule);padding:22px;text-align:center;
  font-family:var(--sans);font-size:14px;color:var(--dim);
}

/* socktopus grid */
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:560px){.photo-grid{gap:8px}}
.photo-grid img{aspect-ratio:1;object-fit:cover;background:var(--paper-2)}

/* two-up teaser */
.two-up{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--rule);border:1px solid var(--rule)}
@media(max-width:760px){.two-up{grid-template-columns:1fr}}
.up{background:var(--paper);padding:30px 28px}
.up h3{font-size:27px;margin-bottom:10px}
.up p{color:var(--dim);font-size:17px;max-width:42ch}
.up .more{
  display:inline-block;margin-top:18px;font-family:var(--sans);font-size:13px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--teal);padding-bottom:2px;
}
.up .more:hover{color:var(--teal)}

/* newsletter */
.signup{background:var(--paper-2);border:1px solid var(--rule);padding:38px 32px;text-align:center}
.signup h2{font-size:clamp(24px,3.2vw,32px);margin-bottom:8px}
.signup p{color:var(--dim);font-size:17px;max-width:48ch;margin-inline:auto}
.signup form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.signup input[type=email]{
  flex:1 1 300px;max-width:380px;font-family:var(--sans);font-size:15px;
  padding:13px 15px;border:1px solid var(--rule);background:#fff;color:var(--ink);border-radius:0;
}
.signup input[type=email]:focus{border-color:var(--teal);outline:none}
.signup button{
  font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  padding:13px 26px;border:0;background:var(--ink);color:var(--paper);cursor:pointer;
}
.signup button:hover{background:var(--teal)}
.signup .fine{font-family:var(--sans);font-size:12.5px;color:var(--dim);margin-top:14px}

/* page header for interior pages */
.page-head{border-bottom:1px solid var(--rule);padding-block:52px 40px}
.page-head h1{font-size:clamp(34px,5.6vw,58px);margin-top:12px}
.page-head .deck{font-style:italic;color:var(--dim);font-size:20px;margin-top:14px;max-width:52ch}

/* journal cards */
.post-list{display:grid;gap:0}
.post{border-top:1px solid var(--rule);padding-block:30px;display:grid;grid-template-columns:150px 1fr;gap:28px}
.post:first-child{border-top:0}
@media(max-width:700px){.post{grid-template-columns:1fr;gap:8px}}
.post-meta{font-family:var(--sans);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);padding-top:6px}
.post h2{font-size:27px;margin-bottom:10px}
.post h2 a{color:var(--ink);text-decoration:none}
.post h2 a:hover{color:var(--teal)}
.post p{color:var(--dim);font-size:17px;max-width:var(--measure)}
.post .more{display:inline-block;margin-top:14px;font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--teal);padding-bottom:2px}

/* spotlight (behind the poems) */
.spotlight{border-top:1px solid var(--rule);padding-block:38px}
.spotlight:first-of-type{border-top:0}
.spotlight h2{font-size:28px;margin:10px 0 18px}
.spotlight .pull{
  font-style:italic;font-size:21px;line-height:1.5;color:var(--ink);
  border-left:2px solid var(--blush);padding:4px 0 4px 22px;margin-bottom:22px;
}
.spotlight .prose p{color:var(--dim)}

.cta-inline{border-top:1px solid var(--rule);padding-block:44px;text-align:center}
.cta-inline h2{font-size:clamp(24px,3.4vw,34px);margin-bottom:12px}
.cta-inline p{color:var(--dim);max-width:50ch;margin:0 auto 26px}
.cta-inline .buybar{max-width:640px;margin-inline:auto;border-top:2px solid var(--deep)}

/* footer */
.site-foot{border-top:1px solid var(--rule);margin-top:20px;padding-block:34px 44px}
.site-foot .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-family:var(--sans);font-size:13.5px;color:var(--dim)}
.site-foot a{color:var(--dim);text-decoration:none}
.site-foot a:hover{color:var(--teal);text-decoration:underline}
.site-foot ul{display:flex;gap:20px;flex-wrap:wrap}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}