/* Inner pages. Loaded without blocking first paint, on every page. Each page sets an accent hue on its wrapper
   (.ph-page.ph-acc-*); the hue goes on borders, LEDs and glows. --pat is the text-safe version for small type. */
.ph-acc-cyan{--pa:var(--ph-color-signal);--pat:var(--ph-color-signal)}
.ph-acc-violet{--pa:var(--ph-color-layer);--pat:color-mix(in srgb,var(--ph-color-layer) 55%,var(--ph-color-ink))}
.ph-acc-green{--pa:var(--ph-color-success);--pat:var(--ph-color-success)}
.ph-acc-gold{--pa:var(--ph-color-arcade-gold);--pat:var(--ph-color-arcade-gold)}
.ph-acc-magenta{--pa:var(--ph-color-attention);--pat:var(--ph-color-attention)}
.ph-page{--pa:var(--ph-color-signal);--pat:var(--ph-color-signal)}

/* Page head: terminal breadcrumb, accent glow */
.ph-pagehead{padding:clamp(2.5rem,7vw,5rem) var(--ph-gutter) clamp(2rem,5vw,3.25rem);border-bottom:1px solid color-mix(in srgb,var(--pa) 35%,transparent);background:radial-gradient(55% 90% at 15% 0,color-mix(in srgb,var(--pa) 11%,transparent),transparent 70%)}
.ph-crumb{display:flex;align-items:center;gap:.6ch;margin:0 0 1rem;font:500 .78rem var(--ph-font-mono);letter-spacing:var(--ph-tracking-ui);text-transform:uppercase;color:var(--ph-color-ink-2)}
.ph-crumb span{color:var(--pat)}
.ph-crumb b{font-weight:500;color:var(--ph-color-ink)}
.ph-cur{display:inline-block;width:.55em;height:1.05em;margin-left:.4ch;background:var(--pa);animation:ph-cur-blink 1s steps(1) 5}
@keyframes ph-cur-blink{50%{opacity:0}}
body.ph-showcase .ph-pagehead h1{margin:0 0 .35em;font-size:clamp(2.2rem,7vw,4rem);letter-spacing:.01em}
.ph-pagehead h1 .sig{color:var(--pat);text-shadow:0 0 6px color-mix(in srgb,var(--pa) 55%,transparent),0 0 14px color-mix(in srgb,var(--pa) 18%,transparent)}
.ph-lede2{max-width:42rem;margin:0;color:var(--ph-color-ink-2);font-size:clamp(1.05rem,2.4vw,1.25rem)}
/* Title card: HUD brackets frame the page title and snap in on load. Decoration only; text is never hidden at load
   (this file arrives async, hiding text would flicker and delay LCP). */
.ph-pagehead .ph-wrap{position:relative}
.ph-pagehead .ph-wrap::before,.ph-pagehead .ph-wrap::after{content:"";position:absolute;width:14px;height:14px;border:1px solid var(--pa);pointer-events:none}
.ph-pagehead .ph-wrap::before{top:-.75rem;left:-.75rem;border-right:0;border-bottom:0}
.ph-pagehead .ph-wrap::after{right:-.75rem;bottom:-.75rem;border-left:0;border-top:0}
@media (max-width:600px){.ph-pagehead .ph-wrap::before{left:-.5rem}.ph-pagehead .ph-wrap::after{right:-.5rem}}
@media (prefers-reduced-motion:no-preference){
 .ph-pagehead .ph-wrap::before{animation:ph-bk-tl var(--ph-motion-crt-on) var(--ph-motion-ease) backwards}
 .ph-pagehead .ph-wrap::after{animation:ph-bk-br var(--ph-motion-crt-on) var(--ph-motion-ease) 60ms backwards}
 @keyframes ph-bk-tl{from{opacity:0;transform:translate(-8px,-8px)}}
 @keyframes ph-bk-br{from{opacity:0;transform:translate(8px,8px)}}
}

