/* PicSeason blog listing + single article styles.
   Loaded after app.css (shares --cream, --ink, --orange, --tan, --blue,
   --beige, --font, --display, --r, --maxw, --btn, --wrap from it) so the
   whole PicSeason design system stays on one set of tokens. */

:root{
  --card: var(--paper);
  --line: rgba(34,31,27,.12);
  --line-strong: rgba(34,31,27,.22);
  --ink-soft: rgba(34,31,27,.65);
  --ink-mute: rgba(34,31,27,.45);
  --shadow: 0 1px 2px rgba(34,31,27,.06), 0 10px 30px rgba(34,31,27,.07);
  --shadow-lift: 0 18px 46px rgba(34,31,27,.16);
  --radius-m: 16px;
  --radius-s: 10px;
  --orange-ink: #c85b28;
}

/* Nav is now the shared floating dock from app.css (see
   template-parts/picseason-nav.php), so no page-specific nav styles here. */

/* Footer is now the shared #join section from app.css (see
   template-parts/picseason-footer.php); its own padding already leaves
   room for the fixed dock nav, so no page-specific footer styles here. */

/* ---------------------------------- PAGE HEADER ---------------------------------- */
/* Font sizes and spacing below use clamp(min, vw, max): max is the
   original desktop value, min is the floor at small viewports, and the
   vw step is scaled against a ~1040px reference (matching the clamp()
   already used for the big headings) so everything shares one fluid
   scale instead of jumping at breakpoints. Values 8px and under are left
   fixed since they're already at the smallest useful size. */
.page-header{position:relative;overflow:hidden;padding:clamp(50px,11.5vw,120px) 0 0;text-align:center;
  background:
    radial-gradient(ellipse 640px 380px at 92% -16%, rgba(147,180,231,.18), transparent 55%),
    radial-gradient(ellipse 620px 460px at 4% 0%, rgba(250,181,109,.42), transparent 56%),
    linear-gradient(180deg, rgba(252,251,249,.6) 0%, var(--cream) 46%);
}
.page-header h1{font-size:clamp(41px,8.9vw,90px);line-height:1.05;max-width:640px;margin-left:auto;margin-right:auto;font-weight:700;letter-spacing:-0.03em}
.page-header p{margin-top:clamp(12px,1.5vw,16px);margin-left:auto;margin-right:auto;font-size:clamp(14px,1.6vw,16.5px);color:var(--ink-soft);max-width:520px}
.back-link{display:inline-flex;align-items:center;gap:6px;font-family:var(--display);font-weight:500;font-size:clamp(12.4px,1.3vw,13.5px);color:var(--ink-soft);margin-bottom:clamp(22px,3.8vw,40px)}
.back-link:hover{color:var(--ink)}
.back-link svg{width:15px;height:15px}

/* ---------------------------------- LAYOUT ---------------------------------- */
.content{padding:clamp(29px,5vw,52px) 0 clamp(38px,7.7vw,80px)}

