/*
Theme Name: Ryan Caine
Theme URI: https://example.com
Author: Ryan Caine
Description: A portfolio block theme with a sticky colour rail and full-width project rows.
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
Version: 2.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ryan-caine
*/

:root{
  --rc-line: rgba(36,52,71,.24);
  --rc-pad: 48px;
  --rc-col: 300px;
}
img{max-width:100%;height:auto}

/* ---------- shell: rail + main ---------- */
.wp-site-blocks{padding:0}
.shell{display:grid;grid-template-columns:var(--rc-col) 1fr;min-height:100vh;gap:0}

.rail{
  background:var(--wp--preset--color--field);
  color:var(--wp--preset--color--on-field);
  padding:44px 32px 40px;
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;justify-content:space-between;
}
.rail a{color:var(--wp--preset--color--on-field);text-decoration:none}
.rail .wp-block-site-title{font-size:clamp(40px,3.4vw,58px);font-weight:700;
  line-height:.88;letter-spacing:-.045em;margin:0}
.rail .wp-block-site-tagline{margin:16px 0 0;font-size:15.5px;opacity:.8;max-width:24ch}
.rail .wp-block-navigation{margin-top:32px}
.rail .wp-block-navigation ul{flex-direction:column;gap:4px}
.rail .wp-block-navigation a{font-weight:700;font-size:16px}
.rail .wp-block-navigation a:hover,
.rail .wp-block-navigation .current-menu-item a{text-decoration:underline;text-underline-offset:4px}
.rail .rail-foot{font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.55;line-height:1.8;margin:0}

.main{padding:44px var(--rc-pad) 0;min-width:0}

/* ---------- eyebrow / small caps labels ---------- */
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--wp--preset--color--ink-soft);margin:0 0 8px}

/* ---------- home: project rows ---------- */
.projects .wp-block-post{margin:0}
.rowlink{display:grid;grid-template-columns:1fr 1.15fr;gap:36px;align-items:center;
  padding:34px 0;border-top:1px solid var(--rc-line)}
.projects .wp-block-post:last-child .rowlink{border-bottom:1px solid var(--rc-line)}
.rowlink .wp-block-post-title{font-size:clamp(28px,3.4vw,50px);font-weight:700;
  letter-spacing:-.035em;line-height:.98;margin:0 0 12px}
.rowlink .wp-block-post-title a{text-decoration:none}
.rowlink .wp-block-post-terms,
.rowlink .wp-block-post-date{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--wp--preset--color--ink-soft);margin:0 0 14px}
.rowlink .wp-block-post-excerpt{font-size:16px;color:var(--wp--preset--color--ink-soft);max-width:40ch;margin:0}
.rowlink .wp-block-post-excerpt__more-text{display:none}
.rowlink .wp-block-post-featured-image{margin:0}
.rowlink .wp-block-post-featured-image img{width:100%;aspect-ratio:16/10;object-fit:cover;
  border:1px solid rgba(36,52,71,.12)}
.rowlink:hover .wp-block-post-title a{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}

/* ---------- interior pages ---------- */
.page-head{padding:8px 0 22px;margin-bottom:26px}
.page-head .wp-block-post-title{font-size:clamp(36px,5.4vw,76px);font-weight:700;
  letter-spacing:-.045em;line-height:.96;margin:0;max-width:16ch}
.back-link{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--wp--preset--color--ink-soft);margin:0 0 22px}

/* facts row — the "Project facts" pattern */
.factbar{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:0 0 30px}

/* ---------- Separator block ----------
   All three core styles work. The heavy full-width rule used by the
   Case study intro pattern is the "Wide Line" style (or the .rule class). */
.main .wp-block-group.entry > .wp-block-separator{
  opacity:1;height:0;margin:0 0 44px;
  border:0;border-top:1px solid var(--wp--preset--color--ink);
}

/* Default style — short line, left-aligned to the column */
.main .wp-block-group.entry > .wp-block-separator:not(.is-style-wide):not(.is-style-dots){
  max-width:100px !important;
}

/* Wide Line — the 2px rule under the intro */
.main .wp-block-group.entry > .wp-block-separator.is-style-wide,
.main .wp-block-group.entry > .wp-block-separator.rule{
  max-width:100% !important;border-top-width:2px;
}

/* Dots — needs no border and its own height */
.main .wp-block-group.entry > .wp-block-separator.is-style-dots{
  border:0 !important;height:auto;max-width:100% !important;
  text-align:left;line-height:1;
}
.main .wp-block-group.entry > .wp-block-separator.is-style-dots::before{
  content:"\00b7\00b7\00b7";color:var(--wp--preset--color--ink);
  font-size:26px;letter-spacing:.9em;padding-left:0 !important;font-family:var(--grot);
}
.factbar > *{border-top:1px solid var(--rc-line);padding-top:12px;margin:0}
.factbar strong{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--wp--preset--color--ink-soft);margin-bottom:5px}

