/*
Theme Name: Jessyka Bailey
Description: Jessyka Bailey's personal site. Child of Twenty Twenty-Five. Design locked from the Style Kit.
Author: Jessyka Bailey
Template: twentytwentyfive
Version: 1.0.0
Text Domain: jessyka-blog
*/

@font-face{font-family:"Geist";src:url('assets/geist-sans.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

/* ============================ Jessyka Bailey — locked design ============================ */
:root{
  --beige:#F3EBDD; --ink:#1F1F1F; --lime:#9FE500; --on-lime:#111111;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --jb-sans:"Geist","Helvetica Neue",Helvetica,Arial,sans-serif;
}
body{ background:var(--beige); color:var(--ink); font-family:var(--jb-sans); -webkit-font-smoothing:antialiased; }
#jb{ background:var(--beige); color:var(--ink); }
#jb *{box-sizing:border-box}
.jb-header *, .jb-foot *, .jb-page *{box-sizing:border-box}
:where(#jb) a, :where(.jb-header) a, :where(.jb-foot) a{color:inherit}
.jb-wrap{max-width:1080px; margin:0 auto; padding:0 28px}

/* header (sits on the beige page) */
.jb-header{padding:18px 0; background:transparent; color:var(--ink); border-bottom:1.5px solid #000}
.jb-topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.jb-brand{font-weight:600; font-size:1rem; letter-spacing:-.01em; text-decoration:none}
.jb-brand:hover{opacity:.65}
.jb-nav{display:flex; gap:20px; flex-wrap:wrap}
.jb-nav a{font-size:.9rem; text-decoration:none; opacity:.9}
.jb-nav a:hover{
  opacity:1; text-decoration:none; background:var(--lime); color:var(--on-lime);
  /* same marker as the key-point highlight in an article; the negative margin cancels
     the padding so the nav items do not shift when the highlight appears */
  padding:.16em .34em; margin:-.16em -.34em;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
.jb-nav a[aria-current]{opacity:.6}

/* The parent theme draws a 2px solid outline on every :focus, which fires on mouse
   clicks as well as keyboard focus — so clicking a link left a box around it. Drop it
   for pointer clicks only; keyboard tabbing still gets its focus ring, which is the
   only thing that ring is actually for. */
:focus:not(:focus-visible){outline:none}

/* sections */
.jb-sec{width:100%}
.jb-sec1{background:var(--beige); color:var(--ink); padding:26px 0 56px}
.jb-sec2{background:var(--ink); color:var(--beige); padding:56px 0 64px}

.jb-lab{font-size:1.05rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; margin:0}
.jb-whead{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px}
.jb-all{font-size:.82rem}
.jb-all a{text-decoration:none; opacity:.85}
.jb-all a:hover{opacity:1; text-decoration:underline; text-underline-offset:3px}

/* hero: writing + photo */
.jb-hero{display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:40px; align-items:stretch; padding:30px 0 0}
.jb-writing{display:flex; flex-direction:column; min-height:100%}
.jb-cards{display:flex; flex-direction:column; gap:20px; flex:1}

/* writing pills — hard shadow */
.jb-post{
  position:relative; isolation:isolate; overflow:hidden; border-radius:999px; flex:1; min-height:0;
  text-decoration:none; background:#fff; color:var(--ink); border:1px solid #000; box-shadow:5px 5px 0 0 #000;
  padding:15px 26px; display:flex; flex-direction:row; align-items:center; gap:14px;
  transition:transform .2s cubic-bezier(.3,.7,.3,1), background .2s cubic-bezier(.3,.7,.3,1), color .18s ease, border-color .18s ease, box-shadow .2s cubic-bezier(.3,.7,.3,1);
}
.jb-post::before{content:""; position:absolute; inset:0; background:var(--grain); background-size:150px; mix-blend-mode:soft-light; opacity:0; z-index:0; pointer-events:none; transition:opacity .5s cubic-bezier(.22,1,.36,1)}
.jb-post>span{position:relative; z-index:1}
/* Date + title travel as one unit. The flex:1 lives here, not on .jb-t, so the
   group centres as a block and the arrow stays centred to the whole pill. */
.jb-body{flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:9px}
/* Wraps as a flex row: with three labels the line is too long for a phone, and
   as plain inline text it pushed the pill wider than the screen instead of
   breaking. Each label is its own flex item, so it moves to the next line
   whole rather than splitting mid-word. */
.jb-d{display:flex; flex-wrap:wrap; align-items:center; row-gap:5px; font-size:13px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:#8A857E; line-height:1; transition:color .75s cubic-bezier(.22,1,.36,1), opacity .75s cubic-bezier(.22,1,.36,1)}
/* The separator sits a touch lighter than the words either side of it, so the
   date and the category read as two things rather than one long string. */
.jb-dot{display:inline-block; margin:0 .5em; opacity:.6}
.jb-t{font-size:1.08rem; font-weight:600; letter-spacing:-.01em; line-height:1.18}
.jb-arw{font-size:1.15rem; transition:transform .5s cubic-bezier(.22,1,.36,1)}
.jb-post:hover, .jb-post:focus-visible{
  background:var(--lime); color:var(--on-lime); border-color:#1F1F1F;
  transform:scale(1.02) translateY(-2px); box-shadow:7px 7px 0 0 #000; outline:none;
  transition:transform .85s cubic-bezier(.22,1,.36,1), background .85s cubic-bezier(.22,1,.36,1), color .75s cubic-bezier(.22,1,.36,1), border-color .75s cubic-bezier(.22,1,.36,1), box-shadow .9s cubic-bezier(.22,1,.36,1);
}
.jb-post:hover::before, .jb-post:focus-visible::before{opacity:.6}
.jb-post:hover .jb-arw{transform:translateX(4px)}
/* The fixed grey would go muddy on the lime. Same quietness, borrowed from the
   hover ink instead of fighting it. */
.jb-post:hover .jb-d, .jb-post:focus-visible .jb-d{color:var(--on-lime); opacity:.55}

/* photo — border */
.jb-photo{overflow:hidden; border-radius:26px; aspect-ratio:3/4; border:2px solid #000; margin:0}
.jb-photo img{width:100%; height:100%; object-fit:cover; object-position:center 40%; display:block}

/* projects (on the black section) */
.jb-projgrid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:16px}
.jb-proj{
  position:relative; isolation:isolate; overflow:hidden; aspect-ratio:1/1; min-height:0; border-radius:28px;
  border:1px solid currentColor; text-decoration:none; color:inherit; padding:18px;
  display:flex; flex-direction:column; justify-content:space-between; container-type:inline-size;
  transition:transform .2s cubic-bezier(.3,.7,.3,1), box-shadow .2s cubic-bezier(.3,.7,.3,1);
}
.jb-proj>*{position:relative; z-index:1}
.jb-proj:hover{transform:translateY(-6px) scale(1.02); box-shadow:0 22px 38px -16px rgba(0,0,0,.42); transition:transform .85s cubic-bezier(.22,1,.36,1), box-shadow .85s cubic-bezier(.22,1,.36,1)}
.jb-ptop{display:flex; align-items:center; justify-content:space-between; gap:8px}
/* card text scales fluidly with the card's own width (container queries) */
.jb-tag{font-size:clamp(9px,4.8cqw,12px); letter-spacing:.14em; text-transform:uppercase; opacity:.75}
.jb-count{font-size:clamp(9px,4.8cqw,12px); letter-spacing:.12em; text-transform:uppercase; opacity:.85; white-space:nowrap}
.jb-pt{font-size:clamp(1rem,8.5cqw,1.9rem); font-weight:700; letter-spacing:-.01em; line-height:1.1}
.jb-pd{font-size:clamp(.8rem,6cqw,1.1rem); line-height:1.45; opacity:.95; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.jb-go{font-size:clamp(10px,5cqw,13px); letter-spacing:.1em; text-transform:uppercase}
/* roomier cards (mobile 1-up, wide 2-up) get more description lines */
@container (min-width:280px){ .jb-pd{-webkit-line-clamp:6} }
.jb-proj.jb-live{background:var(--lime); border-color:var(--lime); color:var(--on-lime)}
.jb-proj.jb-live::before{content:""; position:absolute; inset:0; background:var(--grain); background-size:160px; mix-blend-mode:soft-light; opacity:.5; z-index:0; pointer-events:none}
.jb-proj.jb-soon{border-style:solid; opacity:.72}
.jb-proj.jb-soon:hover{transform:translateY(-6px) scale(1.02); opacity:1; border-color:var(--lime); box-shadow:0 22px 38px -16px rgba(0,0,0,.28); transition:transform .85s cubic-bezier(.22,1,.36,1), box-shadow .85s cubic-bezier(.22,1,.36,1), opacity .4s ease, border-color .4s ease}

/* footer */
/* Footer carries the Projects colour, so on the homepage it would run straight
   into that section as one dark block. The hairline gives the copyright its own
   space. Beige rather than white: it is the same colour as the type below it. */
.jb-foot{background:var(--ink); color:var(--beige); border-top:1px solid var(--beige); text-align:center; padding:40px 0 50px}
.jb-foot p{margin:0; font-size:.8rem; letter-spacing:.08em; opacity:.72}

/* footer social links — same small letterspaced treatment as the copyright line, and
   the same lime marker the nav uses on hover so one hover language runs site-wide */
.jb-social{display:flex; justify-content:center; gap:22px; margin:0 0 18px}
.jb-social a{display:inline-flex; line-height:0; color:#fff; opacity:.72; transition:opacity .18s ease, color .18s ease}
.jb-social svg{width:20px; height:20px; fill:currentColor; display:block}
/* the lime marker would read as a box around a glyph, so the icons take the accent on
   the mark itself — same colour, same hover language as the nav */
.jb-social a:hover, .jb-social a:focus-visible{opacity:1; color:var(--lime)}

/* ---- inner pages: blog, single post, projects ---- */
.jb-page{max-width:720px; margin:0 auto; padding:52px 28px 84px}
.jb-page-title, .jb-page .wp-block-post-title{font-size:2.1rem; font-weight:700; letter-spacing:-.02em; line-height:1.15; margin:0 0 26px}
.jb-page p, .jb-page li{font-size:1.06rem; line-height:1.7}
.jb-page p{margin:0 0 1.25rem; max-width:66ch}
.jb-page :where(p,li,h2,h3,blockquote) a{text-decoration:underline; text-underline-offset:3px}
.jb-page h2{font-size:1.5rem; font-weight:700; letter-spacing:-.01em; margin:2.2rem 0 .8rem}
.jb-page h3{font-size:1.2rem; font-weight:600; margin:1.6rem 0 .6rem}
.jb-page ul, .jb-page ol{max-width:66ch; margin:0 0 1.25rem; padding-left:1.2em}
.jb-page blockquote{max-width:66ch; border-left:3px solid var(--ink); padding-left:1em; margin:1.5rem 0; font-style:italic}
.jb-page img{max-width:100%; height:auto; border-radius:14px}
.jb-page-lede{font-family:var(--jb-sans); font-size:.9rem; letter-spacing:.14em; text-transform:uppercase; opacity:.55; margin:0 0 10px}
.jb-bloglist{display:flex; flex-direction:column; gap:18px}
.jb-empty{opacity:.6}
/* projects page uses the homepage-width container so the "Projects" title and the grid
   share a left edge; grid stays the homepage's plain 4-col .jb-projgrid → cards match 244px */
.jb-page.jb-projpage{max-width:1080px}
.jb-projgrid-page{margin-top:0}
.jb-projgrid-page .jb-proj{border:1.5px solid #1F1F1F}
@media (max-width:560px){ .jb-page{padding:36px 18px 60px} }

/* ---- refined single-post (article) typography ----
   One spacing scale drives every vertical gap in the article, so the rhythm is a
   system rather than a set of one-off values. Scanning order the scale encodes:
   title → meta → TL;DR → lede → heading → body → callout → next heading. */
.jb-article{
  max-width:760px;
  /* Every gap is a multiple of the paragraph gap, so the page keeps one rhythm
     instead of a set of unrelated numbers. Paragraph spacing (--sp-3) is the base
     unit. Set to 20px on a 35px line (0.57×) — a half-line break, so paragraphs read
     as blocks rather than as separated lines. */
  --sp-1:12px;   /* label → its text            — 0.375× base */
  --sp-2:20px;   /* heading → paragraph          — 0.625× base */
  --sp-3:20px;   /* paragraph → paragraph        — the base unit */
  --sp-4:28px;   /* block → block in a section   — 1.4× base */
  --sp-5:32px;   /* above a heading              — 1.6× base */
}
.jb-article .wp-block-post-title{font-size:56px; line-height:1.06; letter-spacing:-.022em; font-weight:700; margin:0 0 var(--sp-2); max-width:none}

/* subtitle — sits between the 56px title and the 12px meta row, so it takes the
   middle of that gap: large enough to read as part of the headline, light enough
   that it never competes with it. Only present when the post sets one. */
.jb-article .jb-subtitle{font-size:22px; line-height:1.35; font-weight:400; letter-spacing:-.01em; opacity:.68; max-width:none; margin:0 0 var(--sp-2)}

/* metadata — secondary by size, case, weight and opacity all at once */
.jb-article .jb-meta{display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-family:var(--jb-sans); font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:500; opacity:.5; margin:0 0 var(--sp-4)}
.jb-article .jb-meta time{font-variant-numeric:tabular-nums}
.jb-article .jb-meta .jb-byline{font-weight:600}

/* TL;DR summary — an editorial callout, not a card. The lime rule stays; the label
   is held apart from the summary by space, and the block itself sits tight to it. */
.jb-article .jb-tldr{margin:0 0 var(--sp-5); padding:0 0 0 18px; border-left:3px solid var(--lime)}
.jb-article .jb-tldr-label{display:block; font-family:var(--jb-sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; opacity:.45; margin:0 0 var(--sp-1)}
.jb-article .jb-tldr p{font-size:17px; line-height:1.65; font-weight:500; max-width:none; margin:0}
/* Disclaimer — quiet tag in the band between the meta row and the TL;DR box; matches the TL;DR label */
.jb-article .jb-disclaimer{font-family:var(--jb-sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; opacity:.45; line-height:1.5; max-width:none; margin:0 0 var(--sp-4)}

/* body copy — the lede leads on weight and space, not size */
.jb-article .wp-block-post-content > p:first-of-type{font-size:22px; line-height:1.6; font-weight:500; max-width:none; margin:0 0 var(--sp-3)}
.jb-article p{font-size:22px; line-height:1.6; font-weight:400; max-width:none; margin:0 0 var(--sp-3)}
.jb-article ul, .jb-article ol{font-size:22px; line-height:1.6; max-width:none; margin:0 0 var(--sp-3)}

/* headings — read as headings while scanning, and open far more space above than
   below so each one visibly begins a new idea rather than floating between two */
.jb-article h2{font-size:32px; line-height:1.2; font-weight:700; letter-spacing:-.02em; margin:var(--sp-5) 0 var(--sp-2)}
.jb-article h3{font-size:26px; line-height:1.25; font-weight:700; letter-spacing:-.015em; margin:var(--sp-5) 0 var(--sp-2)}
/* h4 is styled too: the markdown publisher turns ### into an h4, so leaving it
   unstyled silently drops a section heading back to bold body copy. */
.jb-article h4{font-size:20px; line-height:1.3; font-weight:700; letter-spacing:-.01em; margin:var(--sp-4) 0 var(--sp-2)}
.jb-article :where(h2,h3,h4):first-child{margin-top:0}

/* pull-out callout — keeps the left rule, drops the blanket italic, and builds its
   hierarchy from weight instead: bold term, plain question, quiet descriptor */
.jb-article blockquote{max-width:none; margin:var(--sp-4) 0 var(--sp-5); padding:0 0 0 22px; border-left:3px solid var(--ink); font-style:normal}
.jb-article blockquote p{font-size:17px; line-height:1.6; margin:0 0 var(--sp-2)}
.jb-article blockquote p:last-child{margin-bottom:0}
.jb-article blockquote strong{font-weight:700}
.jb-article blockquote em{font-style:normal; opacity:.6}

/* Key point — a single-line quote is a highlighted statement, not a structured
   callout, so it drops the rule and gets the lime marker instead. Multi-paragraph
   quotes keep the left rule above, so both treatments live on one markdown syntax:
   > one line   → highlight
   > several    → callout */
.jb-article blockquote:has(p:only-child){border-left:0; padding:0; margin:var(--sp-4) 0}
.jb-article blockquote:has(p:only-child) p{
  display:inline; font-size:22px; line-height:1.55; font-weight:700; letter-spacing:-.01em;
  background:var(--lime); color:var(--on-lime);
  padding:.16em .34em; box-decoration-break:clone; -webkit-box-decoration-break:clone;
}

/* links carry the accent on the underline only — lime on beige is unreadable as
   text, and ink type keeps a link from shouting over the sentence around it */
.jb-article :where(p,li,h2,h3,blockquote) a{
  color:var(--ink); text-decoration:underline; text-decoration-color:var(--lime);
  text-decoration-thickness:2px; text-underline-offset:3px;
}
.jb-article :where(p,li,h2,h3,blockquote) a:hover{text-decoration-color:var(--ink)}

@media (max-width:820px){ .jb-article .wp-block-post-title{font-size:44px} }
@media (max-width:520px){
  .jb-article .wp-block-post-title{font-size:36px}
  .jb-article h2{font-size:26px}
  .jb-article h3{font-size:21px}
  .jb-article .wp-block-post-content > p:first-of-type{font-size:20px}
  .jb-article{--sp-5:44px; --sp-4:28px}
}

/* responsive */
/* projects: 4-up only on wide screens; drop to 2-up on tablets so cards don't cramp */
@media (max-width:900px){ .jb-projgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){
  .jb-hero{grid-template-columns:1fr; gap:22px}
  .jb-photo{order:-1; aspect-ratio:4/5}
}
@media (max-width:560px){
  .jb-wrap{padding:0 18px}
  .jb-header{margin:4px}
  .jb-sec1{padding:20px 0 40px}
  .jb-sec2{padding:40px 0 46px}
  /* pill button labels: smaller on mobile, no widow word, never more than 2 lines */
  .jb-t{font-size:.95rem; line-height:1.2; text-wrap:balance; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
  /* Meta line on a phone. With a date and three labels this runs to two rows at
     the desktop size, which is what makes the pill taller. Measured at 390pt:
     the long ones need 362px at 13px against 270px of room. Shrinking the type
     alone never closes that, so the pill gives back some side padding too —
     together they fit on one row. Anything longer still wraps rather than
     overflowing, because .jb-d is a wrapping flex row. */
  .jb-post{padding:14px 20px; gap:10px}
  .jb-d{font-size:11px; letter-spacing:.04em; row-gap:4px}
  .jb-dot{margin:0 .28em}
}
@media (max-width:440px){
  /* phones: 1 column with a deliberately big title (overrides the fluid sizing).
     Tablet/desktop widths keep the container-query scaling above. */
  .jb-projgrid{grid-template-columns:1fr}
  .jb-proj{padding:26px}
  .jb-tag, .jb-count{font-size:12px}
  .jb-pt{font-size:1.75rem; line-height:1.1}
  .jb-pd{font-size:1.05rem; line-height:1.45; -webkit-line-clamp:6}
  .jb-go{font-size:13px}
}
@media (prefers-reduced-motion:reduce){ #jb *{transition:none !important} }