/* ---------------------------------- ART TILES (placeholder art, brand-toned) ---------------------------------- */
.art-tile{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-m);background:#e5dfd4}
.art-tile img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}
.art-tile svg.art-icon{width:30%;height:30%;stroke:#fff;opacity:.92;position:relative;z-index:1}

/* ---------------------------------- SECTIONS / CARDS ---------------------------------- */
.section-label{display:flex;align-items:center;gap:clamp(8px,1vw,10px);margin-bottom:clamp(22px,3.8vw,40px)}
.section-label h2{font-size:clamp(15.4px,2.1vw,22px);font-weight:700}
.section-label .rule{flex:1;height:1px;background:var(--line-strong)}

.featured-grid{display:grid;grid-template-columns:2fr 1fr;gap:clamp(14px,2.1vw,22px);margin-bottom:clamp(48px,9.6vw,100px)}
.featured-grid .featured-secondary{display:flex;flex-direction:column;gap:clamp(14px,2.1vw,22px);min-width:0}
@media (max-width:760px){.featured-grid{grid-template-columns:1fr}}

.fpost{display:block;min-width:0;border-radius:var(--r);overflow:hidden;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease}
.fpost:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.fpost .art-tile{aspect-ratio:3/2;border-radius:0}
.fpost.compact .art-tile{aspect-ratio:3/2}
.fpost-body{padding:clamp(14px,2.1vw,22px) clamp(16px,2.3vw,24px) clamp(17px,2.5vw,26px)}
.fpost.compact .fpost-body{padding:clamp(12px,1.5vw,16px) clamp(12px,1.7vw,18px) clamp(12px,1.7vw,18px)}
.fpost h3{font-size:clamp(16.1px,2.2vw,23px);margin-top:clamp(9px,1.2vw,12px);line-height:1.2;font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fpost.compact h3{font-size:clamp(14px,1.6vw,16.5px);margin-top:clamp(7px,0.9vw,9px);line-height:1.2;font-weight:500;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fpost .excerpt{margin-top:clamp(8px,1vw,10px);font-size:clamp(12.3px,1.4vw,14.5px);color:var(--ink-soft)}
.fpost.compact .excerpt{display:none}

.tag{display:inline-block;font-family:var(--display);font-weight:500;font-size:clamp(10.6px,1.1vw,11.5px);letter-spacing:.02em;color:var(--orange-ink);background:rgba(252,136,80,.14);padding:5px clamp(8px,1.1vw,11px);border-radius:999px}
.art-tile .tag{position:absolute;left:16px;bottom:16px;font-family:var(--display);font-weight:500;font-size:clamp(12px,1.2vw,13px);letter-spacing:0;color:var(--cream);background:rgba(34,31,27,.72);padding:7px clamp(11px,1.4vw,15px);border-radius:999px;backdrop-filter:blur(6px)}
.byline{margin-top:clamp(12px,1.5vw,16px);display:flex;align-items:center;gap:8px;font-size:clamp(11.5px,1.2vw,12.5px);color:var(--ink-mute)}
.byline .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-mute)}

/* 3 columns: since the sidebar was removed, this grid now spans the full
   page width, and 2 columns made each card far too large. */
.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.3vw,24px)}
@media (max-width:980px){.article-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.article-grid{grid-template-columns:1fr}}
.apost{display:block;min-width:0}
.apost .art-tile{aspect-ratio:3/2;border-radius:var(--radius-m)}
.apost-body{padding-top:clamp(12px,1.5vw,16px)}
.apost h3{font-size:clamp(14px,1.7vw,18px);margin-top:clamp(8px,1vw,10px);line-height:1.28;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Reserves room for 2 lines so cards with a short excerpt don't leave the
   date sitting higher than cards with a longer one. Not needed on mobile,
   where the grid is 1 column and cards no longer sit side by side.
   min-height is left fixed (not clamped) since it's pinned to 2 lines of
   the excerpt's own font-size/line-height, not a standalone spacing value. */
.apost .read-more{display:inline-block;margin-top:clamp(8px,1vw,10px);font-family:var(--display);font-weight:500;font-size:clamp(12.4px,1.3vw,13.5px);color:var(--ink);text-decoration:underline;text-underline-offset:3px;transition:color .25s ease}
.apost:hover .read-more{color:var(--orange-ink)}
.apost .byline{margin-top:clamp(11px,1.3vw,14px);padding-top:clamp(11px,1.3vw,14px);border-top:1px solid var(--line)}

.empty-state{padding:clamp(22px,3.8vw,40px) 0;color:var(--ink-soft);font-size:clamp(12.8px,1.4vw,15px)}
.error-state{padding:clamp(22px,3.8vw,40px) 0;color:var(--orange-ink);font-size:clamp(12.8px,1.4vw,15px)}
.grid-loading{padding:clamp(22px,3.8vw,40px) 0;color:var(--ink-mute);font-size:clamp(11.9px,1.3vw,14px);display:flex;align-items:center;gap:clamp(8px,1vw,10px)}
.grid-loading .spinner{width:16px;height:16px;border-radius:50%;border:2px solid var(--line-strong);border-top-color:var(--orange);animation:ps-spin .7s linear infinite}
@keyframes ps-spin{to{transform:rotate(360deg)}}

.ps-pagination{display:flex;gap:clamp(8px,1vw,10px);margin-top:clamp(22px,3.8vw,40px);flex-wrap:wrap}
.ps-pagination a,.ps-pagination span{font-family:var(--display);font-weight:500;font-size:clamp(11.9px,1.3vw,14px);padding:clamp(7px,0.9vw,9px) clamp(12px,1.5vw,16px);border-radius:999px;border:1px solid var(--line-strong);color:var(--ink-soft)}
.ps-pagination a:hover{border-color:var(--ink);color:var(--ink)}
.ps-pagination .current{background:var(--ink);color:var(--cream);border-color:var(--ink)}

/* ---------------------------------- CATEGORY PILLS ---------------------------------- */
/* Now shown under the page header intro text (see page-blog.php): a search
   box on the left, plain-text category tags (separated by "・") on the
   right. The newsletter and popular-posts widgets that used to live
   alongside them in a sidebar were removed along with the sidebar itself. */
.cat-pills{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(13px,1.9vw,20px);margin-top:clamp(17px,2.5vw,26px)}

.cat-search{box-sizing:border-box;display:flex;align-items:center;gap:8px;width:300px;height:37px;border:1px solid var(--line);border-radius:999px;padding:0 clamp(12px,1.5vw,16px);background:var(--cream);transition:border-color .15s ease}
.cat-search:focus-within{border-color:var(--line-strong)}
.cat-search-btn{border:none;background:none;padding:0;margin:0;display:flex;align-items:center;color:var(--ink-soft);cursor:pointer;flex-shrink:0}
.cat-search-btn:hover{color:var(--ink)}
.cat-search-btn svg{width:15px;height:15px}
.cat-search input{flex:1;min-width:0;border:none;background:none;outline:none;font-family:var(--display);font-size:clamp(12px,1.3vw,13px);color:var(--ink)}
.cat-search input::placeholder{color:var(--ink-soft)}

.cat-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cat-pill{box-sizing:border-box;display:inline-flex;align-items:center;height:37px;border:1px solid var(--line);background:var(--cream);border-radius:999px;padding:0 clamp(11px,1.3vw,14px);font-family:var(--display);font-size:clamp(11.5px,1.2vw,12.5px);font-weight:500;color:var(--ink-soft);transition:all .15s ease;cursor:pointer}
.cat-pill:hover{border-color:var(--line-strong);color:var(--ink)}
.cat-pill.active{background:var(--ink);color:var(--cream);border-color:var(--ink)}

/* ---------------------------------- SINGLE ARTICLE ---------------------------------- */
.article-hero{position:relative;overflow:hidden;padding:clamp(42px,9.6vw,100px) 0 0;
  background:
    radial-gradient(ellipse 640px 380px at 92% -16%, rgba(147,180,231,.18), transparent 55%),
    radial-gradient(ellipse 620px 460px at 4% 0%, rgba(250,181,109,.42), transparent 56%),
    linear-gradient(180deg, rgba(252,251,249,.6) 0%, var(--cream) 46%);
}
.article-hero .wrap{max-width:1120px}
.article-hero .tag{margin-top:clamp(12px,1.5vw,16px);margin-bottom:0}

.read-progress{position:fixed;top:0;left:0;height:4px;width:0%;background:var(--orange);z-index:1000;transition:width .1s linear}
.article-hero h1{font-size:clamp(30px,4.6vw,48px);line-height:1.08;font-weight:700;letter-spacing:-0.03em}
.article-byline{display:flex;align-items:center;gap:clamp(9px,1.2vw,12px);margin-top:clamp(16px,2.3vw,24px)}
.article-byline .avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(150deg,var(--tan),var(--orange));flex:none}
.article-byline .who{font-family:var(--display);font-weight:500;font-size:clamp(11.9px,1.3vw,14px);color:var(--ink)}
.article-byline .meta{font-size:clamp(12px,1.3vw,13px);color:var(--ink-mute)}
.article-media{max-width:1120px;margin:clamp(18px,3.1vw,32px) auto 0;padding:0 clamp(16px,3vw,40px)}
.article-media .art-tile{height:min(52vw,440px);border-radius:var(--r)}
.article-media img{border-radius:var(--r);width:100%;display:block}