.entry{padding-bottom:80px}
/* Measure is capped in ch but also relative to the column, so it breathes
   when the rail collapses instead of leaving dead space on the right. */
/* WordPress's constrained layout centres children with margin:auto !important,
   which pushed body copy inward while rules and figures stayed flush left.
   Everything is left-aligned to the column instead. */
/* Content fills the column by default and is left-aligned. WordPress's
   constrained layout centres children with margin:auto !important via a
   two-class selector, so these overrides need three classes to win. */
.main .wp-block-group.entry > *{max-width:100%;
  margin-left:0 !important;margin-right:0 !important}

/* Opt-in reading measure: add the class "narrow" to any block whose text
   you want held to a comfortable line length. */
.main .wp-block-group.entry > .narrow{max-width:min(78ch,62%) !important;
  transition:max-width .5s cubic-bezier(.4,0,.2,1)}

/* standfirst — first paragraph of a case study, from the intro pattern */
.main .wp-block-group.entry > .dek{font-size:19px;color:var(--wp--preset--color--ink-soft);
  max-width:min(66ch,52%) !important;margin:0 0 26px !important;margin-left:0 !important}
.entry p{margin:0 0 22px}
.entry h2{font-size:clamp(24px,2.6vw,34px);margin:52px 0 16px}
.entry h3{font-size:20px;margin:34px 0 10px}
.entry blockquote{margin:32px 0;padding-left:22px;border-left:3px solid var(--wp--preset--color--ink);font-size:20px;line-height:1.45}
.entry figure{margin:38px 0}
.entry figcaption{font-size:13px;color:var(--wp--preset--color--ink-soft);margin-top:9px}

.pagenav{border-top:2px solid var(--wp--preset--color--ink);padding-top:26px;margin-bottom:80px;
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}

/* ---------- shared bottom blocks ---------- */
.contact{border-top:2px solid var(--wp--preset--color--ink);padding-top:28px;margin-top:80px}
.contact .wp-block-column p:first-child{margin-top:0}
.contact h2{font-size:clamp(24px,2.6vw,40px);max-width:15ch;margin:0}
.contact .cta{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:2px solid var(--wp--preset--color--ink);padding-bottom:3px;
  display:inline-block;text-decoration:none}
.pagefoot{padding:60px 0 48px;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--wp--preset--color--ink-soft);margin:0}

:where(a):focus-visible{outline:2px solid var(--wp--preset--color--accent);outline-offset:3px}

@media (max-width:900px){
  :root{--rc-pad:24px}
  .shell{grid-template-columns:1fr}
  .rail{position:static;height:auto;padding:40px 24px 34px}
  .rail .wp-block-navigation ul{flex-direction:row;flex-wrap:wrap;gap:18px}
  .rail .rail-foot{display:none}
  .main{padding-top:34px}
  .rowlink{grid-template-columns:1fr;gap:18px}
  .rowlink .wp-block-post-featured-image{order:-1}
  .rowlink .wp-block-post-featured-image img{aspect-ratio:16/9}
  .factbar{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}


.bleed.bleed{
  margin-left:-48px !important;
  margin-right:-48px !important;
  max-width:none !important;
  width:auto !important;
  padding:64px 48px !important;
}
@media (max-width:900px){
  .bleed.bleed{
    margin-left:-24px !important;
    margin-right:-24px !important;
    padding:44px 24px !important;
  }
}

/* ---------- rail section links (single-project only) ---------- */
.rail-sections-wrap{margin-top:28px;padding-top:20px;border-top:1px solid rgba(242,240,234,.22)}
.rail-sections-label{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(242,240,234,.45);margin:0 0 12px}
.rail-sections{list-style:none;margin:0;padding:0}
.rail-sections li{margin:0 0 2px}
.rail-sections a{display:block;font-size:15px;line-height:1.35;padding:6px 0 6px 13px;
  color:rgba(242,240,234,.62);text-decoration:none;
  border-left:2px solid transparent;transition:color .2s,border-color .2s}
.rail-sections a:hover{color:var(--wp--preset--color--on-field)}
.rail-sections a.is-current{color:var(--wp--preset--color--on-field);
  border-left-color:var(--wp--preset--color--accent);font-weight:700}
.rail-sections-more{font-size:15px;color:rgba(242,240,234,.35);padding:4px 0 0 13px}

html{scroll-behavior:smooth}
.entry h2{scroll-margin-top:32px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media (max-width:900px){.rail-sections-wrap{display:none}}