/* layout.css - Newspaper Typography & Smart Layouts */ /* ... [KEEP CONTENT HOLE, SLIDER, TYPOGRAPHY SECTIONS AS IS] ... */ .content-hole { flex-grow: 1; min-height: 0; background-color: var(--paper-bg); background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilterContent'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilterContent)' opacity='0.045'/%3E%3C/svg%3E"); box-shadow: inset 1px 1px 2px rgba(0,0,0,0.05), inset -1px -1px 2px rgba(255,255,255,0.4); border-radius: 12px; margin-top: 1.5rem; z-index: 101; overflow: hidden; position: relative; font-family: var(--font-body); } .content-slider { display: flex; height: 100%; transition: transform var(--content-slide-speed) ease-in-out; } .page-content { height: 100%; width: 100%; flex-shrink: 0; overflow-y: auto; padding: var(--content-hole-padding); box-sizing: border-box; } /* Typography */ .page-content > h1 { font-family: var(--font-headline); font-size: 1.8rem; font-weight: 600; letter-spacing: .02em; margin-bottom: 1.2rem; color: var(--text-color); } .page-content p, .page-content li { font-family: var(--font-body); font-size: 0.95rem; line-height: 1.55; margin-bottom: 1.1rem; color: var(--text-color-secondary); text-align: justify; hyphens: auto; overflow-wrap: break-word; max-width: 68ch; } .newspaper-content > p:last-child::after { content: " ■"; font-size: 0.8em; margin-left: 0.5em; opacity: 0.7; vertical-align: 1px; } .page-content a { color: var(--text-color); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s ease; } .page-content a:hover { opacity: 0.8; border-bottom: 1px solid var(--text-color); } /* --- Smart Hero Layout --- */ .page-wrap { max-width: 60rem; margin: .75rem auto; padding: 1rem; } .mhe-hero { display: grid; gap: 2rem; align-items: start; grid-template-columns: 1.2fr 0.8fr; grid-template-areas: "title title" "text photo"; } .mhe-hero.hero-left { grid-template-columns: 0.8fr 1.2fr; grid-template-areas: "title title" "photo text"; } .mhe-hero > h1 { grid-area: title; text-align: center; margin-bottom: 0.75rem; } .hero-text { grid-area: text; position: relative; } .hero-figure { grid-area: photo; margin: 0; } .mhe-hero:not(.hero-left) .hero-text::after { content: ""; position: absolute; top: 0; right: -1rem; bottom: 0; width: 1px; background: #d7cfc0; } .mhe-hero.hero-left .hero-text::after { content: ""; position: absolute; top: 0; left: -1rem; bottom: 0; width: 1px; background: #d7cfc0; } /* Images */ .hero-figure img { width: 100%; height: auto; display: block; border: 1px solid #e2dbcf; border-radius: 6px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); transition: width 0.3s ease; } .hero-figure figcaption { margin-top: 0.6rem; font-family: var(--font-sans); font-size: 0.85rem; color: #666; text-align: center; font-style: italic; } .page-icon { float: left; width: clamp(180px, 36%, 280px); height: auto; margin: .2rem 1rem .8rem 0; border-radius: 6px; border: 1px solid #e2dbcf; shape-outside: margin-box; } .newspaper-content { column-count: 2; column-gap: 2.25rem; column-rule: 1px solid #d7cfc0; text-align: justify; hyphens: auto; } .newspaper-content > p:first-of-type::first-letter, .lede { float: left; font-family: var(--font-headline); font-size: 3.4rem; line-height: .92; font-weight: 600; padding: .12rem .35rem 0 .08rem; margin-right: .15rem; } .contact-box { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .5rem .75rem; padding: .5rem .75rem; margin: .75rem 0 0; border-top: 1px solid #e8e0d3; border-bottom: 1px solid #e8e0d3; } .contact-heading { font-weight: 600; font-variant: small-caps; } .contact-links { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; } .contact-links a:not(:last-child)::after { content: "·"; margin-left: .75rem; } /* ======================================================================= RESPONSIVE BREAKPOINTS (Updated) Desktop: > 1250px Tablet: 650px - 1250px Mobile: < 650px ======================================================================= */ /* --- TABLET (Wrap Mode) --- */ /* Increased max-width to 1250px to catch iPad Pro Landscape */ @media (max-width: 1250px) { .mhe-hero, .mhe-hero.hero-left { display: block; } .mhe-hero .hero-text::after { display: none; } /* Tablet Wrap Style: Float Image */ .hero-figure { float: right; width: clamp(240px, 45%, 340px); /* Slightly larger max size for tablet */ margin-left: 1.5rem; margin-bottom: 1rem; clear: right; } .mhe-hero.hero-left .hero-figure { float: left; margin-right: 1.5rem; margin-left: 0; } .contact-box { grid-template-columns: 1fr; } } /* --- MOBILE (Stack Mode) --- */ @media (max-width: 650px) { :root { --nav-font-size: 0.55rem; --slot-size: 0.7rem; --nav-assembly-height: 40px; --content-hole-padding: 1rem; --nav-width: 95%; } .newspaper-content { column-count: 1; } .newspaper-content > p:first-of-type::first-letter, .lede { float: none; font-size: 2.2rem; padding: 0; margin: 0 .2rem 0 0; } /* Mobile Image Fix: Constrained width, Centered */ .hero-figure { float: none !important; width: 85%; /* Don't take full width */ max-width: 380px; /* Don't get huge on phablets */ margin: 1.5rem auto; /* Center it */ display: block; } .page-icon { float: none; display: block; margin: 0 auto; width: 160px; } /* Reset text align for readability on small screens */ /* .page-content p, .page-content li { text-align: left; } */ } /* =============================== Fixed Status Footer =============================== */ .site-footer { height: 1.5pt; font-size: 8px; padding-top: 1pt; font-family: var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(0, 0, 0, 0.45); /* engraved effect */ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6), 0 -1px 0 rgba(0, 0, 0, 0.15); opacity: 0.75; }