/* Accent carries through shared components inside a page */
.ph-page .ph-card::before,.ph-page .ph-card::after{border-color:var(--pa)}
.ph-page .ph-eyebrow::before{background:var(--pa);box-shadow:0 0 8px color-mix(in srgb,var(--pa) 60%,transparent)}
.ph-page .ph-section h2 .sig{color:var(--pat)}
.ph-page .ph-band{border-top-color:color-mix(in srgb,var(--pa) 35%,transparent);background:radial-gradient(50% 120% at 50% 0,color-mix(in srgb,var(--pa) 10%,transparent),transparent 70%)}
.ph-page .ph-card:hover{background-image:radial-gradient(170px circle at var(--cx,50%) var(--cy,50%),color-mix(in srgb,var(--pa) 18%,transparent),transparent 70%),linear-gradient(180deg,color-mix(in srgb,var(--pa) 6%,transparent),transparent 12%)}

/* A heading rule draws in as it enters the viewport. Body copy and cards remain still. */
.ph-page .ph-section h2{position:relative}
.ph-page .ph-section h2::after{content:"";position:absolute;left:0;bottom:-.45rem;width:3rem;height:2px;background:var(--pa);transform-origin:left}
.ph-page .ph-band h2::after{left:50%;margin-left:-1.5rem;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
 @supports (animation-timeline:view()){
  @keyframes ph-rule{from{transform:scaleX(0)}}
  body:not(.ph-plain) .ph-page .ph-section h2::after{animation:ph-rule var(--ph-motion-ease) backwards;animation-timeline:view();animation-range:entry 20% entry 80%}
 }
}

/* Hosting details use the native GenerateBlocks accordion. */
.ph-unit{margin-top:2rem;border:1px solid var(--ph-color-line-medium);border-radius:var(--ph-radius-card);background:var(--ph-color-panel);transition:border-color var(--ph-motion-duration) var(--ph-motion-ease),box-shadow var(--ph-motion-duration) var(--ph-motion-ease)}
.ph-unit>.gb-accordion__toggle{display:flex;align-items:center;gap:.9rem;min-height:56px;padding:0 1rem;list-style:none;cursor:pointer;font:600 1.05rem var(--ph-font-display);letter-spacing:.04em;text-transform:uppercase}
.ph-unit>.gb-accordion__toggle::-webkit-details-marker{display:none}
.ph-unit>.gb-accordion__toggle::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--ph-color-line-strong);transition:background var(--ph-motion-duration) var(--ph-motion-ease),box-shadow var(--ph-motion-duration) var(--ph-motion-ease)}
.ph-unit>.gb-accordion__toggle::after{content:"+";margin-left:auto;font:500 .7rem var(--ph-font-mono);letter-spacing:var(--ph-tracking-ui);color:var(--ph-color-ink-2)}
.ph-unit>.gb-accordion__toggle:focus-visible{outline:2px solid var(--pa);outline-offset:2px}
.ph-unit:hover{border-color:var(--ph-color-line-strong)}
.ph-unit.gb-accordion__item-open{border-color:var(--pa);box-shadow:0 0 6px color-mix(in srgb,var(--pa) 40%,transparent)}
.ph-unit.gb-accordion__item-open>.gb-accordion__toggle::before{background:var(--pa);box-shadow:0 0 8px var(--pa)}
.ph-unit>:not(.gb-accordion__toggle){margin-left:1rem;margin-right:1rem}
.ph-unit .gb-accordion__content>p{margin-top:0;margin-bottom:.5rem;color:var(--ph-color-ink-2)}
.ph-unit.gb-accordion__item-open>.gb-accordion__toggle::after{content:"−"}

/* Contact: a plain terminal-framed form (no effects on the fields) */
.ph-term{overflow:hidden;border:1px solid var(--ph-color-line-medium);border-radius:var(--ph-radius-card);background:var(--ph-color-surface)}
.ph-term::before{content:"Your message";display:block;padding:.55rem .9rem;border-bottom:1px solid var(--ph-color-line-medium);background:var(--ph-color-panel);font:500 .72rem var(--ph-font-mono);letter-spacing:.06em;color:var(--ph-color-ink-2)}
.ph-term .ph-contact-form{padding:1.1rem}
.ph-mailto{margin-top:1.25rem;color:var(--ph-color-ink-2)}

