.admin-page, .article-page { min-height: 100vh; background: #f5f6f7; color: var(--ink); }
.admin-header, .article-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 5%; background: white; border-top: 5px solid var(--gold); border-bottom: 1px solid var(--line); }
.admin-brand, .article-brand { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; line-height: 1.1; font-weight: 700; }
.admin-brand img, .article-brand img { width: 52px; height: 52px; object-fit: contain; }
.admin-brand strong { display: block; color: var(--red); font: 700 21px/1.1 var(--serif); }
.admin-back, .article-header > a:last-child { border-bottom: 1px solid currentColor; font-size: 14px; font-weight: 800; }
.admin-header-actions { display: flex; align-items: center; gap: 25px; }
.admin-logout { min-height: 42px; padding: 9px 14px; border: 1px solid var(--ink); background: white; color: var(--ink); font-size: 14px; font-weight: 800; cursor: pointer; transition: color .2s, background .2s; }
.admin-logout:hover { background: var(--ink); color: white; }
.admin-shell { width: min(1300px, calc(100% - 80px)); margin: auto; padding: 72px 0 110px; }
.admin-intro { display: flex; justify-content: space-between; align-items: end; gap: 30px; padding-bottom: 48px; }
.admin-intro h1 { max-width: 850px; margin: 0 0 16px; font-size: clamp(46px, 6vw, 82px); }
.admin-intro h1 em { color: var(--red); font-weight: 400; }
.admin-intro p:last-child { max-width: 570px; margin: 0; color: var(--muted); font-size: 17px; }
.admin-count { display: flex; flex-direction: column; flex: none; min-width: 200px; padding: 22px 25px; background: var(--ink); color: white; }
.admin-count strong { color: var(--gold); font: 700 66px/.9 var(--serif); }
.admin-count span { margin-top: 12px; font-size: 14px; }
.admin-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(350px, .85fr); align-items: start; gap: 24px; }
.admin-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 26px; border-bottom: 1px solid var(--line); }
.admin-tabs button { position: relative; min-height: 56px; padding: 12px 20px; border: 0; background: transparent; color: var(--muted); font-size: 15px; font-weight: 800; cursor: pointer; }
.admin-tabs button::after { content: ''; position: absolute; right: 0; bottom: -1px; left: 0; height: 3px; background: var(--red); transform: scaleX(0); transition: transform .3s ease; }
.admin-tabs button:hover, .admin-tabs button.is-active { color: var(--ink); }
.admin-tabs button.is-active::after { transform: scaleX(1); }
.admin-content-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(350px, .85fr); align-items: start; gap: 24px; }
.admin-hero-editor { max-width: 920px; }
.admin-editor-note { max-width: 670px; margin-bottom: 28px; color: var(--muted); font-size: 16px; }
.admin-cover-preview { overflow: hidden; background: var(--night); }
.admin-cover-preview img { width: 100%; max-height: 360px; aspect-ratio: 16 / 9; object-fit: cover; }
.admin-project-photos { display: grid; gap: 14px; padding: 19px; background: #f3f5f8; }
.admin-project-photos > strong { font: 700 24px/1.15 var(--serif); }
.admin-project-photos > p { margin: 0; color: var(--muted); font-size: 14px; }
.admin-project-photo { display: flex; align-items: center; gap: 12px; padding: 9px; background: white; font-size: 14px; }
.admin-project-photo img { width: 92px; height: 70px; object-fit: cover; }
.admin-project-photo span { flex: 1; min-width: 0; }
.admin-project-photo button { border: 0; background: transparent; color: var(--red); font-weight: 800; cursor: pointer; }
.admin-add-photo, .admin-new-item { justify-self: start; min-height: 43px; padding: 9px 14px; border: 1px solid var(--ink); background: var(--ink); color: white; font-size: 14px; font-weight: 800; cursor: pointer; }
.admin-add-photo:disabled { opacity: .5; cursor: wait; }
.admin-new-item { margin-bottom: 23px; }
.admin-content-item > img { width: 100%; height: 175px; margin-bottom: 15px; object-fit: cover; }
.admin-content-item .admin-item-top > span:last-child { padding: 0; background: none; color: var(--muted); font-weight: 400; text-align: right; }
.admin-content-loading { padding: 30px; background: white; color: var(--muted); }
.admin-content-loading button { margin-left: 15px; border: 0; background: var(--gold); padding: 8px 14px; font-weight: 800; cursor: pointer; }
.admin-inline-feedback { margin: 20px 0 0; padding: 12px 15px; background: #e7f3e8; color: #215d35; font-weight: 800; }
.admin-inline-feedback.is-error { background: #fff2f3; color: #9c1734; }
.admin-editor, .admin-list { min-width: 0; background: white; padding: clamp(24px, 3vw, 43px); box-shadow: 0 12px 28px #0d1c390c; }
.admin-section-heading { margin-bottom: 27px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.admin-section-heading > span { color: var(--red); font-size: 13px; font-weight: 800; }
.admin-section-heading h2 { margin: 5px 0 0; font-size: clamp(33px, 3vw, 45px); }
.admin-editor form { display: grid; gap: 20px; }
.admin-editor label { display: grid; gap: 7px; font-size: 14px; font-weight: 800; }
.admin-editor input:not([type=file]), .admin-editor textarea { width: 100%; border: 1px solid #bfc8d4; border-radius: 0; padding: 13px 15px; background: #f9fafb; color: var(--ink); font: 400 16px/1.5 var(--sans); outline-offset: 2px; }
.admin-editor textarea { resize: vertical; }
.admin-editor input:focus, .admin-editor textarea:focus { border-color: var(--red); background: white; }
.admin-file span { color: var(--muted); font-size: 13px; font-weight: 400; }
.admin-file input { width: 100%; padding: 13px 0; font-size: 14px; }
.admin-image-preview { display: flex; align-items: center; gap: 15px; padding: 12px; background: var(--cream); font-size: 14px; }
.admin-image-preview img { width: 110px; height: 85px; object-fit: cover; }
.admin-image-preview button, .admin-cancel { margin-left: auto; border: 0; background: none; color: var(--red); font-weight: 800; cursor: pointer; }
.admin-form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.admin-form-actions button:not(.admin-cancel) { min-height: 49px; border: 1px solid var(--ink); padding: 12px 16px; background: white; color: var(--ink); font-size: 14px; font-weight: 800; cursor: pointer; }
.admin-form-actions .admin-publish { background: var(--gold) !important; }
.admin-form-actions button:disabled, .admin-item button:disabled { opacity: .55; cursor: wait; }
.admin-empty { padding: 24px; background: var(--cream); }
.admin-empty strong { font: 700 25px/1.2 var(--serif); }
.admin-empty p { margin: 10px 0 0; color: var(--muted); font-size: 15px; }
.admin-items { display: grid; gap: 0; }
.admin-item { padding: 24px 0; border-bottom: 1px solid var(--line); }
.admin-item:first-child { padding-top: 0; }
.admin-item-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; }
.admin-item-top span { padding: 4px 8px; background: #e7ebf1; color: var(--muted); font-weight: 800; }
.admin-item-top span.is-published { background: #e7f3e8; color: #215d35; }
.admin-item-top time { color: var(--muted); }
.admin-item h3 { margin: 15px 0 7px; font-size: 26px; }
.admin-item p { color: var(--muted); font-size: 14px; }
.admin-item-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.admin-item-actions button, .admin-item-actions a { padding: 5px 0; border: 0; border-bottom: 1px solid currentColor; background: none; color: var(--ink); font-size: 14px; font-weight: 800; cursor: pointer; }
.admin-item-actions .admin-publish-draft { padding: 9px 13px; border: 1px solid var(--ink); background: var(--gold); color: var(--ink); }
.admin-item-actions .admin-publish-draft:hover { background: #f1d979; }
.admin-item-actions .admin-delete { margin-left: auto; padding: 9px 13px; border: 1px solid #cf7890; color: #9c1734; transition: background .2s, color .2s; }
.admin-item-actions .admin-delete { background: #fff2f3; }
.admin-item-actions .admin-delete:hover, .admin-editor-delete .admin-delete:hover { background: #9c1734; color: white; }
.admin-editor-delete { border-top: 1px solid var(--line); padding-top: 20px; }
.admin-editor-delete > .admin-delete { min-height: 44px; padding: 9px 14px; border: 1px solid #cf7890; background: #fff2f3; color: #9c1734; font-size: 14px; font-weight: 800; cursor: pointer; }
.admin-editor-delete > .admin-delete:disabled { opacity: .55; cursor: wait; }
.admin-list-jump { display: none; margin: -12px 0 24px; padding: 12px 14px; border: 1px solid #cf7890; background: #fff2f3; color: #9c1734; font-size: 14px; font-weight: 800; }
.admin-delete-confirm { margin-top: 17px; padding: 17px; border-left: 4px solid var(--red); background: #fff2f3; }
.admin-delete-confirm strong { font-size: 16px; }
.admin-delete-confirm p { margin: 5px 0 14px; color: #64323d; font-size: 14px; }
.admin-delete-confirm > div { display: flex; flex-wrap: wrap; gap: 9px; }
.admin-delete-confirm button { min-height: 42px; padding: 8px 13px; border: 1px solid var(--ink); background: white; color: var(--ink); font-size: 14px; font-weight: 800; cursor: pointer; }
.admin-delete-confirm .admin-delete-final { border-color: #9c1734; background: #9c1734; color: white; }
.admin-delete-confirm button:disabled { opacity: .5; cursor: wait; }
.admin-toast { position: fixed; z-index: 100; right: 24px; bottom: 24px; max-width: min(450px, calc(100% - 48px)); padding: 14px 20px; background: #235b39; color: white; box-shadow: 0 10px 35px #0003; font-weight: 700; }
.admin-toast.is-error { background: #a32e43; }
.admin-access { display: grid; place-content: center; min-height: 100vh; padding: 30px; text-align: center; }
.admin-access h1 { font-size: 50px; }
.admin-access a { color: var(--red); font-weight: 800; text-decoration: underline; }
.admin-login { display: grid; grid-template-columns: minmax(350px, .86fr) minmax(480px, 1.14fr); min-height: 100svh; background: white; }
.admin-login-panel { display: flex; flex-direction: column; justify-content: space-between; min-height: 100svh; padding: clamp(34px, 5vw, 75px); background: radial-gradient(circle at 95% 10%, #263d65 0, transparent 50%), var(--night); color: white; }
.admin-login-brand { display: inline-flex; align-items: center; align-self: flex-start; gap: 13px; font-size: 13px; line-height: 1.08; letter-spacing: .07em; text-transform: uppercase; }
.admin-login-brand img { width: 62px; height: 62px; object-fit: contain; }
.admin-login-brand strong { display: block; margin-top: 4px; color: var(--gold); font-size: 19px; letter-spacing: -.035em; text-transform: none; }
.admin-login-story { max-width: 580px; padding-top: 100px; }
.admin-login-story p { margin-bottom: 25px; color: var(--gold); font-size: 14px; font-weight: 800; }
.admin-login-story h1 { margin-bottom: 85px; font-size: clamp(43px, 5vw, 74px); line-height: 1.07; }
.admin-login-story span { border-top: 1px solid #8190ab; padding-top: 20px; color: #c2cbd9; font-size: 14px; }
.admin-login-form-wrap { display: flex; flex-direction: column; align-items: flex-end; padding: clamp(30px, 4vw, 65px); }
.admin-login-back { border-bottom: 1px solid currentColor; padding-bottom: 4px; font-size: 14px; font-weight: 800; }
.admin-login-form { display: grid; align-content: center; width: min(100%, 560px); min-height: 80vh; margin: auto; }
.admin-login-form .eyebrow { margin-bottom: 15px; }
.admin-login-form h2 { margin: 0 0 17px; font-size: clamp(42px, 4vw, 65px); }
.admin-login-form > p:not(.eyebrow):not(.admin-login-error) { max-width: 450px; margin-bottom: 39px; color: var(--muted); font-size: 17px; }
.admin-login-form label { margin-bottom: 8px; font-size: 14px; font-weight: 800; }
.admin-login-form input { width: 100%; min-height: 55px; padding: 12px 16px; border: 1px solid #aeb8c8; background: #f8f9fb; color: var(--ink); font: inherit; }
.admin-login-form input:focus { border-color: var(--ink); outline: 2px solid var(--gold); outline-offset: 2px; }
.admin-login-form .admin-login-error { margin: 10px 0 0; color: #9c1734; font-size: 14px; font-weight: 800; }
.admin-login-form button { width: 100%; min-height: 56px; margin-top: 20px; border: 0; background: var(--gold); color: var(--night); font-size: 15px; font-weight: 800; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.admin-login-form button:hover { transform: translateY(-2px); box-shadow: 0 9px 20px #0d1c3926; }
.admin-login-form button:disabled { opacity: .65; cursor: wait; }
.article-page { background: white; }
.article-header { width: 100%; }
.article-intro { max-width: 1000px; padding-top: clamp(80px, 10vw, 135px); padding-bottom: 55px; }
.article-intro time { display: block; margin-bottom: 20px; color: var(--red); font-size: 14px; font-weight: 800; }
.article-intro h1 { max-width: 960px; margin: 0 0 35px; font-size: clamp(53px, 7vw, 105px); }
.article-intro > p:last-child { max-width: 750px; margin: 0; color: var(--muted); font: 400 clamp(23px, 2.5vw, 32px)/1.35 var(--serif); }
.article-image { width: min(1200px, calc(100% - 60px)); margin: 0 auto 75px; }
.article-image img { width: 100%; max-height: 720px; object-fit: cover; }
.article-body { width: min(760px, calc(100% - 48px)); margin: 0 auto 80px; }
.article-body p { margin: 0 0 30px; font-size: 19px; line-height: 1.8; white-space: pre-line; }
.article-end { border-top: 1px solid var(--line); padding: 35px 0 100px; }
@media (max-width: 950px) { .admin-layout, .admin-content-layout { grid-template-columns: 1fr; } .admin-intro { align-items: start; } .admin-list-jump { display: inline-block; } }
@media (max-width: 900px) { .admin-login { grid-template-columns: 1fr; } .admin-login-panel { min-height: 270px; padding: 27px; } .admin-login-story { padding-top: 26px; } .admin-login-story h1 { max-width: 620px; margin-bottom: 10px; font-size: clamp(34px, 6vw, 49px); } .admin-login-story span { display: none; } .admin-login-form-wrap { min-height: 580px; padding: 27px; } .admin-login-form { min-height: 500px; } }
@media (max-width: 650px) { .admin-shell { width: calc(100% - 34px); padding-top: 55px; } .admin-intro { display: block; } .admin-count { display: inline-flex; margin-top: 26px; } .admin-tabs { display: grid; grid-template-columns: repeat(2, 1fr); } .admin-tabs button { min-height: 48px; padding: 10px 5px; font-size: 13px; } .admin-header, .article-header { padding-inline: 17px; } .admin-header-actions { gap: 12px; } .admin-brand strong { font-size: 17px; } .admin-back { display: none; } .admin-logout { padding: 8px; font-size: 12px; } .admin-editor, .admin-list { padding: 24px 20px; } .admin-project-photo { flex-wrap: wrap; } .admin-item-actions .admin-delete { margin-left: 0; } .admin-login-panel { min-height: 245px; } .admin-login-brand img { width: 49px; height: 49px; } .admin-login-story h1 { font-size: 34px; } .admin-login-form-wrap { min-height: 550px; } .article-intro { padding-top: 70px; } .article-image { width: 100%; } .article-body p { font-size: 17px; } }