.article-body-wrap{max-width:1120px;margin:0 auto;padding:clamp(24px,4.2vw,44px) clamp(16px,3vw,40px) 0}
.article-body{font-size:clamp(14.5px,1.6vw,17px);line-height:1.75;color:var(--ink)}
.article-body p{margin:0 0 clamp(14px,2.1vw,22px)}
.article-body h2{font-size:clamp(17.4px,2.7vw,28px);font-weight:700;letter-spacing:-0.02em;margin:clamp(24px,4.2vw,44px) 0 clamp(12px,1.5vw,16px)}
.article-body h3{font-size:clamp(15.4px,2.1vw,22px);font-weight:500;margin:clamp(20px,3.5vw,36px) 0 clamp(11px,1.3vw,14px)}
.article-body ul,.article-body ol{margin:0 0 clamp(14px,2.1vw,22px);padding-left:clamp(14px,2.1vw,22px)}
.article-body li{margin-bottom:8px}
.article-body a{text-decoration:underline;text-underline-offset:3px;color:var(--orange-ink)}
.article-body img{max-width:100%;height:auto;border-radius:var(--radius-m);margin:8px 0 clamp(14px,2.1vw,22px)}
.article-body blockquote{border-left:3px solid var(--orange);padding-left:clamp(13px,1.9vw,20px);margin:0 0 clamp(14px,2.1vw,22px);color:var(--ink-soft);font-style:italic}

.article-foot-nav{max-width:1040px;margin:clamp(31px,5.4vw,56px) auto 0;padding:24px clamp(16px,3vw,40px);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.article-foot-nav a{font-family:var(--display);font-weight:500;font-size:clamp(11.9px,1.3vw,14px);color:var(--ink-soft);max-width:320px}
.article-foot-nav a:hover{color:var(--orange-ink)}
.article-foot-nav .dir{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:4px}
.article-foot-nav .next{text-align:right;margin-left:auto}

.related-posts{max-width:1120px;margin:clamp(31px,6.2vw,64px) auto clamp(50px,11.5vw,120px);padding:0 clamp(16px,3vw,40px)}
.not-found{max-width:640px;margin:0 auto;padding:clamp(50px,11.5vw,120px) clamp(16px,3vw,40px) clamp(67px,15.4vw,160px);text-align:center}
.not-found h1{font-size:clamp(32px,5vw,52px);font-weight:700;letter-spacing:-0.03em}
.not-found p{margin-top:clamp(12px,1.5vw,16px);color:var(--ink-soft);font-size:clamp(13.6px,1.5vw,16px)}
.not-found .btn{margin-top:clamp(18px,2.7vw,28px)}