/*
Theme Name: Young & Seen
Description: A custom editorial theme for South Africa's youth magazine. Includes editable core-block pages, ten reusable patterns and the locked Young & Seen identity. No page builder or plugin required.
Version: 1.0.2
Requires at least: 6.6
Tested up to: 7.1.2
Requires PHP: 8.3
Author: Young & Seen
Text Domain: young-seen
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: custom-menu, featured-images, block-patterns, editor-style, wide-blocks, one-column, two-columns
*/

:root{--ys-ink:#11110f;--ys-cream:#f6f2e9;--ys-gold:#d7b66c;--ys-deep-gold:#785b21;--ys-muted:#625e55;--ys-line:#d9d1c1;--ys-serif:Georgia,'Times New Roman',serif;--ys-sans:Arial,Helvetica,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:28px}
body{margin:0;background:var(--ys-cream);color:#1a1916;font:400 17px/1.7 var(--ys-sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
figure{margin:0}
button,input,textarea,select{font:inherit}
button,a,input,textarea{touch-action:manipulation}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:5px}
a:hover{color:var(--ys-deep-gold)}
button{cursor:pointer}
:focus-visible{outline:3px solid #956f1f;outline-offset:5px}
.ys-dark :focus-visible,.ys-hero :focus-visible,.ys-header :focus-visible,.ys-footer :focus-visible{outline-color:#f2d489}
[tabindex="-1"]:focus:not(:focus-visible){outline:0}
.screen-reader-text{clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute!important;white-space:nowrap}
.screen-reader-text:focus{clip:auto!important;clip-path:none;height:auto;width:auto;left:16px;top:16px;background:#fff;color:#111;padding:16px;z-index:100000}
h1,h2,h3,h4{font-family:var(--ys-serif);font-weight:400;line-height:1.08;margin:0 0 24px;overflow-wrap:break-word}
h1{font-size:clamp(42px,6.1vw,84px);letter-spacing:-.045em}
h2{font-size:clamp(34px,4.1vw,58px);letter-spacing:-.04em}
h3{font-size:27px;letter-spacing:-.02em}
h4{font-size:23px}
h1 em,h2 em{color:var(--ys-deep-gold);font-weight:400}
p{margin:0 0 20px}
ul,ol{padding-left:24px}
.ys-container{width:min(1280px,calc(100% - 48px));margin-inline:auto}
.ys-section{padding:64px 0}
.ys-section :where(.wp-block-group,.wp-block-image,.wp-block-buttons,.wp-block-heading,p){margin-block-start:0}
.ys-section .wp-block-group{min-width:0}
.ys-section .wp-block-image{margin-bottom:0}
.ys-section p{margin-bottom:20px}
.ys-section h1,.ys-section h2{margin-bottom:24px}
.ys-nowrap{white-space:nowrap}
.ys-section .wp-block-buttons{margin-top:30px}
.ys-eyebrow{font-family:var(--ys-sans);font-size:11px;font-weight:700;line-height:1.6;text-transform:uppercase;letter-spacing:.18em;color:var(--ys-deep-gold);margin:0 0 24px}
.ys-lead{font-size:17px;line-height:1.75}
.wp-block-buttons{display:flex;flex-wrap:wrap;gap:12px}
.ys-section .wp-block-button__link{font-family:var(--ys-sans)}
.wp-block-button__link,.ys-header-cta,.ys-search button,input[type="submit"]{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:13px 23px;border:1px solid var(--ys-gold);border-radius:2px;background:var(--ys-gold);color:#11110f;font-family:var(--ys-sans);font-size:13px;font-weight:700;line-height:1.5;text-align:center;text-decoration:none;transition:background-color .18s ease,color .18s ease}
.wp-block-button__link:hover,.ys-header-cta:hover,.ys-search button:hover,input[type="submit"]:hover{background:#e7ca8c;color:#111;border-color:#e7ca8c}
.is-style-outline>.wp-block-button__link{background:transparent;color:inherit;border:1px solid currentColor;padding:13px 23px}
.is-style-outline>.wp-block-button__link:hover{background:var(--ys-ink);color:var(--ys-cream);border-color:var(--ys-ink)}
.ys-header{background:#000;color:var(--ys-cream);border-bottom:1px solid #443a26;position:relative;z-index:30}
.ys-header-inner{width:min(1360px,calc(100% - 40px));margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.ys-brand{display:block;flex:0 0 102px}
.ys-brand img{width:102px;height:102px;object-fit:contain}
.ys-header-cta{gap:26px;flex-shrink:0}
.ys-menu-toggle{background:none;color:var(--ys-cream);border:1px solid #71634a;min-height:46px;padding:10px 14px;display:flex;gap:14px;align-items:center;font-size:14px;margin-left:auto}
.ys-menu-toggle[hidden]{display:none}
.ys-primary{width:100%;padding:0 0 20px}
.ys-menu{list-style:none;margin:0;padding:0}
.ys-primary .ys-menu{display:flex;gap:0;flex-wrap:wrap}
.ys-primary li{position:relative}
.ys-primary a{font-size:13px;text-decoration:none;display:block;padding:12px;white-space:nowrap}
.ys-primary a:hover,.ys-primary a[aria-current="page"],.ys-primary .current-menu-item>a{color:var(--ys-gold)}
.ys-primary .current-menu-item>a::after,.ys-primary a[aria-current="page"]::after{content:'';display:block;height:1px;background:var(--ys-gold);position:absolute;bottom:6px;left:12px;right:12px}
.ys-primary .sub-menu{list-style:none;padding:0 0 0 16px}
.ys-primary.is-enhanced:not(.is-open){display:none}
.ys-hero{background:var(--ys-ink);color:var(--ys-cream);padding:44px 0 36px;overflow:hidden}
.ys-hero h1{font-size:clamp(52px,6.2vw,88px);margin-bottom:26px;line-height:.99;letter-spacing:-.055em}
.ys-hero h1 em,.ys-dark h2 em,.ys-dark .ys-eyebrow,.ys-hero .ys-eyebrow{color:var(--ys-gold)}
.ys-hero .ys-eyebrow{font-size:10px}
.ys-hero-grid{display:grid;gap:36px;align-items:center}
.ys-hero-copy{position:relative;z-index:1}
.ys-hero .ys-lead{color:#d0ccc2;max-width:490px}
.ys-hero .is-style-outline>.wp-block-button__link:hover,.ys-dark .is-style-outline>.wp-block-button__link:hover{background:var(--ys-cream);color:var(--ys-ink);border-color:var(--ys-cream)}
.ys-hero-image img{width:100%;aspect-ratio:1.777;object-fit:contain}
.ys-hero-visual{border-bottom:1px solid #554a33;padding-bottom:14px}
.ys-image-note{color:#d5c8aa;font-family:var(--ys-serif);font-style:italic;font-size:18px;margin:14px 0 0}
.ys-split{display:grid;gap:44px;align-items:center}
.ys-intro-copy{max-width:570px}
.ys-intro-copy p:not(.ys-eyebrow){color:#514d44}
.ys-intro-copy p:nth-last-of-type(-n+3){display:inline;font-family:var(--ys-serif);font-size:22px;color:#1a1916}
.ys-intro-copy p:nth-last-of-type(-n+3)::after{content:' ';white-space:pre}
.ys-image-pair{position:relative;padding:0 32px 44px 0;max-width:570px}
.ys-intro-main{width:79%;margin-left:0!important}
.ys-intro-main img{aspect-ratio:4/5;object-fit:cover}
.ys-intro-small{width:47%;position:absolute;right:0;bottom:0;border:8px solid var(--ys-cream)}
.ys-intro-small img{aspect-ratio:4/5;object-fit:cover}
.ys-dark{background:var(--ys-ink);color:var(--ys-cream)}
.ys-dark a:hover{color:#efd899}
.ys-category-grid{display:grid;gap:32px 24px;margin-top:40px}
.ys-category-card{position:relative;border-bottom:1px solid #474236;padding-bottom:24px}
.ys-category-card figure{background:#000}
.ys-category-card img{width:100%;aspect-ratio:1;object-fit:contain;transition:opacity .2s}
.ys-category-card img:hover{opacity:.88}
.ys-card-number{font-size:11px;letter-spacing:.16em;color:var(--ys-gold);margin:18px 0 8px!important}
.ys-category-card h3{font-family:var(--ys-sans);font-size:17px;font-weight:600;letter-spacing:0;line-height:1.45;margin:0 0 12px}
.ys-category-card h3 a{text-decoration:none}
.ys-category-card h3 span{color:var(--ys-gold);padding-left:8px}
.ys-category-card p:not(.ys-card-number){font-size:14px;line-height:1.7;color:#c4c0b7;margin-bottom:0}
.ys-category-invitation{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;border:1px solid #665738;padding:32px;background:#1a1915}
.ys-category-invitation h3{font-size:35px;color:var(--ys-cream)}
.ys-category-invitation .wp-block-buttons{margin-top:12px}
.ys-age-grid{display:grid;gap:32px 24px;margin-top:38px}
.ys-age-card img{width:100%;aspect-ratio:4/5;object-fit:cover}
.ys-age-card h3{margin:22px 0 12px;font-size:30px}
.ys-age-card p{font-size:15px;color:var(--ys-muted);margin:0}
.ys-edition{background:#e9e1d1;border-block:1px solid #d6c9b2}
.ys-edition-preview{background:#000;color:#f6f2e9;text-align:center;width:min(380px,100%);justify-self:center;padding:26px 28px 32px;border:1px solid #9f8144;box-shadow:12px 16px 0 #d4c8b1}
.ys-edition-logo img{width:270px;margin:auto}
.ys-preview-title{font-family:var(--ys-serif);font-size:32px;line-height:1.2;margin:12px 0 24px}
.ys-preview-label{padding-top:18px;border-top:1px solid #5b4b2d;color:#e1c586;font-size:11px;letter-spacing:.05em;margin-bottom:0}
.ys-portrait img{width:100%;aspect-ratio:4/4.7;object-fit:cover}
.ys-voices-copy p:not(.ys-eyebrow){max-width:490px;color:var(--ys-muted)}
.ys-publisher{background:#eee8dc;border-block:1px solid #d9d1c1}
.ys-publisher .ys-split{align-items:start}
.ys-publisher-quote{font-family:var(--ys-serif);font-size:clamp(32px,3.2vw,44px);font-style:italic;line-height:1.2;color:var(--ys-deep-gold);margin:40px 0 0;max-width:470px}
.ys-publisher-letter{padding-top:4px;font-family:var(--ys-serif);font-size:20px;line-height:1.75}
.ys-publisher-letter p:last-child{font-family:var(--ys-sans);font-size:13px;line-height:1.7;letter-spacing:.025em;border-top:1px solid #bca679;padding-top:22px;margin-top:30px}
.ys-path-grid{display:grid;gap:40px 30px;margin-top:40px}
.ys-path-card img{width:100%;aspect-ratio:1.2;object-fit:cover;object-position:center 35%}
.ys-path-card h3{margin:26px 0 14px}
.ys-path-card p{font-size:16px;color:var(--ys-muted)}
.ys-path-card .wp-block-buttons{margin-top:22px}
.ys-advertise p:not(.ys-eyebrow){color:#c4c0b7;font-size:16px}
.ys-ad-image img{width:100%;aspect-ratio:1.2;object-fit:cover}
.ys-social-grid{display:grid;gap:16px;align-items:center}
.ys-social h2{font-size:clamp(34px,3.5vw,48px)}
.ys-social-links .wp-block-buttons{display:flex;flex-direction:column;align-items:stretch;margin-top:0}
.ys-social-links .wp-block-button__link{width:100%;justify-content:space-between;text-align:left;font-size:15px}
.ys-social-links{max-width:400px;width:100%}
.ys-imagery-disclosure{border-top:1px solid var(--ys-line);padding-top:24px;margin:40px 0 0;font-size:12px;color:var(--ys-muted)}
.ys-footer{background:#000;color:#cec9be;padding:38px 0 0;font-size:13px}
.ys-footer-grid{display:grid;gap:32px}
.ys-footer-brand img{width:150px;height:150px;margin:-18px 0 4px}
.ys-footer-brand p{margin-bottom:14px}
.ys-footer-tagline{font-family:var(--ys-serif);font-style:italic;font-size:16px;color:var(--ys-gold)}
.ys-footer h2{font-family:var(--ys-sans);font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ys-gold);margin:15px 0 18px;line-height:1.6}
.ys-footer a{display:inline-block;padding-block:6px;line-height:1.5;text-decoration:none;overflow-wrap:anywhere}
.ys-footer a:hover{color:var(--ys-gold);text-decoration:underline}
.ys-footer .ys-footer-brand a{padding:0}
.ys-footer li{margin:0}
.ys-social-list{list-style:none;margin:0;padding:0}
.ys-footer-bottom{border-top:1px solid #433a27;margin-top:40px;padding:22px 0;font-size:11px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
.ys-footer-bottom p{margin:0}
.ys-page-shell{padding-block:64px;min-height:60vh}
.ys-page-heading{border-bottom:1px solid var(--ys-line);padding-bottom:44px;margin-bottom:48px}
.ys-page-heading h1{font-size:clamp(40px,5.3vw,72px);max-width:1050px;margin:0}
.ys-prose{width:min(760px,calc(100% - 48px));margin-inline:auto;overflow-wrap:anywhere}
.ys-prose h2{font-size:34px;margin-top:44px}
.ys-prose h3{font-size:26px;margin-top:32px}
.ys-prose h4{margin-top:26px}
.ys-prose p,.ys-prose li{line-height:1.8}
.ys-prose li{margin-bottom:8px}
.ys-prose img{margin-block:32px;max-width:100%}
.ys-prose .ys-page-portrait img{max-height:560px;width:auto}
.ys-prose figcaption{font-size:13px;color:var(--ys-muted)}
.ys-prose .wp-block-buttons{margin:26px 0}
.ys-notice{padding:20px 24px;border-left:3px solid #987433;background:#ebe2cf;font-size:15px}
.ys-submission-category,.ys-submission-path{scroll-margin-top:30px;border-bottom:1px solid var(--ys-line);padding-bottom:12px}
.ys-index-heading{margin-bottom:48px}
.ys-post-grid{display:grid;gap:32px}
.ys-story-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.ys-story-card h2{font-size:30px;margin-top:24px}
.ys-search{margin-block:32px;max-width:540px}
.ys-search label{display:block;margin-bottom:8px}
.ys-search>div{display:flex;gap:8px}
.ys-search input{min-width:0;flex:1;width:100%}
input:not([type="submit"]):not([type="checkbox"]),textarea,select{border:1px solid #93866e;background:#fff;color:#111;padding:12px;border-radius:0;max-width:100%}
textarea{width:100%}
.comment-form label{display:block}
.comment-form-cookies-consent label{display:inline}
.post-navigation,.pagination{width:min(1280px,calc(100% - 48px));margin:48px auto}
.nav-links{display:flex;gap:24px;justify-content:space-between}
.alignwide{max-width:1280px}
.alignfull{width:100%}
.wp-caption,.wp-caption-text,.gallery-caption{max-width:100%;font-size:14px}
.sticky{border-top:3px solid var(--ys-gold);padding-top:20px}
.bypostauthor{border-left:2px solid var(--ys-gold);padding-left:20px}
@media(min-width:600px){
 .ys-category-grid,.ys-age-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ys-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
 .ys-post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:800px){
 .ys-section{padding-block:90px}
 .ys-hero{padding-block:60px 48px}
 .ys-hero-grid{grid-template-columns:.86fr 1.14fr;gap:38px}
 .ys-split{grid-template-columns:repeat(2,minmax(0,1fr));gap:70px}
 .ys-path-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .ys-path-card{display:flex;flex-direction:column;align-items:flex-start}
 .ys-path-card figure{width:100%}
 .ys-path-card .wp-block-buttons{margin-top:auto}
 .ys-social-grid{grid-template-columns:1.5fr 1fr;gap:60px}
 .ys-social-links{justify-self:end}
 .ys-intro .ys-split{grid-template-columns:1.05fr .95fr}
 .ys-voices .ys-split{grid-template-columns:.85fr 1fr}
 .ys-publisher .ys-split{gap:100px}
 .ys-footer-grid{grid-template-columns:1.1fr .65fr 1fr 1.1fr;gap:36px}
 .ys-footer{padding-top:64px}
}
@media(min-width:1000px){
 .ys-container{width:min(1280px,calc(100% - 96px))}
 .ys-category-grid,.ys-age-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .ys-post-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:1100px){
 .ys-menu-toggle{display:none}
 .ys-primary,.ys-primary.is-enhanced:not(.is-open){display:block;width:auto;padding:0}
 .ys-header-inner{flex-wrap:nowrap;gap:18px}
 .ys-primary a{padding:16px 10px;font-size:12px}
 .ys-primary .sub-menu{display:none;position:absolute;top:100%;left:0;min-width:190px;padding:8px;background:#111;border:1px solid #685a3d}
 .ys-primary li:hover>.sub-menu,.ys-primary li:focus-within>.sub-menu{display:block}
 .ys-primary .sub-menu a{white-space:normal}
}
@media(min-width:1300px){.ys-primary a{font-size:13px;padding-inline:13px}.ys-brand,.ys-brand img{width:116px;flex-basis:116px;height:116px}.ys-header-inner{gap:32px}}
@media(max-width:599px){
 .ys-header-inner{gap:12px;width:calc(100% - 32px)}
 .ys-brand{flex-basis:84px}.ys-brand img{width:84px;height:84px}
 .ys-header-cta{padding:10px 15px;font-size:12px;gap:12px;min-height:46px}
 .ys-primary .ys-menu{flex-direction:column}
 .ys-primary a{font-size:16px;padding:12px 8px}
 .ys-container,.ys-prose{width:calc(100% - 40px)}
 .ys-hero .wp-block-buttons{flex-direction:column;align-items:stretch}
 .ys-hero .wp-block-button__link{width:100%}
 .ys-category-card{display:grid;grid-template-columns:136px 1fr;column-gap:18px;align-content:start;padding-bottom:24px}
 .ys-category-card figure{grid-row:1/4;align-self:start}
 .ys-category-card .ys-card-number{margin-top:0!important}
 .ys-category-card h3{font-size:15px;margin-bottom:8px;line-height:1.4}
 .ys-category-card p:not(.ys-card-number){font-size:13px;line-height:1.65}
 .ys-category-grid{gap:24px}
 .ys-age-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 16px}
 .ys-age-card h3{font-size:24px}
 .ys-age-card p{font-size:14px}
 .ys-hero h1{font-size:clamp(48px,14vw,76px)}
 .ys-publisher-letter{font-size:19px}
 .ys-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 18px}
 .ys-footer-brand{grid-column:1/-1}
 .ys-footer-grid>div:last-child{grid-column:1/-1}
 .ys-social-list{display:flex;flex-wrap:wrap;gap:22px}
 .ys-page-shell{padding-top:42px}
}
@media(max-width:359px){.ys-category-card{grid-template-columns:112px 1fr;gap:12px}.ys-header-inner{gap:8px}.ys-menu-toggle{padding:9px;gap:8px}.ys-header-cta{padding:10px 12px;gap:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
@media print{.ys-header,.ys-footer,.ys-menu-toggle,.wp-block-buttons{display:none!important}body,.ys-dark,.ys-hero{background:white;color:black}.ys-section{padding-block:28px}.ys-section p{color:black!important}a{color:black}.ys-container,.ys-prose{width:100%}.ys-section{break-inside:avoid}img{max-height:400px;width:auto}}

/* Commerce follows the editorial palette and keyboard focus language. */
.ys-commerce{padding-bottom:64px;overflow-wrap:anywhere}
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button{background:var(--ys-ink);color:var(--ys-cream);border-radius:0;padding:14px 20px;min-height:44px}
.woocommerce a.button:hover,.woocommerce button.button:hover{background:var(--ys-deep-gold);color:#fff}
.woocommerce input.input-text,.woocommerce textarea,.woocommerce select{max-width:100%;padding:12px;border:1px solid var(--ys-muted);background:#fff;color:var(--ys-ink)}
.woocommerce a:focus-visible,.woocommerce button:focus-visible,.woocommerce input:focus-visible{outline:3px solid var(--ys-deep-gold);outline-offset:3px}