@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&display=swap');
:root{--ink:#172b43;--muted:#5f7083;--paper:#f5f8fc;--green:#245f9a;--lime:#c8dcf2;--line:#d5e0eb}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}.wrap{width:min(1180px,calc(100% - 64px));margin:auto}.site-header{border-bottom:1px solid var(--line)}.header-inner{min-height:92px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{font-weight:700;letter-spacing:.14em;font-size:13px}.brand span{display:block;font-size:9px;letter-spacing:.36em;margin-top:4px;color:var(--green)}nav{display:flex;gap:30px;flex-wrap:wrap}nav a,.footer{font-size:13px;font-weight:600}.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:center;padding:100px 0 110px}.eyebrow{color:var(--green);font-size:10px;letter-spacing:.18em;font-weight:700;text-transform:uppercase}.hero h1,.article h1,.form-shell h1,.admin-heading h1{font-family:'Playfair Display',serif;font-weight:500;letter-spacing:-.045em;font-size:clamp(58px,7.5vw,104px);line-height:1.05;margin:22px 0}.hero h1 em{color:var(--green);font-weight:500}.intro{font-size:18px;line-height:1.7;max-width:440px;color:var(--muted);margin:0 0 32px}.text-link{font-size:13px;font-weight:700;border-bottom:1px solid var(--green);padding-bottom:7px}.text-link span{margin-left:16px}.hero-art{height:390px;background:#d9e9f8;border-radius:49% 49% 3px 3px;position:relative;display:grid;place-items:center;overflow:hidden}.hero-art:before,.hero-art:after{content:'';position:absolute;border:1px solid #a9c5df;border-radius:50%;width:310px;height:310px}.hero-art:after{width:240px;height:240px}.hero-art span{font-size:180px;line-height:1;color:var(--green);font-weight:400}.hero-art small{position:absolute;bottom:24px;right:25px;font-size:9px;letter-spacing:.14em;line-height:1.6}.journal{border-top:1px solid var(--line);padding:75px 0 100px}.section-title{display:flex;justify-content:space-between;align-items:end;margin-bottom:40px}.section-title h2{font:500 48px 'Playfair Display',serif;letter-spacing:-.04em;margin:10px 0}.section-title h2 span{color:var(--green)}.section-note{font-size:10px;letter-spacing:.12em;color:var(--muted)}.post-row{border-top:1px solid var(--line);display:grid;grid-template-columns:80px 1fr 50px;gap:20px;padding:35px 0}.post-number{font:italic 20px 'Playfair Display',serif;color:#9aafc4}.post-row h3{font:500 29px 'Playfair Display',serif;margin:10px 0}.post-row p:not(.eyebrow),.empty p{color:var(--muted);line-height:1.7}.arrow{font-size:26px;color:var(--green)}.empty{padding:60px 0;border-top:1px solid var(--line)}.empty h2,.empty h3{font:500 29px 'Playfair Display',serif}.footer{border-top:1px solid var(--line);padding:28px 0 40px;display:flex;justify-content:space-between;color:var(--muted)}.article{max-width:800px;margin:100px auto 140px}.article .eyebrow{margin-top:55px}.article h1{font-size:clamp(46px,6vw,76px)}.article-body{font-size:18px;line-height:1.85;margin-top:50px;color:#344a60}.form-shell{max-width:460px;margin:90px auto 130px}.form-shell h1,.admin-heading h1{font-size:58px}.muted{color:var(--muted)}label{display:block;font-weight:700;font-size:13px;margin:22px 0}label small{display:block;font-weight:400;color:var(--muted);margin-top:5px}input,textarea,select{display:block;width:100%;border:1px solid #c5d3e1;background:#fff;padding:14px;margin-top:9px;color:var(--ink);border-radius:2px}textarea{resize:vertical;line-height:1.6}button,.button{display:inline-block;border:0;background:var(--green);color:white;padding:15px 22px;font-weight:700;font-size:13px;cursor:pointer}.admin-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:70px 0 50px}.admin-heading h1{margin:12px 0}.content-row{border-top:1px solid var(--line);padding:25px 0;display:flex;justify-content:space-between;gap:20px}.content-row h2{font:500 24px 'Playfair Display',serif;margin:8px 0}.content-row small,.tag{color:var(--muted);font-size:11px}.tag{text-transform:uppercase;letter-spacing:.1em}.row-actions{display:flex;gap:20px;align-items:center;font-size:13px}.link-button{background:none;color:var(--green);padding:0}.logout{margin:45px 0 90px}.editor{max-width:800px;margin-bottom:100px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.error{background:#f9e4df;color:#873b2e;padding:14px}@media(max-width:700px){.wrap{width:calc(100% - 40px)}.header-inner{padding:20px 0;align-items:flex-start;flex-direction:column}.hero{grid-template-columns:1fr;gap:40px;padding:65px 0}.hero-art{height:300px}.section-note{display:none}.post-row{grid-template-columns:35px 1fr 25px;gap:10px}.form-grid{grid-template-columns:1fr}.admin-heading{align-items:flex-start;flex-direction:column}}

/* Touch-friendly layouts for phones and small tablets. */
input, textarea, select { font-size: 16px; }
input, select, button, .button { min-height: 44px; }
:focus-visible { outline: 3px solid #6ba8df; outline-offset: 3px; }
.article-body a { color: var(--green); text-decoration: underline; overflow-wrap: anywhere; }
.article h1, .post-row h3, .content-row h2, .content-row small { overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .header-inner { gap: 12px; }
  nav { width: 100%; gap: 0 20px; }
  nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .hero h1 { font-size: clamp(48px, 12vw, 70px); }
  .hero-art { max-width: 100%; }
  .journal { padding: 50px 0 70px; }
  .section-title h2 { font-size: clamp(36px, 9vw, 48px); }
  .post-row > div { min-width: 0; }
  .post-row h3 { font-size: 25px; }
  .arrow { min-height: 44px; }
  .article { margin: 60px auto 80px; }
  .article h1 { font-size: clamp(40px, 10vw, 60px); }
  .article-body { font-size: 17px; margin-top: 35px; }
  .form-shell { margin: 55px auto 80px; }
  .form-shell h1, .admin-heading h1 { font-size: clamp(42px, 10vw, 58px); }
  .admin-heading { margin: 50px 0 30px; }
  .admin-heading .button { width: 100%; text-align: center; }
  .content-row { flex-direction: column; gap: 12px; }
  .row-actions { gap: 24px; }
  .row-actions a, .row-actions button, .logout button { display: inline-flex; align-items: center; min-height: 44px; }
  .editor { margin-bottom: 70px; }
  .editor button, .form-shell form > button { width: 100%; }
  .form-grid { gap: 0; }
  textarea { min-height: 240px; }
}
.article-body img { display: block; max-width: 100%; height: auto; margin: 1.5em auto; }
.article-body pre { overflow-x: auto; padding: 1em; background: #e5edf6; border-radius: 4px; }
.article-body code { font-size: .9em; overflow-wrap: anywhere; }
.article-body blockquote { border-left: 4px solid var(--green); margin-left: 0; padding-left: 1em; color: var(--muted); }
.video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 1.5em 0; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-file { display: block; max-width: 100%; width: 100%; margin: 1.5em 0; }
.format-toolbar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding: 8px; border: 1px solid #c5d3e1; background: #eaf1f8; }
.format-toolbar button { min-width: 44px; min-height: 44px; padding: 8px 11px; border: 1px solid #c5d3e1; border-radius: 3px; background: #fff; color: var(--ink); font-size: 13px; }
.format-toolbar button:hover { background: #d9e9f8; }
.format-toolbar + textarea { margin-top: 0; }
.editor-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.button-secondary { background: #e5edf6; color: var(--ink); text-align: center; }
.preview-banner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; padding: 16px 18px; margin-top: 24px; background: #e5edf6; font-size: 13px; font-weight: 700; }
.preview-banner a { color: var(--green); text-decoration: underline; }
@media (max-width: 700px) { .editor-actions > * { width: 100%; } .row-actions { flex-wrap: wrap; } }
.footer { gap: 20px; flex-wrap: wrap; }
.footer-links { display: flex; flex-wrap: wrap; gap: 12px 20px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; }