* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    /* Color scheme */

    --textcolor: #996666;
    --bgcolor: #0d0d0d;
    --highlight: #b15053;
    --3rdcolor: #d7797c;
}

@media (prefers-color-scheme: dark) {
    * {
        --textcolor: #996666;
        --bgcolor: #0d0d0d;
        --highlight: #b15053;
    }
}

body {
    font-size: 18px;
    font-family: arial, system-ui, sans-serif;
    letter-spacing: 3%;
    line-height: 1.5;
    color: var(--textcolor);
    background: var(--bgcolor);
    position: relative;
    max-width: 64em; /* remove this for a full-width layout */
    margin: 0 auto; /* centers the layout */
}

/* ------- Badge a la Dexter Sinister ------- */

#badge-container {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    margin: -100px 0 0 -100px;
    z-index: 1;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

#badge {
    position: absolute;
    vertical-align: top;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensures proper scaling */
}

/* Hide badge on specific pages */
#about:target ~ #badge-container,
#hakkinda:target ~ #badge-container,
main:has(#about:target) ~ #badge-container,
main:has(#hakkinda:target) ~ #badge-container,
body:has(#about:target) #badge-container,
body:has(#hakkinda:target) #badge-container {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Underline the active nav item — the link whose target section is currently shown.
   Uses :has() to climb from the targeted section back to its matching nav link.
   Language switcher (TR/EN) is intentionally excluded since it doesn't represent
   a section on the current page. */
body:has(#hakkinda:target) nav a[href="#hakkinda"],
body:has(#ajanda:target) nav a[href="#ajanda"],
body:has(#bulten:target) nav a[href="#bulten"],
body:has(#iletisim:target) nav a[href="#iletisim"],
body:has(#about:target) nav a[href="#about"],
body:has(#calendar:target) nav a[href="#calendar"],
body:has(#newsletter:target) nav a[href="#newsletter"],
body:has(#publications:target) nav a[href="#publications"],
body:has(#yayinlar:target) nav a[href="#yayinlar"],
body:has(#contact:target) nav a[href="#contact"] {
    border-bottom: 1px solid currentColor;
}

/* Fallback for browsers without :has() support */
@supports not selector(:has(*)) {
    /* Badge will remain visible in older browsers */
}

/*-- Badge over --*/



/* ------- Sections ------- */

section {
    /* Horizontal padding stops growing once viewport exceeds the body's
       64em max-width. Without the min() cap, 5vw on a wide monitor would
       eat into the (already-capped) body and squeeze inner content
       smaller as the window grows — the opposite of what we want.
       3.2em ≈ 5vw of a 64em body. */
    padding: calc(6em + 5vw) min(5vw, 3.2em) 8vw min(5vw, 3.2em);
    /* ! Everything below is needed ! */
    display: none;
    position: absolute;
    top: 0;
    min-height: 100vh;
    width: 100%;
    background: var(--bgcolor);
    z-index: 1; /* Below badge */
}

section:target {
    /* Show section */
    display: block;
}

section#home {
    /* Show #home by default */
    display: block;
}

/* ------- Header ------- */

header {
    /* Horizontal padding matches section's capped padding so the nav
       row aligns with the content edges (visible against contact hrs). */
    padding: 5vw min(5vw, 3.2em) 0 min(5vw, 3.2em);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;          /* nav text bottom aligns with logo bottom.
                                       baseline doesn't work because the logo is
                                       an <img>; image baseline = bottom edge,
                                       which is above the text's descender line. */
    position: absolute;
    width: 100%;
    z-index: 3; /* Above sections and badge */
}

header h1 {
    font-size: 1em;
    flex: 1; /* pushes nav to the right */
    white-space: nowrap;
    padding: 0 5vw 3px 0;           /* small bottom padding pushes nav text 3px
                                       lower (visual: text descenders sit a hair
                                       below logo bottom edge — designer's call) */
}

/* Logo image — desktop size. HTML hardcodes width="140"; override for a
   larger desktop logo. Mobile size is set inside the @media block. */
header h1 img {
    width: 180px;
    height: auto;
}

nav a:not(:last-of-type) {
    margin-right: 1.5vw;
}

/* Active nav underline lives further down with the rest of the current
   section IDs — see body:has(#hakkinda:target) etc. */

/* ------- General ------- */

a {
    text-decoration: none;
    color: var(--highlight);
}

a:hover {
    border-bottom: 1px solid;
}

section h1 {
    font-size: 1.6em;
    margin: 0 0 1em 0;
    color: var(--highlight);
}

i {
    color: var(--3rdcolor);
}

h2,
h3,
h4 {
    font-size: 1.2em;
    font-weight: 600;
    margin: 1.6em 0 0.6em 0;
}

h2 {
    font-size: 1.4em;
    color: #c9a6a6; /* Lighter version of text color instead of white */
}

h3 {
    color: var(--3rdcolor); /* Text color, bold weight */
    font-weight: 600;
}

.kunye {
    color: var(--highlight);
}

.sicrama {
    margin: 0 0 1em 0;
}

/* Event metadata styling */
.event-date,
.event-venue {
    font-size: 1em;
    font-weight: 400;
    margin: 0.3em 0;
    color: var(--highlight);
    opacity: 0.9;
}

/* Time elements in event metadata should look like regular h3 */
.event-date time {
    font-size: 1em;
    font-weight: 400;
    margin: 0;
    color: inherit;
    opacity: 1;
}

p,
ul,
ol,
article {
    max-width: 60ch; /* Limit line-length to 60 characters */
    margin-bottom: 1.5em;
}

ul {
    list-style-type: disc;
}

ul li::marker {
    content: "\2022   ";
}

li {
    margin-bottom: 0.2em;
}

ul,
ol {
    padding-left: 2ch;
}

b,
strong {
    font-weight: 600;
}

hr {
    height: 2px;
    border: 0;
    background: currentColor;
    opacity: 0.3;
    margin: 3em 0;
}

/* Contact / İletişim section: solid 1px hrs in full text color, tighter
   vertical spacing. Applies on all viewport widths.
   currentColor resolves on the hr's own computed color (UA grey default),
   not the section's text color — so use the explicit var. */
section#contact hr,
section#iletisim hr {
    height: 1px;
    background: var(--textcolor);
    opacity: 1;
    margin: 1em 0;
}

abbr {
    text-decoration: none;
}

abbr[title]:hover {
    opacity: 0.7;
    cursor: help;
}

blockquote {
    padding-left: 2ch;
    opacity: 0.7;
    margin-bottom: 0.6em;
    position: relative;
}

blockquote:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.3em;
    bottom: 0.3em;
    background: currentColor;
    width: 1px;
    opacity: 0.2;
}

img,
svg,
video,
audio {
    display: block;
    max-width: 100%;
    height: auto;
    fill: currentColor;
}

code,
textarea {
    font-family:
        ui-monospace,
        SF Mono,
        Menlo,
        Monaco,
        Andale Mono,
        monospace;
    font-size: 1em;
    opacity: 0.7;
}

a code {
    opacity: 1;
}

pre,
textarea {
    /* for code samples */
    font-size: 0.9em;
    color: inherit;
    line-height: inherit;
    padding: 0.6em 0.9em;
    margin: 0.8em 0 1em 0;
    position: relative;
    display: block;
    width: 100%;
    white-space: pre;
    border: 0;
    border-radius: 4px;
    background: rgba(255, 255, 100, 0.075);
    box-shadow:
        inset 1px 1px 0 rgba(0, 0, 0, 0.2),
        inset -1px -1px 0 rgba(0, 0, 0, 0.04);
}

/* Inline footnotes */

label {
    cursor: pointer;
    vertical-align: super;
    line-height: 1;
    font-size: 0.75em;
    padding-left: 0.1em;
}

label:hover {
    color: var(--highlight);
}

label + input,
label + input + small {
    display: none;
}

input:checked + small {
    display: inline;
}

/* ------- Form Elements (Updated) ------- */

input,
textarea,
input[type="submit"],
input[type="button"],
button {
    /* Use site colors */
    border-color: var(--textcolor);
    background-color: var(--bgcolor);
    color: var(--textcolor);

    /* Updated styling */
    font-size: 18px; /* Match paragraph text */
    font-family: arial, system-ui, sans-serif; /* Match body font */
    letter-spacing: 5%; /* Match body letter spacing */
    line-height: 1.5; /* Match body line height */
    border: 1px solid;
    padding: 7px 10px; /* Updated from 5px to 7px */

    /* Rounded corners - cross-browser compatible */
    border-radius: 7px;
    -webkit-border-radius: 7px; /* Safari/Chrome */
    -moz-border-radius: 7px; /* Firefox */

    /* Remove browser-specific styling */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Ensure box model consistency */
    box-sizing: border-box;
}

/* Focus state for better accessibility */
input:focus,
textarea:focus,
button:focus {
    outline: 1px solid var(--highlight);
    outline-offset: 1px;
}

/* Submit button hover state */
input[type="submit"]:hover,
button:hover {
    background-color: var(--highlight);
    color: var(--bgcolor);
    border-color: var(--highlight);
}

/* ------- Expandable Text (Pure CSS) ------- */

#admin a {
    text-decoration: underline;
}

.gorultu-expandable {
    display: inline;
}

.gorultu-expandable .expand-trigger {
    display: none;
}

.gorultu-expandable .expand-label {
    color: var(--textcolor);
    cursor: pointer;
    font-weight: 500;
    transition: color 0.2s ease;
    border: none; /* Override general link styles */

    /* Override general label styles */
    vertical-align: baseline !important; /* Not superscript */
    line-height: 1.5 !important; /* Match body line height */
    font-size: 1em !important; /* Match body font size */
    padding-left: 0 !important; /* Remove label padding */
}

.gorultu-expandable .expand-label:hover {
    color: var(--highlight);
    text-decoration: none;
    border-bottom: none !important; /* No underlines for expandable text */
}

.gorultu-expandable .expanded-text {
    display: none;
    color: var(--textcolor); /* Same as body text color */
    font-weight: normal;
}

.gorultu-expandable .expand-trigger:checked ~ .expanded-text {
    display: inline;
    animation: gorultu-fadeIn 0.3s ease-in;
}

.gorultu-expandable .expand-trigger:checked ~ .expand-label {
    text-decoration: none;
    opacity: 0.7;
    color: var(--highlight);
}

@keyframes gorultu-fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Optional: Add a subtle indicator when expanded */
.gorultu-expandable .expand-trigger:checked ~ .expand-label::after {
    content: " →";
    font-size: 0.8em;
    opacity: 0.6;
}

/* Ensure expandable labels don't get external link arrows */
.gorultu-expandable .expand-label:after {
    content: none !important;
}

/* Home page feature image — currently the publications cover, linked to
   the publications page. Dead-centered. Sized to fill the section content
   box width-wise (whose horizontal padding is already capped at
   min(5vw, 3.2em), so the image edges align with the nav row's outer
   edges) — but also capped by viewport height so on wide+short screens
   (ultrawides etc.) the whole book stays visible. The link is just the
   wrapper; the cap lives on the img. */
.home-feature {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    border: 0;
}
.home-feature:hover {
    border-bottom: none;
}
.home-feature img {
    max-width: 100%;
    max-height: calc(100vh - 12em);
    width: auto;
    height: auto;
}

/* Publications colophon: right-floated stack of portrait photos that
   sits beside the credits block (Görültü / Editör / Çevirmen / Yazarlar).
   Inserted right before the <hr> that opens the colophon — floats up
   alongside the credits, less than half the column width. */
.colophon-stack {
    float: right;
    width: 40%;
    padding: 0 0 10px 30px;
    margin: 0 0 1em 0;
}
.colophon-stack img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 1em;
}
.colophon-stack img:last-child {
    margin-bottom: 0;
}

/* Figures */

figure {
    margin: 0 0 1.5em 0;
}

/* When a figure contains a floated poster image, float the figure itself too.
   Otherwise the figure stays in normal flow as a 27px-tall empty box (just a <br>)
   and pushes the article's h1 below the poster top. Floating the figure removes
   it from flow so the h1 aligns with the section's padding edge — same line as
   the poster. */
figure:has(img.float) {
    float: right;
    width: 50%;
    padding: 0 0 10px 30px;
    margin: 0 0 1em 0;
}

figure:has(img.float) img.float {
    float: none;
    width: 100%;
    padding: 0;
}

figure figcaption {
    margin: 0.8em 0 0 0;
    font-size: 0.85em;
    opacity: 0.7;
}

figure a:after {
    content: none !important;
}

figure img.float {
    float: right;
    width: 50%;
    padding: 0 0 10px 30px;
}
/* Responsive video embeds */

figure.video {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
}

figure.video iframe,
figure.video object,
figure.video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    visibility: hidden; /* so loading="lazy" should work? */
}

section:target iframe {
    visibility: visible;
}

/* External links */

a[href*="//"]:after
{
    font-weight: 300;
    font-size: 0.85em;
    content: "\2197"; /* top right arrow: ↗ */
    color: var(--highlight);
    opacity: 0.75;
}

a[href*="//"]:hover:after
{
    color: var(--highlight);
    opacity: 1;
}

/* CTA link box — keep external-link arrow visible on red bg */
a.watkins-cta:after,
a.watkins-cta:hover:after
{
    color: white;
    opacity: 1;
}

a[href*="//"]:hover
{
    border-bottom: 1px solid; /* No underlines on external links - they have arrows */
}

/* File links */

a:before {
    font-size: 0.7em;
    margin-right: 0.4em;
}

/* Add more filetypes here if you want */

a[href$=".pdf"]:before {
    content: "PDF";
}
a[href$=".txt"]:before {
    content: "TXT";
}
a[href$=".mp3"]:before {
    content: "MP3";
}
a[href$=".zip"]:before {
    content: "ZIP";
}
a[href$=".rar"]:before {
    content: "RAR";
}
a[href$=".jpeg"]:before,
a[href$=".jpg"]:before,
a[href$=".gif"]:before,
a[href$=".png"]:before {
    content: "IMG";
}

/* ------- News ------- */

article + article {
    margin-top: 4.5em;
}

article h2 {
    font-weight: 700;
    margin: 0 0 1em 0;
}

article time {
    margin-left: 0.6em;
    font-size: 0.8em;
    font-weight: 400;
    opacity: 0.7;
}

/* ------- Images Grid ------- */

.grid {
    display: grid;
    column-gap: 1.5em;     /* fixed gap — vw-based gaps grew unpredictably on wide viewports
                              and pushed the column count down. 1.5em ≈ 27px at body's 18px base. */
    row-gap: 3em;          /* roughly 2x the column gap — more breathing between rows */
    /* Floor is min(46%, 150px). On narrow viewports 46% wins → 2 cols.
       On wide viewports 150px wins → as many cols as fit. The body is
       capped at 64em (~1152px); with section padding eating up to 5vw
       each side and a 27px column gap, 4 × 150 + 3 × 27 = 681px, which
       comfortably fits in any plausible grid container ≥ 700px. So:
         phone (<~650px viewport): 2 cols
         iPad portrait (768-1023px): 3 cols
         iPad landscape / desktop (>1024px): 4 cols
       1fr lets each column grow to fill leftover space. */
    grid-template-columns: repeat(
        auto-fit,
        minmax(min(46%, 150px), 1fr)
    );
    grid-auto-flow: dense;
    padding: 2em 0;
}

.grid a {
    position: relative;
    border: 0;
    /* No forced aspect ratio — all event thumbs are committed to a uniform
       portrait shape (see memory: gorultu_thumbnail_ratio.md), so the image's
       natural dimensions drive the cell height. */
}

.grid a:hover {
    transform: scale(0.975);
    border-bottom: none; /* No underlines on image grid items */
}

.grid a img {
    display: block;
    width: 100%;
    height: auto; /* never crop — image keeps its own aspect ratio */
}

/* ------- Slideshow ------- */

.slides {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}

.slides figure {
    height: 100vh;
    padding: 0 5vw;
    margin: 0;
    display: grid;
    place-items: center;
    align-content: center;
    scroll-snap-align: center;
}

.slides figure img {
    max-height: 88vh; /* Adjust if needed */
}

.slides figure.cover {
    padding: 0;
}

.slides figure.cover p.lefty {
    color: #b48989;
    padding: 0 50px 0 50px;
}

.slides figure.cover img {
    max-height: none;
    position: absolute;
    z-index: -1;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}

/* ------- Film Carousel (Pure CSS) ------- */

.film-carousel {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 1em 0;
    background: var(--bgcolor);
}

/* Hide radio buttons */
.film-carousel input[type="radio"] {
    display: none;
}

/* Container for images */
.film-carousel .carousel-images {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Individual carousel items */
.film-carousel .carousel-item {
    display: none;
    width: 100%;
}

.film-carousel .carousel-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* Show the selected image */
.film-carousel
    input[type="radio"]:nth-of-type(1):checked
    ~ .carousel-images
    .carousel-item:nth-child(1),
.film-carousel
    input[type="radio"]:nth-of-type(2):checked
    ~ .carousel-images
    .carousel-item:nth-child(2),
.film-carousel
    input[type="radio"]:nth-of-type(3):checked
    ~ .carousel-images
    .carousel-item:nth-child(3) {
    display: block;
}

/* Navigation dots */
.film-carousel .carousel-nav {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 2;
}

.film-carousel .carousel-nav label {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--textcolor);
    opacity: 0.4;
    cursor: pointer;
    transition: opacity 0.3s ease;

    /* Override general label styles */
    vertical-align: baseline !important;
    line-height: 1 !important;
    font-size: 0 !important;
    padding: 0 !important;
}

.film-carousel .carousel-nav label:hover {
    opacity: 0.7;
    color: inherit; /* Prevent color change on hover */
}

/* Active dot */
.film-carousel
    input[type="radio"]:nth-of-type(1):checked
    ~ .carousel-nav
    label:nth-of-type(1),
.film-carousel
    input[type="radio"]:nth-of-type(2):checked
    ~ .carousel-nav
    label:nth-of-type(2),
.film-carousel
    input[type="radio"]:nth-of-type(3):checked
    ~ .carousel-nav
    label:nth-of-type(3) {
    opacity: 1;
    background: var(--highlight);
}

/* Image counter */
.film-carousel .carousel-counter {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.7);
    color: var(--textcolor);
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 0.65em; /* Much smaller as requested */
    z-index: 2;
    opacity: 0.7;
}

/* Hide all counter spans by default */
.film-carousel .carousel-counter span {
    display: none;
}

/* Show the appropriate counter based on selected image */
.film-carousel
    input[type="radio"]:nth-of-type(1):checked
    ~ .carousel-counter
    .counter-1,
.film-carousel
    input[type="radio"]:nth-of-type(2):checked
    ~ .carousel-counter
    .counter-2,
.film-carousel
    input[type="radio"]:nth-of-type(3):checked
    ~ .carousel-counter
    .counter-3 {
    display: inline;
}

/* Ensure carousel images maintain aspect ratio */
.film-carousel .carousel-item a {
    display: block;
    border-bottom: none;
}

.film-carousel .carousel-item a:hover {
    border-bottom: none;
    transform: scale(1.02);
    transition: transform 0.3s ease;
}

/* ------- Enhanced Lightbox with Captions ------- */

.lightbox {
    display: none;
    color: var(--textcolor);
}

.lightbox:target {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--bgcolor);
    border: 0;
    z-index: 999; /* High z-index to be on top */
    padding: 3em 2em; /* Add padding to ensure content fits */
}

.lightbox img {
    max-width: 85vw;
    max-height: 75vh; /* Limit height to leave room for caption */
    width: auto;
    height: auto;
    object-fit: contain;
    z-index: 1000;
}

/* Caption styling */
.lightbox .lightbox-caption {
    display: none; /* Hidden by default */
    position: absolute;
    bottom: 2em;
    padding: 0 2vw;
    text-align: center;
    font-size: 0.9em;
    color: var(--textcolor);
    opacity: 0.8;
    max-width: 60ch;
    z-index: 1000;
}

/* Show caption when lightbox is active */
.lightbox:target .lightbox-caption {
    display: block;
    animation: gorultu-fadeIn 0.5s ease-in;
}

/* Navigation areas for lightbox */
.lightbox .nav-prev,
.lightbox .nav-next {
    position: absolute;
    top: 0;
    width: 40%;
    height: 100%;
    z-index: 1002;
    cursor: pointer;
    border: none;
}

.lightbox .nav-prev {
    left: 0;
}

.lightbox .nav-next {
    right: 0;
}

/* Remove underlines from navigation links */
.lightbox .nav-prev:hover,
.lightbox .nav-next:hover {
    border-bottom: none;
}

/* Navigation dots on hover */
.lightbox .nav-prev:hover::after,
.lightbox .nav-next:hover::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: var(--highlight);
    border-radius: 50%;
    opacity: 0.8;
    animation: pulse 1s infinite;
}

.lightbox .nav-prev:hover::after {
    left: 100px;
}

.lightbox .nav-next:hover::after {
    right: 100px;
}

@keyframes pulse {
    0%,
    100% {
        opacity: 0.8;
    }
    50% {
        opacity: 0.4;
    }
}

/* Loading indicator - red flickering dot */
.lightbox:target:before {
    content: "";
    height: 40px;
    width: 40px;
    background: var(--highlight);
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 998;
    animation: flicker 0.8s infinite;
    pointer-events: none;
}

@keyframes flicker {
    0%,
    100% {
        opacity: 0.2;
    }
    50% {
        opacity: 0.6;
    }
}

/* Close button */
.lightbox .close-x {
    position: fixed;
    font-size: 2.5em;
    font-weight: 200;
    line-height: 0;
    top: 0.75em;
    right: 0.5em;
    z-index: 1003;
    cursor: pointer;
    color: var(--textcolor);
    opacity: 0.7;
    text-decoration: none;
    border: none;
}

.lightbox .close-x:hover {
    opacity: 1;
    color: var(--highlight);
    border-bottom: none;
}

/* ------- Smaller screens ------- */

@media only screen and (max-width: 680px) {
    body {
        font-size: 16px;
    }

    /* Mobile header: logo on row 1, nav on row 2. Nav scales uniformly
       with viewport so the full set of nav items always fits, regardless
       of language (TR or EN — "Publications" is the longest word).
       Logo is large.
       Section padding-top is doubled so the content sits well below the nav. */
    header {
        flex-wrap: wrap;            /* logo on one row, nav drops to next */
    }

    header h1 {
        flex: 1 0 100%;             /* take full row so nav drops below */
        padding-right: 0;
    }

    /* Logo is an <img> inside <h1>. HTML hardcodes width="140" which is the
       desktop size — override it on mobile so the logo scales with the
       viewport. */
    header h1 img {
        width: 50vw;                /* ~half screen width */
        height: auto;
        max-width: 100%;
    }

    nav {
        white-space: nowrap;        /* never wrap between nav items */
        width: 100%;
        display: flex;
        justify-content: space-between;   /* first item flush-left, last flush-right,
                                             gaps between items distributed evenly */
        /* Derivation: on desktop, total nav-item text width is roughly
           412px at 18px font (measured) and gap:text ratio is ~0.32.
           To preserve that ratio on mobile with the nav using full width,
           font-size must be ~3vw — at viewport 430px that gives 12.9px,
           text totals ~295px, leaving ~95px for the 5 gaps between items.
           That matches the desktop rhythm scaled to the phone width. */
        font-size: 3vw;
    }

    /* Override the desktop right-margin between items — flexbox +
       space-between handles spacing on mobile. */
    nav a:not(:last-of-type) {
        margin-right: 0;
    }

    section {
        padding-top: calc(8em + 5vw);  /* desktop is 6em + 5vw; mobile gets a modest extra
                                          push (~2em) so content sits below the larger
                                          mobile header without huge dead space. */
    }

    /* Newsletter form on the Contact/İletişim section — on mobile the input
       wraps to its own line and the submit button needs a gap above it
       so they don't touch. */
    section#contact .embeddable-buttondown-form input[type="email"],
    section#iletisim .embeddable-buttondown-form input[type="email"] {
        display: block;
        width: 100% !important;     /* override inline width:350px */
        margin: 0 0 0.6em 0 !important;
    }

    /* Update form elements for smaller screens */
    input,
    textarea,
    input[type="submit"],
    input[type="button"],
    button {
        font-size: 16px; /* Prevent zoom on mobile */
    }

    /* Badge sized for mobile (locked) */
    #badge-container {
        width: 150px;
        height: 150px;
        margin: -75px 0 0 -75px;
    }

    /* Make the figure (which is floated right at 50% on desktop) span
       full width on mobile. The figure:has(img.float) rule above wraps
       the img, so we override both the figure's width and the img's
       padding here. */
    figure:has(img.float) {
        float: none;
        width: 100%;
        padding: 0;
        margin: 0 0 1.5em 0;
    }
    figure img.float {
        width: 100%;
        padding: 0;
    }

    /* Lightbox adjustments for mobile */
    .lightbox img {
        width: 95%; /* Use more space on mobile */
        max-width: 95vw;
    }

    .lightbox .lightbox-caption {
        font-size: 0.85em;
        padding: 0 3vw;
    }

    /* Film carousel adjustments for mobile */
    .film-carousel {
        width: 100%;
    }

    .film-carousel .carousel-counter {
        font-size: 0.75em;
        padding: 3px 8px;
        bottom: 10px;
        right: 10px;
    }

    .film-carousel .carousel-nav {
        bottom: 10px;
    }
}

/* ------- Print ------- */

@media print {
    nav,
    .lightbox:target:after {
        display: none;
    }

    article,
    figure,
    img {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    /* Inline footnotes */

    label + input + small {
        display: inline;
    }
    label + input + small:before {
        content: "[";
    }
    label + input + small:after {
        content: "]";
    }

    /* Slides */

    .slides,
    .slides figure {
        position: relative;
        height: auto;
        padding: 0;
    }

    .slides figure img,
    .slides figure.cover img {
        max-height: auto;
        position: relative;
        z-index: 1;
        width: auto;
        height: 100vh;
        object-fit: contain;
    }
}

/* ------- Poster Lightbox (no UI, click anywhere to close) ------- */

.poster-lightbox {
    display: none;
}

.poster-lightbox:target {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bgcolor);
    z-index: 1001;
}

.poster-lightbox img {
    max-width: 92vw;
    max-height: 92vh;
    width: auto;
    height: auto;
    object-fit: contain;
}

.poster-lightbox .close-all {
    position: absolute;
    inset: 0;
    cursor: zoom-out;
    z-index: 1002;
}

/* Kill the global a:hover underline under hero poster (inside <figure>) */
figure a,
figure a:hover {
    text-decoration: none;
    border-bottom: none;
}

/* Bülten subscribe block — floats right of the featured teaser, like an event poster.
   Mirrors figure img.float at 40%. On mobile it collapses to full width above content. */
.bulten-aside {
    float: right;
    width: 40%;
    margin: 0 0 1em 30px;
    padding: 1.2em;
    max-width: none;
    border: 1px solid currentColor;
}

.bulten-aside > :first-child {
    margin-top: 0;
}

/* The aside is floated, so it shouldn't trigger the article+article spacing
   on the following teaser article. Reset that. */
.bulten-aside + article {
    margin-top: 0;
}

.bulten-aside .bulten-intro {
    color: var(--3rdcolor);
    font-weight: 600;
}

.bulten-aside hr {
    background: var(--3rdcolor) !important;
    border: 0;
    height: 1px;
    margin: 1.5em 0;
    opacity: 1 !important;
    color: var(--3rdcolor);
}

/* Featured bulletin date — sits tight against the title below it.
   The <time> element inside gets the same paragraph-text treatment
   (article time defaults give it small size + indent + opacity, which
   we don't want here). */
.bulten-date {
    margin: 0 0 0.25em 0;
}

.bulten-date time {
    margin-left: 0;
    font-size: 1em;
    font-weight: 400;
    opacity: 1;
}

.bulten-date + h2 {
    margin-top: 0;
}

@media only screen and (max-width: 680px) {
    .bulten-aside {
        float: none;
        width: 100%;
        padding: 1.2em;
        margin: 0 0 1.5em 0;
    }
}

/* Buy box on publication pages — same bordered style as .bulten-aside but
   non-floated, sits inline in the article flow at 40% width so the cover
   on the right always has room. */
.buy-box {
    border: 1px solid currentColor;
    padding: 1.2em;
    margin: 0 0 1.5em 0;
    width: 85%;
}

.buy-box > :first-child {
    margin-top: 0;
}

.buy-box > :last-child {
    margin-bottom: 0;
}

.buy-box p {
    margin: 0;
}

.buy-box .buy-intro {
    color: var(--3rdcolor);
    font-weight: 600;
}

/* Override the global hr (opacity 0.1, 3em margins, 2px tall, currentColor
   inheriting from somewhere unexpected). Explicit color + !important to be sure. */
.buy-box hr {
    background: var(--3rdcolor) !important;
    border: 0;
    height: 1px;
    margin: 0.5em 0;
    opacity: 1 !important;
    color: var(--3rdcolor);
}

@media only screen and (max-width: 680px) {
    .buy-box {
        width: 100%;
    }
}

/* Publications page, mobile-only: reorder children so the cover image
   sits BETWEEN the title and the buy-box, not above the title.
   Full-width image is handled by the general figure:has(img.float)
   mobile rule above. Desktop layout untouched.
   Scoped to :target so we don't override the global section { display:none }
   that hides non-targeted sections. */
@media only screen and (max-width: 680px) {
    section#publications:target,
    section#yayinlar:target {
        display: flex;
        flex-direction: column;
    }
    section#publications:target > figure,
    section#yayinlar:target > figure {
        order: 2;
    }
    section#publications:target > article,
    section#yayinlar:target > article {
        order: 1;
        display: contents; /* let h1, buy-box, prose participate in section's flex order */
    }
    section#publications:target > article > h1,
    section#yayinlar:target > article > h1 {
        order: 1;
    }
    section#publications:target > article > .buy-box,
    section#yayinlar:target > article > .buy-box {
        order: 3;
    }
    section#publications:target > article > *:not(h1):not(.buy-box),
    section#yayinlar:target > article > *:not(h1):not(.buy-box) {
        order: 4;
    }
    /* Colophon image stack: on desktop floats right beside the credits;
       on mobile the float collapses and we push it past the colophon to
       the end of the article. Specificity bumped with :not(h1) so it
       beats the catch-all `*:not(h1):not(.buy-box)` above. */
    section#publications:target > article > .colophon-stack:not(h1),
    section#yayinlar:target > article > .colophon-stack:not(h1) {
        order: 5;
        float: none;
        width: 100%;
        padding: 0;
        margin: 1.5em 0 0 0;
    }
}

/* ------- İçindekiler / Contents table -------
   Two columns: author name (left), essay title (right). Borderless,
   with a thin row rule matching the site's hr treatment. */
.contents-table {
    width: 100%;
    border-collapse: collapse;
}

.contents-table td {
    padding: 0.6em 0;
    vertical-align: top;
    border-bottom: 1px solid var(--textcolor);
}

.contents-table tr:last-child td {
    border-bottom: 0;
}

.contents-table td:first-child {
    width: 30%;
    padding-right: 1.5em;
}