/* Blog: posts as a log feed; single posts as a reading column */
/* The page head runs the full width; the feed under it keeps the page measure. */
body.ph-showcase.blog .site-main,body.ph-showcase.archive .site-main,body.ph-showcase.search .site-main{display:grid!important;gap:1rem;max-width:none!important;margin:0!important;padding:0 0 clamp(2rem,6vw,4rem)!important}
body.ph-showcase.blog .site-main>.ph-page,body.ph-showcase.archive .site-main>.ph-page,body.ph-showcase.search .site-main>.ph-page{margin-bottom:clamp(.5rem,2vw,1.5rem)}
body.ph-showcase.blog .site-main>:not(.ph-page),body.ph-showcase.archive .site-main>:not(.ph-page),body.ph-showcase.search .site-main>:not(.ph-page){width:min(100% - 2 * var(--ph-gutter),var(--ph-max));margin:0 auto}
body.ph-showcase:is(.blog,.archive,.search) .inside-article{padding:1.25rem!important;border:1px solid var(--ph-color-line-medium)!important;border-left:3px solid var(--ph-color-signal)!important;border-radius:var(--ph-radius-card)!important;background:var(--ph-color-panel)!important}
body.ph-showcase:is(.blog,.archive,.search) .entry-title{margin:0 0 .4rem;font-size:clamp(1.25rem,3.4vw,1.7rem)}
body.ph-showcase:is(.blog,.archive,.search) .entry-title a{color:var(--ph-color-ink);text-decoration:none}
body.ph-showcase:is(.blog,.archive,.search) .entry-title a:hover{color:var(--ph-color-signal)}
body.ph-showcase:is(.blog,.archive,.search) .post-image img{display:block;width:100%;height:auto;max-height:18rem;object-fit:cover;border:1px solid var(--ph-color-line-weak);margin-bottom:1rem}
body.ph-showcase:is(.blog,.archive,.search) .entry-summary p{margin:0 0 .75rem;color:var(--ph-color-ink-2)}
body.ph-showcase .entry-meta,body.ph-showcase .entry-meta a{font:500 .72rem var(--ph-font-mono);letter-spacing:var(--ph-tracking-ui);text-transform:uppercase;color:var(--ph-color-ink-2)}
/* Meta links are tap targets: at least 24px tall and spaced apart (WCAG 2.2 target size). */
body.ph-showcase .entry-meta a{display:inline-block;min-height:24px;padding:.55rem 0;margin-right:.9rem}
body.ph-showcase .entry-meta a:hover{color:var(--ph-color-signal)}
/* GeneratePress paints .read-more.button with its own cyan fill; match the theme button so the cyan label stays readable. */
body.ph-showcase .read-more-container a,body.ph-showcase a.read-more{display:inline-flex;align-items:center;min-height:44px;color:var(--ph-color-signal)}
body.ph-showcase .read-more-container a.read-more,body.ph-showcase a.read-more.button{justify-content:center;padding:0 1.6rem;font:500 .85rem var(--ph-font-display);letter-spacing:var(--ph-tracking-button);text-transform:uppercase;text-decoration:none;color:var(--ph-color-signal);background:var(--ph-color-panel);border:1px solid var(--ph-color-line-strong);border-radius:var(--ph-radius-control)}
body.ph-showcase .read-more-container a.read-more:is(:hover,:focus,:active),body.ph-showcase a.read-more.button:is(:hover,:focus,:active){color:var(--ph-color-signal);background:linear-gradient(180deg,#00E5FF1A,#FF2E880A),var(--ph-color-panel);box-shadow:-1px 0 0 #FF2E8899,1px 0 0 #00E5FF99,0 0 4px #00E5FF8C,0 0 12px #00E5FF38}
body.ph-showcase.single .inside-article{max-width:calc(var(--ph-max) + 2 * var(--ph-gutter))!important;margin:0 auto!important;padding:clamp(2rem,6vw,4rem) var(--ph-gutter)!important}
/* The article is as wide as the page head so cards and grids can use the width; running text keeps a 46rem measure, aligned left with the title. */
body.ph-showcase.single .entry-content>:not(.ph-card,.ph-grid){max-width:46rem}
body.ph-showcase.single .entry-title{font-size:clamp(1.9rem,6vw,3rem);margin-bottom:.5rem}
body.ph-showcase.single .entry-content{line-height:1.75}
body.ph-showcase.single .entry-content h2,body.ph-showcase.single .entry-content h3{margin-top:2rem}
/* Cards and grids placed directly in a post: space them from neighbouring blocks, and keep a card title at the card padding (the h3 rule above would push it down 2rem). */
body.ph-showcase.single .entry-content>:is(.ph-card,.ph-grid){margin:0 0 1.5rem}
body.ph-showcase.single .entry-content .ph-card :is(h3,h4,h5){margin-top:0}
body.ph-showcase.single .entry-content .ph-card .ph-plate{margin-bottom:.5rem}
/* Long cards hold several paragraphs and lists: the card style zeroes paragraph margins, so space them. */
body.ph-showcase.single .entry-content .ph-card>:is(p,ul)+:is(p,ul){margin-top:.85rem}
body.ph-showcase.single .entry-content img{height:auto;border:1px solid var(--ph-color-line-weak)}
body.ph-showcase.single .entry-content pre,body.ph-showcase.single .entry-content code{font-family:var(--ph-font-mono);background:var(--ph-color-inset);border:1px solid var(--ph-color-line-weak)}
body.ph-showcase.single .entry-content pre{padding:1rem;overflow:auto}
body.ph-showcase.single .entry-content code{padding:.1rem .35rem}
body.ph-showcase.single .entry-content blockquote{margin-left:0;padding-left:1rem;border-left:3px solid var(--ph-color-attention);color:var(--ph-color-ink-2)}
body.ph-showcase.single .inside-article{padding-top:clamp(1.5rem,4vw,2.5rem)!important}
body.ph-showcase.single .entry-content a{color:var(--ph-color-signal);text-underline-offset:.2em}
body.ph-showcase.single .entry-content :is(ul,ol){padding-left:1.25rem}
body.ph-showcase.single .entry-content ul{list-style:none;padding-left:1.1rem}
body.ph-showcase.single .entry-content ul>li{position:relative}
body.ph-showcase.single .entry-content ul>li::before{content:">";position:absolute;left:-1.1rem;color:var(--ph-color-signal);font-family:var(--ph-font-mono)}
body.ph-showcase.single footer.entry-meta{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--ph-color-line-weak)}
body.ph-showcase.single .cat-links a{padding:.35rem .6rem;border:1px solid var(--ph-color-line-medium);border-radius:var(--ph-radius-card)}
body.ph-showcase.single .post-navigation{padding:0}
body.ph-showcase.single .post-navigation .nav-links{display:flex;justify-content:space-between;gap:1rem;width:100%}
body.ph-showcase.single .gp-icon{display:none}
body.ph-showcase .paging-navigation,body.ph-showcase .post-navigation{max-width:var(--ph-max);margin:0 auto;padding:0 var(--ph-gutter) 3rem}

/* 404 */
.ph-lost{text-align:center}
.ph-lost p{margin-inline:auto}
.ph-lost .ph-big{display:block;margin-bottom:.5rem}

/* Plain in-content links: GeneratePress styles bare links after this stylesheet's critical rules, so scope higher. */
body.ph-showcase :is(.entry-content,.entry-summary,.ph-wrap) a:not([class]){color:var(--ph-color-signal)}
body.ph-showcase :is(.entry-content,.entry-summary,.ph-wrap) a:not([class]):hover{color:var(--ph-color-ink)}

.ph-unit>.gb-accordion__toggle{width:100%;text-align:left;color:var(--ph-color-ink);background:transparent;border:0;border-radius:0}
.ph-unit>.gb-accordion__content{margin:0;padding:0 1rem}
.ph-unit .gb-accordion__content>p{margin:0 0 .75rem}
@media (prefers-reduced-motion:reduce){.gb-accordion__content{transition:none}}