/*
Theme Name: Fieldnotes
Theme URI: https://jakemorrison.blog/
Author: Jake Morrison
Description: An expressive editorial block theme for links, quick notes, and deep dives.
Version: 1.1.9
Requires at least: 6.6
Requires PHP: 7.4
Text Domain: fieldnotes
*/

:root { --paper: #f7f7f2; --ink: #152726; --muted: #637570; --line: #d8dfd8; --accent: #e65f48; --mint: #d8ede3; --lavender: #e8e5f5; --sun: #f5e8b6; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; -webkit-font-smoothing: antialiased; }
body, .wp-site-blocks { min-height: 100vh; }
.wp-site-blocks { display: flex; flex-direction: column; }
.wp-site-blocks > .site-footer { margin-top: auto; }
a { text-underline-offset: .2em; transition: color .2s ease, opacity .2s ease; }
a:hover { color: var(--accent); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
::selection { background: var(--sun); color: var(--ink); }

.site-header { border-bottom: 1px solid var(--line); padding: 1.25rem 32px; margin: 0; }
.site-header__inner { max-width: 1180px; margin-inline: auto; gap: 1.5rem; }
.brand-lockup { gap: .32rem; }
.site-brand { margin: 0; font-size: 1.22rem; font-weight: 750; letter-spacing: -.01em; line-height: 1; }
.site-brand a { text-decoration: none; }
.brand-glyph { display: inline-flex; width: 21px; height: 21px; color: var(--accent); transform: rotate(-8deg); }
.brand-glyph svg { width: 100%; height: 100%; }
.header-links { gap: clamp(.8rem, 2.2vw, 2.3rem); }
.header-links a, .footer-links a { font-size: .78rem; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; text-decoration: none; }
.header-links a span { color: var(--accent); }

.main-shell { width: min(100% - 64px, 1180px); margin-inline: auto; }
.eyebrow { color: var(--muted); font-family: var(--wp--preset--font-family--mono); font-size: .72rem; letter-spacing: .115em; text-transform: uppercase; }
.site-intro { padding: clamp(3.4rem, 7vw, 5.5rem) 0 clamp(3.2rem, 6vw, 4.6rem); border-bottom: 1px solid var(--line); }
.site-intro > * { margin-left: 0 !important; }
.intro-eyebrow { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.1rem !important; }
.pulse-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px #e65f4822; }
.intro-title { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.01em; margin: 0 0 .55rem !important; }
.intro-copy { max-width: 700px; color: #42534f; font-size: clamp(1.08rem, 1.8vw, 1.3rem); line-height: 1.6; letter-spacing: 0; margin: 0 0 1.15rem !important; }
.intro-link { color: var(--accent); font-family: var(--wp--preset--font-family--mono); font-size: .76rem; font-weight: 700; text-decoration: none; }
.intro-link:hover { color: var(--ink); }
.not-found h1 em { font-family: var(--wp--preset--font-family--serif); font-weight: 400; letter-spacing: -.015em; color: var(--accent); }

.writing-section { padding: 3rem 0 7rem; }
.section-heading { border-bottom: 1px solid var(--ink); align-items: baseline; padding-bottom: 1.1rem; margin-bottom: 1.8rem !important; }
.section-heading h2 { font-size: clamp(1.7rem, 3.5vw, 2.35rem); margin: 0; letter-spacing: -.01em; }
.section-kicker { margin: 0; font-family: var(--wp--preset--font-family--mono); color: var(--muted); font-size: .73rem; }
.section-kicker span { color: var(--accent); font-size: 1.1em; }
.writing-query .wp-block-post-template { gap: 18px; }
.writing-query .wp-block-post { min-width: 0; margin: 0; }
.post-card { height: 100%; min-height: 315px; background: #fff; border: 1px solid var(--line); border-radius: 7px; padding: clamp(1.5rem, 3.1vw, 2.25rem); display: flex; flex-direction: column; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.post-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px #15272610; border-color: #c4d0c9; }
.post-card > * { margin: 0; }
.card-topline { width: 100%; margin-bottom: 1.4rem !important; font-family: var(--wp--preset--font-family--mono); text-transform: uppercase; letter-spacing: .06em; font-size: .68rem; line-height: 1.4; }
.card-category { color: var(--accent); font-weight: 700; }
.card-category a { color: inherit; text-decoration: none; }
.card-date { color: var(--muted); white-space: nowrap; }
.card-title { font-size: clamp(1.75rem, 3vw, 2.45rem); line-height: 1.12; letter-spacing: -.01em; margin: 0 0 1rem !important; }
.card-title a { text-decoration: none; }
.card-excerpt { color: #55635e; font-size: .98rem; line-height: 1.58; margin-top: auto !important; }
.card-excerpt p { margin: 0; }
.card-excerpt .wp-block-post-excerpt__more-text { margin-top: 1.35rem; }
.card-excerpt .wp-block-post-excerpt__more-link { color: var(--ink); font-family: var(--wp--preset--font-family--mono); font-size: .7rem; font-weight: 700; letter-spacing: .02em; text-decoration: none; }
.card-excerpt .wp-block-post-excerpt__more-link:hover { color: var(--accent); }
.card-image { width: calc(100% + clamp(3rem, 6.2vw, 4.5rem)); max-width: none !important; margin: calc(-1 * clamp(1.5rem, 3.1vw, 2.25rem)) calc(-1 * clamp(1.5rem, 3.1vw, 2.25rem)) 1.65rem !important; height: 235px; overflow: hidden; }
.card-image img { display: block; width: 100%; height: 100% !important; object-fit: cover; transition: transform .5s ease; }
.post-card:hover .card-image img { transform: scale(1.035); }
.card-image.has-icon { display: flex; align-items: center; justify-content: center; background: var(--mint); }
.card-image.has-icon a { display: grid; place-items: center; width: 100%; height: 100%; }
.fieldnotes-icon { display: grid; place-items: center; width: 110px; height: 110px; color: var(--ink); transform: rotate(-8deg); }
.fieldnotes-icon svg { width: 100%; height: 100%; }
/* JS opts inline SVGs into the animation. Editor and no-JS views stay visible. */
svg.line-art-pending [data-line-piece] { opacity:0; transform:translate(var(--line-from-x),var(--line-from-y)); }
svg.line-art-visible [data-line-piece] { opacity:1; transform:translate(0,0); transition:opacity .62s ease var(--line-delay),transform .76s cubic-bezier(.18,.7,.25,1) var(--line-delay); }
@media (prefers-reduced-motion: reduce) {
  svg.line-art-pending [data-line-piece],svg.line-art-visible [data-line-piece] { opacity:1; transform:none; transition:none; }
}
.wp-block-post:nth-child(3n) .card-image.has-icon { background: var(--lavender); }
.wp-block-post:nth-child(4n) .card-image.has-icon { background: var(--sun); }
.wp-block-post.format-aside .post-card { background: var(--mint); border-color: transparent; min-height: 255px; }
.wp-block-post.format-aside .card-title { font-size: clamp(1.55rem, 2.6vw, 2.1rem); }
.wp-block-post.format-aside .card-image.has-icon { background: transparent; justify-content: flex-start; width: auto; height: 60px; margin: 0 0 1.1rem !important; }
.wp-block-post.format-aside .fieldnotes-icon { width: 50px; height: 50px; }
.wp-block-post.format-quote .post-card { background: var(--lavender); border-color: transparent; }
.wp-block-post.format-quote .card-title { font-family: var(--wp--preset--font-family--serif); font-weight: 400; font-size: clamp(2rem, 3.7vw, 3.1rem); letter-spacing: 0; }
.wp-block-post.format-quote .card-title::before { content: '“'; color: var(--accent); display: block; font-family: var(--wp--preset--font-family--serif); font-size: 3.8rem; height: 2.3rem; line-height: .8; }
.wp-block-post.format-link .post-card { background: var(--sun); border-color: transparent; }
.wp-block-post.format-link .card-title a::after { content: ' ↗'; color: var(--accent); font-family: var(--wp--preset--font-family--mono); font-size: .75em; }
.wp-block-post.format-link .card-image.has-icon { background: transparent; }
.writing-query .wp-block-query-pagination { padding: 2.4rem 0 0; font-size: .83rem; font-weight: 700; }
.writing-query .wp-block-query-pagination a { text-decoration: none; }
.latest-notes-query .wp-block-post-template, .notes-archive-query .wp-block-post-template { display:block; margin:0; padding:0; }
.latest-notes-query .wp-block-post, .notes-archive-query .wp-block-post { margin:0; list-style:none; }
.note-row { display:grid; grid-template-columns:48px minmax(0,1fr) auto; grid-template-rows:auto auto; column-gap:1.25rem; row-gap:.22rem; align-items:start; padding:1.15rem .35rem !important; border-bottom:1px solid var(--line); }
.note-row > * { min-width:0; margin:0 !important; }
.note-row-icon { grid-column:1; grid-row:1 / span 2; display:block; width:48px; height:48px; overflow:hidden; border-radius:7px; background:var(--mint); }
.note-row-icon img { display:block; width:100%; height:100%; object-fit:cover; }
.note-row-icon.has-icon a { display:grid; place-items:center; width:100%; height:100%; }
.note-row-icon .fieldnotes-icon { width:36px; height:36px; transform:none; color:var(--ink); }
.note-row-icon .fieldnotes-icon svg { display:block; width:100%; height:100%; }
.wp-block-post.format-quote .note-row-icon { background:var(--lavender); }
.wp-block-post.format-quote .note-row-excerpt { color:var(--ink); font-family:var(--wp--preset--font-family--serif,Georgia,serif); font-size:1.03rem; }
.wp-block-post.format-link .note-row-icon { background:var(--sun); }
.note-row-date { grid-column:3; grid-row:1; justify-self:end; padding-top:.25rem; color:var(--muted); font:500 .68rem/1.45 var(--wp--preset--font-family--mono,monospace); white-space:nowrap; }
.note-row-title { grid-column:2; grid-row:1; font-size:clamp(1.15rem,1.7vw,1.4rem); line-height:1.3; letter-spacing:-.005em; }
.note-row-title a { text-decoration:none; }
.note-row-excerpt { grid-column:2 / 4; grid-row:2; color:#5d6d66; font-size:.91rem; line-height:1.5; }
.note-row-excerpt p { margin:0; }
.note-row-excerpt .wp-block-post-excerpt__more-text { display:none; }
.notes-archive-link { display:inline-flex; align-items:center; gap:.65rem; margin-top:1.7rem; color:var(--accent); font:700 .78rem/1.4 var(--wp--preset--font-family--mono,monospace); text-decoration:none; }
.notes-archive-link:hover { color:var(--ink); }
.notes-archive { padding-top:clamp(3.5rem,7vw,5.5rem); }
.notes-archive > .notes-archive-eyebrow, .notes-archive > .archive-title, .notes-archive > .notes-archive-intro, .notes-archive > .notes-archive-query { width:100%; max-width:900px !important; margin-left:auto !important; margin-right:auto !important; }
.notes-archive-eyebrow { margin-top:0 !important; margin-bottom:.75rem !important; color:var(--accent); font-weight:700; }
.notes-archive > .archive-title { margin-top:0 !important; margin-bottom:.7rem !important; font-size:clamp(2.7rem,5vw,4.4rem); line-height:1.05; }
.notes-archive-intro { margin-top:0 !important; margin-bottom:1.65rem !important; padding-bottom:1.8rem; border-bottom:1px solid var(--ink); color:var(--muted); font-size:1.05rem; }
.notes-archive-query .wp-block-query-pagination { margin-top:2.5rem; font-size:.82rem; font-weight:700; }
.notes-archive-query .wp-block-query-pagination a { text-decoration:none; }
.empty-state { grid-column: 1 / -1; border: 1px dashed #aab9b1; border-radius: 7px; background: #ffffff80; text-align: center; padding: 4rem 2rem; }
.empty-state h3 { font-size: 2rem; margin: 0 0 .4rem !important; }
.empty-state p:last-child { color: var(--muted); margin-bottom: 0; }

.archive-shell { padding-top: 6rem; padding-bottom: 7rem; }
.archive-title { font-size: clamp(3.5rem, 8vw, 7rem); letter-spacing: -.015em; margin: 0 0 3rem; }
.accent-period { color: var(--accent); }
.archive-shell .wp-block-search { max-width: 640px; margin-bottom: 3rem; }
.archive-shell .wp-block-search__input { border: 1px solid var(--line); border-radius: 5px; background: #fff; padding: .8rem 1rem; font: inherit; }
.archive-shell .wp-block-search__button { border-radius: 5px; }

.article-shell { width: min(100% - 64px, 1180px); padding-top: clamp(3.5rem, 7vw, 7rem); padding-bottom: 7rem; margin-inline: auto; }
.article-heading { max-width: 850px; margin: 0 auto 3.5rem !important; }
.back-link { display: inline-block; margin-bottom: 3rem; color: var(--muted); font-family: var(--wp--preset--font-family--mono); font-size: .73rem; text-decoration: none; }
.back-link:hover { color: var(--accent); }
.article-meta { gap: .6rem; margin: 0 0 1.4rem !important; font-family: var(--wp--preset--font-family--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }
.article-meta a { color: var(--accent); text-decoration: none; font-weight: 700; }
.article-meta .wp-block-post-terms { color: var(--accent); font-weight: 700; }
.article-meta p { margin: 0; }
.article-title { font-size: clamp(3.2rem, 7vw, 6.5rem); letter-spacing: -.015em; line-height: .98; margin: 0 !important; }
.article-deck { margin-top: 1.5rem !important; color: #53625c; font-size: 1.28rem; line-height: 1.55; }
.article-deck:empty { display: none; }
.article-cover { margin: 0 auto 4.5rem !important; }
.article-cover img { display: block; width: 100%; max-height: 640px; object-fit: cover; border-radius: 5px; }
.article-cover.has-icon { display: none; }
.article-content { font-size: 1.17rem; line-height: 1.78; }
.article-shell > .article-content { width:min(100%,850px); max-width:850px !important; margin-inline:auto; padding:clamp(1.5rem,3.5vw,3rem); border:1px solid var(--line); border-radius:9px; background:#fff; box-shadow:0 10px 30px #15272608; }
.article-content > :not(.alignwide):not(.alignfull) { max-width: 720px; }
.article-content > * + * { margin-top: 1.45em; }
.article-content p { margin-bottom: 0; }
.article-content h2, .article-content h3 { margin-top: 2.25em; margin-bottom: .5em; }
.article-content h2 { font-size: clamp(2rem, 4vw, 2.8rem); }
.article-content h3 { font-size: 1.7rem; }
.article-content a { text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.article-content blockquote { margin-block: 2.5rem; padding-left: 1.6rem; border-left: 3px solid var(--accent); font-family: var(--wp--preset--font-family--serif); font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.45; }
.article-content blockquote cite { display: block; margin-top: 1rem; color: var(--muted); font-family: var(--wp--preset--font-family--mono); font-size: .7rem; font-style: normal; letter-spacing: .03em; }
.article-content figcaption { color: var(--muted); font-family: var(--wp--preset--font-family--mono); font-size: .7rem; text-align: center; }
.article-content :where(pre, .wp-block-code) { position: relative; max-width: 900px; overflow-x: auto; margin: 2.3rem auto !important; padding: 2.6rem 1.6rem 1.7rem; border: 1px solid #314d48; border-radius: 10px; background: #152726; color: #e4f3e9; box-shadow: 0 16px 36px #15272620; font-family: var(--wp--preset--font-family--mono); font-size: .84rem; line-height: 1.75; tab-size: 2; }
.article-content :where(pre, .wp-block-code)::before { content: '●  ●  ●'; position: absolute; top: .65rem; left: 1.6rem; color: #eb725d; font-size: .8rem; letter-spacing: .3em; }
.article-content pre code, .article-content .wp-block-code code { display: block; padding: 0; background: transparent; color: inherit; font: inherit; white-space: pre; }
.article-content :not(pre) > code { padding: .15em .35em; border: 1px solid #cfe0d6; border-radius: 4px; background: #e8f1eb; color: #254c3d; font-family: var(--wp--preset--font-family--mono); font-size: .83em; }
.article-content .wp-block-table { overflow-x: auto; }
.article-content .wp-block-separator { border-color: var(--line); opacity: 1; margin-block: 3rem; }
.article-end { max-width: 720px; margin: 4rem auto 0 !important; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--muted); font-family: var(--wp--preset--font-family--mono); font-size: .72rem; }
.article-end a { text-decoration: none; }
.article-end .back-link { margin: 2rem 0 0; }
.page-shell > .article-title { max-width: 850px; margin: 0 auto 3.5rem !important; }
.not-found { padding-block: 11rem; }
.not-found h1 { font-size: clamp(4rem, 9vw, 8rem); margin: .5rem 0 1rem; }
.not-found > p:not(.eyebrow) { color: var(--muted); font-size: 1.25rem; }
.pill-link { display: inline-block; margin-top: 1.5rem; padding: .8rem 1.15rem; border-radius: 100px; background: var(--ink); color: #fff; font-family: var(--wp--preset--font-family--mono); font-size: .75rem; text-decoration: none; }
.pill-link:hover { color: #fff; background: var(--accent); }

.site-footer { border-top: 1px solid var(--line); padding: 2.2rem 32px; margin: 0; }
.footer-inner { max-width: 1180px; margin-inline: auto; gap: 1.5rem; }
.footer-inner p { margin: 0; color: var(--muted); font-size: .78rem; }
.footer-links { display: flex; gap: 1.7rem; }

@media (max-width: 780px) {
  .main-shell, .article-shell { width: min(100% - 40px, 1180px); }
  .site-header, .site-footer { padding-inline: 20px; }
  .site-intro { padding-top: 3.4rem; padding-bottom: 3.3rem; }
  .writing-query .wp-block-post-template { grid-template-columns: 1fr; }
  .post-card { min-height: 270px; }
  .card-image { height: 250px; }
  .article-shell { padding-top: 4rem; }
  .note-row { grid-template-columns:44px minmax(0,1fr) auto; column-gap:.9rem; }
  .note-row-icon { width:44px; height:44px; }
  .note-row-date { padding:0; }
}
@media (max-width: 480px) {
  .site-brand { font-size: 1.08rem; }
  .header-links { gap: .65rem; }
  .header-links a { font-size: .58rem; }
  .intro-title { font-size: 2rem; }
  .intro-copy { font-size: 1.08rem; }
  .section-heading { align-items: flex-start; gap: .3rem; }
  .section-kicker { font-size: .65rem; }
  .card-image { height: 200px; }
  .footer-inner { align-items: flex-start; }
  .article-content { font-size: 1.08rem; }
  .article-content :where(pre, .wp-block-code) { margin-inline: 0 !important; border-radius: 6px; }
  .note-row-title { grid-column:2 / 4; }
  .note-row-date { grid-column:2 / 4; grid-row:2; justify-self:end; }
  .note-row-excerpt { grid-row:3; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}