/* 2026 refresh overrides — loaded after style.css. Keep template CSS untouched. */

/* Project card titles: readable on the dark homepage section */
.alioth-single-project .sw-title { color: #fff; }
.alioth-single-project .sw-cat { color: hsla(0, 0%, 100%, .6); }
.section[style*="width:75%"] .text-wrapper h2,
.section[style*="width:75%"] .text-wrapper h4 { color: #fff; }

@media (max-width: 900px) {
    /* Entrance animations stall on phones, leaving titles/text off-screen. Show content immediately. */
    .tt-char, .tt-word, .tt-line, .project-page-header .project-cat span,
    .has-anim, .has-anim span, .has-anim div {
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    .has-anim .line-holder { overflow: visible !important; }

    /* Hero name: keep "Graham Gorton" on screen */
    .aph-name { font-size: 15vw; white-space: nowrap; }

    /* Project header title sits below the fixed logo */
    .project-page-header .project-title { padding-top: 90px; }
    .project-page-header.style_3 [class^="project-head"] { background-repeat: repeat-x; background-color: #ebebeb; }

    /* Project grid: use the full width on small screens */
    .section[style*="width:75%"] { width: auto !important; margin: 40px 0 !important; }
    .alioth-single-project { width: 100%; }
}

/* Project page titles: the split-letter entrance animation never completes, leaving titles clipped. Show them. */
.project-title .tt-char, .project-title .tt-word, .project-title .tt-line,
.project-page-header .project-cat span { transform: none !important; opacity: 1 !important; visibility: visible !important; }

/* Project category: wrap by word, never clip */
.project-page-header .project-cat { display: block !important; white-space: normal !important; overflow: visible !important; }
.project-page-header .project-cat * { display: inline !important; white-space: normal !important; overflow: visible !important; }

/* Hero name is now the page h1 */
h1.aph-name { margin: 0; line-height: inherit; }

/* Stop the template's fixed dark layer showing through gaps on project pages */
.project-page { background: #fff; }

/* Case study blocks: results stats and structured write-up */
.gg-stats { list-style: none; margin: 40px 0 60px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px 24px; }
.gg-stats li { border-top: 2px solid #191b1d; padding-top: 14px; }
.gg-stats strong { display: block; font-size: 40px; white-space: nowrap; font-weight: 700; letter-spacing: -0.05em; line-height: 1; margin-bottom: 8px; }
.gg-stats span { display: block; font-size: 15px; line-height: 1.4; color: rgb(25 27 29 / 70%); }

.gg-case { font-size: 18px; line-height: 1.6; margin-bottom: 80px; }
.gg-case h4 { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; margin: 48px 0 12px; }
.gg-case p { margin: 0 0 16px; }
.gg-case ul { margin: 0; padding-left: 20px; }
.gg-case li { margin-bottom: 10px; }
.gg-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px 24px; margin: 0 0 8px; padding: 20px 0; border-top: 1px solid rgb(25 27 29 / 15%); border-bottom: 1px solid rgb(25 27 29 / 15%); }
.gg-meta dt { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: rgb(25 27 29 / 55%); margin-bottom: 4px; }
.gg-meta dd { margin: 0; font-weight: 600; }

@media (max-width: 900px) {
    .gg-stats { grid-template-columns: repeat(2, 1fr); }
    .gg-stats strong { font-size: 34px; }
    .gg-case { font-size: 16px; }
}

/* Desktop menu: fit the extra items on one line */
.site-navigation.classic .menu.main-menu { white-space: nowrap; }
.site-navigation.classic .menu.main-menu > li > a { padding-left: 12px; padding-right: 12px; }
.site-navigation.classic .menu.main-menu li { font-size: 15px; }

/* Mobile menu button: a proper 44px touch target, and no tap delay */
.menu-toggle { padding: 10px; margin: -10px; box-sizing: content-box; touch-action: manipulation; }
.site-navigation a { touch-action: manipulation; }

/* Mobile hero: stack "A portfolio by" / name / photo with the header's side margins, no empty full-screen gap */
@media (max-width: 900px) {
    .alioth-personal-head { height: auto; min-height: 0; display: flex; flex-direction: column; padding-top: 130px; }
    .alioth-personal-head .aph-details { order: 1; position: static; transform: none !important; width: auto; height: auto; padding: 0 8.5%; }
    .alioth-personal-head .aph-welc { display: block; position: static; transform: none; font-size: 22px; line-height: 1.2; }
    .alioth-personal-head h1.aph-name { order: 2; position: static; transform: none !important; width: auto; padding: 0 8.5%; margin: 4px 0 24px;
        text-align: left; font-size: calc(83vw / 6.6); line-height: 1; overflow: visible; }
    .alioth-personal-head .aph-name.back { display: none; }
    .alioth-personal-head .aph-image { order: 3; position: relative; left: auto; bottom: auto; width: 100%; transform: none !important; }
    .alioth-personal-head .circular-button { display: none; }
    #secondSec .a-empty-space:first-child { height: 50px !important; }
}

/* Homepage: give the work grid a real dark background (it relied on a template layer showing through,
   which doesn't happen on iPhone, leaving white titles on white) */
#page:not(.project-page) #content { background: #131313; }

@media (max-width: 900px) {
    /* Empty spacer columns used for the desktop zig-zag only add gaps on phones */
    .section[style*="width:75%"] .c-col-4:empty,
    .section[style*="width:75%"] .c-col-8:empty { display: none; }
    .section[style*="width:75%"] .c-col-8[style*="margin-top"] { margin-top: 0 !important; }
}

@media (max-width: 900px) {
    /* Project subtitle sits flush with the title on phones */
    .project-page-header .project-cat { margin-left: 0 !important; }

    /* Homepage "Selected work" heading: stop it overlapping the line below */
    .section[style*="width:75%"] .text-wrapper h2 { margin-bottom: 8px !important; line-height: 1.1; }
    .section[style*="width:75%"] .has-parallax { transform: none !important; }

    /* Project card titles line up with the image edge */
    .alioth-single-project .sw-detail { padding-left: 0; padding-top: 16px; }
}

/* Click-to-play video embeds (js/video-facade.js) */
.gg-video, .gg-video-frame { display: block; position: relative; width: 100%; border: 0; padding: 0; margin: 0; background: #000; cursor: pointer; overflow: hidden; border-radius: 4px; }
.gg-video img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gg-video .gg-play { position: absolute; top: 50%; left: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: rgba(0,0,0,.65); transition: transform .2s, background .2s; }
.gg-video .gg-play::after { content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); border-style: solid; border-width: 14px 0 14px 24px; border-color: transparent transparent transparent #fff; }
.gg-video:hover .gg-play, .gg-video:focus-visible .gg-play { transform: scale(1.08); background: #e8174b; }
.gg-video .gg-video-label { position: absolute; left: 16px; bottom: 14px; color: #fff; font-weight: 700; font-size: 16px; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.gg-ratio-16x9 { aspect-ratio: 16 / 9; }
.gg-ratio-4x3 { aspect-ratio: 4 / 3; }
.gg-ratio-9x16 { aspect-ratio: 9 / 16; width: min(100%, calc(80vh * 9 / 16)); margin: 0 auto; }
/* Touch: player preloads underneath, thumbnail on top until ready */
.gg-video-holder { position: relative; width: 100%; }
.gg-video-holder.gg-ratio-9x16 { width: min(100%, calc(80vh * 9 / 16)); margin: 0 auto; }
.gg-video-holder .gg-video-frame { width: 100%; }
.gg-video-holder .gg-video { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; margin: 0; pointer-events: none; }

/* Mobile typography: readable body text (desktop unchanged) */
@media (max-width: 900px) {
    /* Project write-ups are marked up as h3; on phones set them as body copy */
    .project-page .text-wrapper h3 { font-size: 18px !important; line-height: 1.6 !important; font-weight: 400 !important; letter-spacing: normal !important; }
    .project-page .text-wrapper h3 + h3 { margin-top: 1em; }

    /* Homepage intro statement */
    #secondSec h3 { font-size: 24px !important; line-height: 1.3 !important; }

    /* Image captions */
    .project-page p { font-size: 15px; line-height: 1.4; }

    /* Homepage project card subtitles */
    .alioth-single-project .sw-cat { font-size: 16px; line-height: 1.35; font-weight: 600; letter-spacing: normal; }

    /* Research paper block */
    .award-title { line-height: 1.25 !important; }
    .award-loc { font-size: 16px !important; line-height: 1.4 !important; }
}

/* ==========================================================================
   Accessibility (2026-10 content-design rework)
   ========================================================================== */

/* Text only for screen readers */
.gg-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Skip link: hidden until focused */
.gg-skip { position: absolute; left: 16px; top: -100px; z-index: 10000; padding: 12px 18px; background: #191b1d; color: #fff; font-weight: 700; border-radius: 4px; text-decoration: none; }
.gg-skip:focus { top: 16px; }

/* Visible keyboard focus everywhere (the template removed outlines) */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
    outline: 3px solid #e8174b !important; outline-offset: 3px; border-radius: 2px;
}
main:focus { outline: none; }

/* Menu toggle is now a real <button>: strip browser button styling */
button.menu-toggle { background: none; border: 0; color: inherit; font: inherit; -webkit-appearance: none; appearance: none; }

/* Contrast: grey text that measured below 4.5:1 */
.site-navigation.classic .menu.main-menu > li > a { color: #4a4b4c; }
.site-navigation.classic .menu.main-menu > li > a[aria-current="page"] { color: #191b1d; }
.aph-welc { color: #4a4b4c; }
.project-page-header .project-cat { color: #3f4041; }
.gg-meta dt { color: #5b5c5d; }

/* Respect "reduce motion": show everything immediately */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .tt-char, .tt-word, .tt-line, .project-page-header .project-cat span,
    .has-anim, .has-anim span, .has-anim div,
    .aph-image, .aph-name span, .has-parallax, .img-anim-wrapper img {
        transform: none !important; opacity: 1 !important; visibility: visible !important;
    }
    .img-anim-ov { display: none !important; }
}

/* ==========================================================================
   Homepage sections
   ========================================================================== */
.gg-intro-lead { color: #fff; font-size: 30px; line-height: 1.33; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 28px; }
.gg-intro { color: #d4d4d4; font-size: 20px; line-height: 1.6; margin: 0 0 18px; }

.gg-section-title { font-size: 3.2rem; color: #fff; margin: 0 0 12px; }
.gg-section-sub { color: #d4d4d4; font-size: 20px; line-height: 1.45; font-weight: 600; margin: 0; }

.alioth-single-project h3.sw-title { margin: 0 0 5px; line-height: 1.1; }
.alioth-single-project p.sw-cat { margin: 0; line-height: 1.35; }

.gg-panel { color: #d4d4d4; padding: 40px 0; margin-bottom: 0 !important; }
.gg-panel .wrapper-small { margin-bottom: 0; }
.gg-panel-title { color: #fff; font-size: 40px; font-weight: 700; letter-spacing: -0.04em; line-height: 1.1; margin: 0 0 28px; }
.gg-panel p, .gg-panel li { font-size: 18px; line-height: 1.6; }
.gg-panel p { margin: 0 0 16px; }

.gg-steps { list-style: none; counter-reset: step; margin: 0 0 32px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 40px; }
.gg-steps li { counter-increment: step; border-top: 2px solid #3a3b3c; padding-top: 16px; }
.gg-steps li::before { content: counter(step, decimal-leading-zero); display: block; color: #9a9b9c; font-weight: 700; font-size: 14px; letter-spacing: .08em; margin-bottom: 6px; }
.gg-steps h3 { color: #fff; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 8px; }
.gg-steps p { margin: 0; font-size: 17px; }
.gg-tools { color: #fff; }

.gg-sample-logo { display: block; width: 100%; max-width: 360px; margin: 0 0 20px; }
.gg-link { color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.gg-link:hover { color: #ffb3c4; }
.gg-contact { list-style: none; padding: 0; margin: 0 0 32px; }
.gg-contact li { margin-bottom: 6px; }
.gg-also { color: #b5b6b7; font-size: 16px !important; border-top: 1px solid #3a3b3c; padding-top: 20px; margin-top: 8px; }

@media (max-width: 900px) {
    .gg-intro-lead { font-size: 24px; }
    .gg-intro, .gg-section-sub { font-size: 18px; }
    .gg-section-title { font-size: 2.4rem; }
    .gg-steps { grid-template-columns: 1fr; gap: 24px; }
    .gg-panel { padding: 24px 0; }
    .gg-panel-title { font-size: 32px; }
}

/* ==========================================================================
   Case-study pages
   ========================================================================== */
.gg-case h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.2; margin: 48px 0 12px; color: #191b1d; }
.gg-case p { color: #2a2b2c; }
.gg-case { margin-top: 40px; }
.gg-meta { margin-bottom: 16px; }

/* Draft markers: must be resolved before upload */
.gg-todo { background: #fff3a6; color: #6b4e00; font-weight: 700; padding: 1px 6px; border-radius: 3px; outline: 2px dashed #c99a00; }
.site-header.light .site-navigation.classic .menu.main-menu > li > a { color: hsla(0, 0%, 100%, .78); }
@media (max-width: 900px) { .gg-case { font-size: 18px; } }
/* Full-screen (phone) menu items clip overflow for their slide-in, so draw the focus ring inside */
.site-navigation.fullscreen .menu.main-menu > li > a:focus-visible { outline-offset: -3px; }

/* Menu label: "CHI" in the phone (full-screen) menu, "Child Helpline" on desktop */
.site-navigation .gg-nav-short { display: none; }
.site-navigation.fullscreen .gg-nav-long { display: none; }
.site-navigation.fullscreen .gg-nav-short { display: inline; }
/* The template copies link text into a ::before overlay (data-hover); keep it matching the visible label */
.site-navigation.fullscreen a[href="project-chi.html"]::before { content: "CHI" !important; }

/* Podium videos: three identical vertical videos on desktop, spaced to line up with the
   three panels in the image below (podium-image-2.jpg: 560px panels, 75px and 85px gaps, 1840px wide) */
@media (min-width: 901px) {
    .gg-video-row { display: flex; align-items: flex-start; padding-left: 15px; padding-right: 15px; box-sizing: border-box; }
    .gg-video-row > .c-col-4 { flex: 0 0 30.435%; width: auto; float: none; min-width: 0; padding: 0; margin: 0; }
    .gg-video-row > .c-col-4:nth-child(2) { margin-left: 4.076%; }
    .gg-video-row > .c-col-4:nth-child(3) { margin-left: 4.620%; }
    .gg-video-row .gg-ratio-9x16, .gg-video-row .gg-video-holder.gg-ratio-9x16 { width: 100%; }
}