/* Wrenval — 1:1 rebuild of the Canva site.
   Design canvas is 1425 units wide; every element is placed at its exact
   design coordinate and the whole canvas is scaled to the viewport. */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&display=swap');

:root{
  --cream:  #f5f3e7;
  --cream2: #f0eddd;
  --beige:  #e1dbd4;
  --blue:   #c8d1d9;
  --gray:   #d9d9d9;
  --green:  #7ed957;
  --ink:    #231f20;
}

*{ box-sizing: border-box; }

html{ scroll-behavior:smooth; }

html,body{
  margin:0;
  padding:0;
  background:#fff;
  color:#000;
  font-family:'Cinzel', serif;
}

.stage{
  width:100%;
  overflow:hidden;
  background:#fff;
}

.canvas{
  position:relative;
  width:1425px;
  left:50%;
  transform-origin: top center;
  transform: translateX(-50%);
}

.el{ position:absolute; }

img.el{ display:block; object-fit:contain; }

/* Outlined button: 3px frame, white face — border-box makes the inner
   face land on the exact inner rect measured from the original. */
.btn{
  border:3px solid var(--beige);
  background:#fefeff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Cinzel', serif;
  font-size:18.6667px;
  font-weight:700;
  color:var(--ink);
  text-decoration:none;
  cursor:pointer;
  padding:0;
}
.btn-thick{ border-width:8px; }
.btn:hover{ background:#f7f4ec; }

.center{
  display:flex;
  align-items:center;
  justify-content:center;
}

.nav-link{
  font-size:21.3333px;
  font-weight:700;
  color:#000;
  background:#fff;
}
.nav-link:hover{ text-decoration:underline; }

.news-title{
  font-size:42.6667px;
  font-weight:700;
  line-height:59px;
  color:#000;
}

/* email capture */
.email-input{
  border:none;
  outline:none;
  background:#fff;
  font-family:'Cinzel', serif;
  font-size:29.3333px;
  font-weight:400;
  color:#000;
  padding:0 0 0 27px;
}
.email-input::placeholder{ color:#000; opacity:1; }
.email-input:focus::placeholder{ opacity:.35; }

/* The green button is a pill and is painted BENEATH the beige backing and
   white field, so only its right end shows — that is what creates the thin
   beige gap between the field and the button on the original. */
.email-go{
  background:var(--green);
  border:none;
  border-radius:999px;
  cursor:pointer;
  padding:0;
}

.arrow-ico{ pointer-events:none; }

/* About copy */
.about-copy{
  font-size:18.633px;
  font-weight:400;
  line-height:26px;
  color:#000;
}
.about-copy p{ margin:0 0 26px 0; }
.about-copy p:last-child{ margin-bottom:0; }

.about-heading{
  font-size:50.3127px;
  font-weight:700;
  line-height:70px;
  text-decoration:underline;
  white-space:nowrap;
  color:#000;
}

/* Writings list */
/* Lists that outgrow their panel scroll inside it instead of stretching the
   page. The track sits in the panel's right margin so it never covers an item. */
.scroll-list{
  position:absolute;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:var(--beige) transparent;
  overscroll-behavior:contain;
}
.scroll-list::-webkit-scrollbar{ width:8px; }
.scroll-list::-webkit-scrollbar-track{ background:transparent; }
.scroll-list::-webkit-scrollbar-thumb{
  background:var(--beige);
  border-radius:4px;
}

.news-item{
  flex:none;
  width:285px;
  height:60px;
  margin:0 0 18.75px 18px;
}
.news-item:last-child{ margin-bottom:0; }

.scroll-list .writing-card{
  position:relative;
  margin:0 0 29px 18px;
}
.scroll-list .writing-card:last-child{ margin-bottom:0; }

/* Panels carry their beige edge as an inset ring rather than a real border,
   so absolutely positioned children keep their exact design coordinates. */
.framed{ box-shadow: inset 0 0 0 5px var(--beige); }
.framed-8{ box-shadow: inset 0 0 0 8px var(--beige); }

.writing-card{
  background:#fff;
  border-radius:20px;
  box-shadow: inset 0 0 0 5px var(--beige);
  display:block;
  text-decoration:none;
  color:#000;
  position:absolute;
}
.writing-card:hover{ background:#fbfaf5; }
.writing-card .wt-title{
  position:absolute;
  left:32px; top:21px;
  font-size:29.3333px;
  font-weight:400;
  line-height:40px;
  text-decoration:underline;
}
.writing-card .wt-tag{
  position:absolute;
  left:32px; top:57px;
  font-size:21.3335px;
  font-weight:400;
  line-height:29px;
}
.writing-card .wt-arrow{
  position:absolute;
  left:315px; top:72px;
  width:27px; height:16px;
}

.inbox-label{
  font-size:21.9689px;
  font-weight:400;
  line-height:29px;
  color:#000;
}

.template-title{
  font-size:54.6672px;
  font-weight:700;
  line-height:73px;
  text-decoration:underline;
  color:#000;
}

/* Imported writing pages */
.wp-body{
  position:absolute;
  left:32px; top:120px;
  width:457px;
  font-size:20px;
  line-height:30px;
  color:#000;
}
.wp-body p{ margin:0 0 30px 0; }
.wp-body p:last-child{ margin-bottom:0; }
.wp-empty{ opacity:.55; }
.wp-body code{ font-family:inherit; }

/* Announcement / news pages */
.ann-title{
  font-size:42.6667px;
  font-weight:700;
  line-height:59px;
  text-decoration:underline;
  color:#000;
}
.ann-body{
  font-size:28px;
  font-weight:400;
  line-height:39px;
  color:#000;
}
/* Paragraphs flow inside the one positioned box - the gap between them is a
   real margin now, not a guessed offset. */
.ann-body p{ margin:0 0 39px 0; }
.ann-body p:last-child{ margin-bottom:0; }

.template-body{
  position:absolute;
  left:32px; top:120px;
  width:457px;
  height:530px;
  border:none;
  outline:none;
  background:transparent;
  resize:none;
  font-family:'Cinzel', serif;
  font-size:20px;
  line-height:30px;
  color:#000;
}

/* --- email signup ---------------------------------------------------------
   The honeypot field. ⚠️ NOT display:none and NOT type="hidden" - bots skip
   both. It is pushed out of sight and out of the tab order instead, so a
   person never meets it and a form-filling script still finds something to
   fill in. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The line under the input that says what happened. It is empty until there
   is something to say, so it takes up no visual room on a fresh page.
   It is positioned to span the beige frame exactly, so centring here puts it
   on the same midpoint as the input box above it. */
.signup-status {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  color: var(--ink);
  text-align: center;
}
.signup-status[data-state='error'] { color: #a3321e; }

.email-go[disabled] { opacity: .55; cursor: default; }

/* ===========================================================================
   MOBILE LAYOUT
   ---------------------------------------------------------------------------
   Above MOBILE_BREAK (900px, kept in sync with script.js) the site is the
   fixed 1425-unit design canvas, scaled to fit — unchanged, pixel for pixel.
   At or below it, the canvas is hidden and this ".mobile" layout takes over:
   real block/flex flow, content reflows to one column, images are fluid, and
   text sizes are picked to be readable at their natural (unscaled) size
   instead of shrinking with the rest of the page.
   ⚠️ MUST MATCH script.js's MOBILE_BREAK — see the comment there. */

.mobile{ display:none; }

@media (max-width: 900px){
  .stage{ display:none; }
  .mobile{ display:block; background:#fff; }
}

.m-wrap{
  max-width:36rem;
  margin:0 auto;
  padding:0 1.25rem;
  box-sizing:border-box;
}

.m-section-title{
  font-size:1.75rem;
  font-weight:700;
  text-decoration:underline;
  text-align:center;
  color:#000;
  margin:0 0 1.25rem 0;
}

/* header + nav */
.m-header{
  padding:1.5rem 1.25rem 1rem;
  text-align:center;
}
.m-logo{
  display:block;
  width:70%;
  max-width:280px;
  height:auto;
  margin:0 auto 1rem;
}
.m-nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.5rem;
  list-style:none;
  margin:0;
  padding:0;
}
.m-nav a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:.5rem 1.1rem;
  font-family:'Cinzel', serif;
  font-size:1.05rem;
  font-weight:700;
  color:#000;
  text-decoration:none;
}
.m-nav a:hover, .m-nav a:active{ text-decoration:underline; }

/* hero */
.m-hero{
  background:var(--blue);
  padding:1.75rem 1.25rem;
  text-align:center;
}
.m-hero img{
  display:block;
  width:100%;
  max-width:340px;
  height:auto;
  margin:0 auto;
}

/* generic section rhythm */
.mobile section{ padding:2rem 0; }
.mobile section.m-hero{ padding:1.75rem 0; }

/* news list */
.m-news{ background:#fff; }
.m-news-list{
  display:flex;
  flex-direction:column;
  gap:.75rem;
}
.m-news-list a,
.m-news-list .is-soon{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  min-height:44px;
  border:3px solid var(--beige);
  background:#fefeff;
  padding:.85rem 1.1rem;
  font-family:'Cinzel', serif;
  font-size:1.05rem;
  font-weight:700;
  color:var(--ink);
  text-decoration:none;
}
.m-news-list a:hover, .m-news-list a:active{ background:#f7f4ec; }

/* about */
.m-about{ background:var(--cream); }
.m-about-copy{
  font-size:1rem;
  line-height:1.6;
  color:#000;
}
.m-about-copy p{ margin:0 0 1.1rem 0; }
.m-about-copy p:last-child{ margin-bottom:0; }
.m-about-copy br{ content:''; }

/* signup */
.m-signup{ background:var(--cream); text-align:center; }
.m-signup-form{ max-width:26rem; margin:0 auto; }
/* ⚠️ THIS IS THE DESKTOP FIELD, REBUILT AT PHONE SIZE - keep it that way.
   The desktop original is a square beige plate with a white field inset 9px
   inside it, and a green pill painted UNDERNEATH so only its rounded right
   end shows past the plate's edge. The 9px of beige left between the white
   field and the green end is the whole look, and it is what the negative
   margins below reproduce: the row carries the beige and the padding, and
   the button cancels that padding on its own three sides so it reaches the
   row's edges while still sitting 9px clear of the field. */
.m-signup-row{
  display:flex;
  align-items:stretch;
  background:var(--beige);
  padding:9px;
  gap:0;
  overflow:hidden;          /* clips the pill's hidden left half, as the plate does */
}
.m-email-input{
  flex:1 1 auto;
  min-width:0;
  border:none;
  border-radius:0;          /* square, like the plate it sits in */
  outline:none;
  background:#fff;
  font-family:'Cinzel', serif;
  font-size:1rem;
  color:#000;
  padding:0 1rem;
  min-height:52px;
}
.m-email-input::placeholder{ color:#000; opacity:.65; }
.m-email-go{
  flex:none;
  width:62px;
  margin:-9px -9px -9px 9px;   /* out to the row's edges, 9px clear of the field */
  border:none;
  border-radius:0 999px 999px 0;
  background:var(--green);
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
.m-email-go svg{ width:26px; height:14px; display:block; }
.m-email-go[disabled]{ opacity:.55; cursor:default; }
.m-signup-status{
  margin:.85rem 0 0;
  font-size:1rem;
  line-height:1.3;
  color:var(--ink);
  text-align:center;
}
.m-signup-status[data-state='error']{ color:#a3321e; }
.m-bird{
  display:block;
  width:55%;
  max-width:240px;
  height:auto;
  margin:1.75rem auto 0;
}

/* shared: buttons, cards, panels used on writings / socials / news / writing pages */
.m-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  width:100%;
  max-width:22rem;
  margin:0 auto;
  box-sizing:border-box;
  border:3px solid var(--beige);
  background:#fefeff;
  font-family:'Cinzel', serif;
  font-size:1.05rem;
  font-weight:700;
  color:var(--ink);
  text-decoration:none;
}
.m-btn:hover, .m-btn:active{ background:#f7f4ec; }
.m-btn-thick{ border-width:6px; }

.m-panel{
  background:var(--cream);
  padding:1.75rem 1.25rem 2.5rem;
}

.m-art{
  display:block;
  width:100%;
  height:auto;
  max-height:240px;
  object-fit:cover;
}

.m-list{
  display:flex;
  flex-direction:column;
  gap:.85rem;
  margin:1.25rem 0;
}

.m-writing-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  border:3px solid var(--beige);
  background:#fff;
  padding:1rem 1.1rem;
  text-decoration:none;
  color:#000;
}
.m-writing-card:hover, .m-writing-card:active{ background:#fbfaf5; }
.m-writing-card .wt-title{
  display:block;
  font-size:1.1rem;
  font-weight:400;
  text-decoration:underline;
}
.m-writing-card .wt-tag{
  display:block;
  font-size:.9rem;
  font-weight:400;
  opacity:.8;
  margin-top:.2rem;
}
.m-writing-card .wt-arrow{
  flex:none;
  width:20px;
  height:12px;
}

.m-profile{
  display:block;
  width:55%;
  max-width:220px;
  height:auto;
  margin:2rem auto 1.5rem;
}

.m-title{
  font-size:1.6rem;
  font-weight:700;
  text-decoration:underline;
  text-align:center;
  color:#000;
  margin:0 0 1.25rem 0;
}

.m-body{
  font-size:1rem;
  line-height:1.6;
  color:#000;
}
.m-body p{ margin:0 0 1.1rem 0; }
.m-body p:last-child{ margin-bottom:0; }
.m-body-empty{ opacity:.6; }

.m-inbox-label{
  font-size:1.15rem;
  font-weight:400;
  text-align:center;
  color:#000;
  margin:0 0 1rem 0;
}

@media (max-width: 480px){
  .m-hero img{ max-width:260px; }
  .m-section-title, .m-title{ font-size:1.5rem; }
  .m-nav a{ font-size:1rem; padding:.5rem .85rem; }
}

/* --- "Coming Soon" placeholders -------------------------------------------
   Entries flagged comingSoon in content.json. They keep the frame of a real
   button so the panel still reads as a list, but they are spans rather than
   links: no pointer, no hover lift, no arrow, and slightly dimmed so the
   difference is visible before you try to tap one. */
.btn.is-soon,
.m-news-list .is-soon,
.writing-card.is-soon,
.m-writing-card.is-soon{
  cursor:default;
  opacity:.55;
}
/* A placeholder card must not react to the pointer the way a real one does. */
.writing-card.is-soon:hover,
.m-writing-card.is-soon:hover{ background:#fff; }
.btn.is-soon:hover{ background:#fefeff; }

/* A placeholder has no arrow, so space-between would strand its text on the
   left. It centres instead; everything else about the box is shared above. */
.m-news-list .is-soon{ justify-content:center; }