/* VK5UR · Barossa Journal. Colour and type tokens first; everything else follows the page order. */
:root{--paper:#f6f4ee;--card:#fffef9;--ink:#1f2420;--muted:#5f665d;--line:#d9d6ca;--sage:#5d7a4a;--wine:#7b2441;--gold:#d79a1e;--navy:#14284e;--frame:#2c241c;--mat:#f3efe4;
  --display:"DM Serif Display",Georgia,serif;--serif:"Source Serif 4",Georgia,serif;--sans:"Archivo",system-ui,-apple-system,sans-serif;--max:1240px}

/* base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;background:var(--paper);color:var(--ink);font:18.5px/1.75 var(--serif)}
img,video{display:block;max-width:100%;height:auto}
[hidden]{display:none!important}
a{color:var(--wine)}
a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;z-index:200;padding:8px 14px;background:var(--gold);color:#000;font:600 15px var(--sans)}
.skip:focus{left:8px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.narrow{max-width:760px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.08;margin:0 0 .35em}
h1{font-size:clamp(42px,7vw,92px)}h2{font-size:clamp(30px,4vw,52px)}h3{font-size:26px}
.eyebrow{font:700 12px var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--sage)}
.dek{font:italic 400 clamp(19px,2.2vw,26px)/1.45 var(--serif);color:var(--muted)}
@media (max-width:600px){.wrap{padding:0 18px}body{font-size:17.5px}}

/* masthead and nav */
.mast{text-align:center;padding:30px 0 0;background:linear-gradient(180deg,rgba(246,244,238,.08) 0%,rgba(246,244,238,.18) 45%,rgba(246,244,238,.72) 82%,var(--paper) 100%),url(../assets/img/vineyard.webp) center 62%/cover}
.mast .tag{text-shadow:0 0 12px var(--paper),0 0 4px var(--paper)}
.mast a{color:inherit;text-decoration:none;display:inline-block}
.mast .logo{width:240px;height:240px;margin:0 auto 6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mast .logo video,.mast .logo img{width:100%;height:100%;object-fit:contain}
.mast .tag{font:600 12.5px var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin:0 0 18px;padding:0 12px}
nav{border-block:1px solid var(--ink);background:var(--paper);position:sticky;top:0;z-index:40}
nav ul{list-style:none;margin:0 auto;padding:12px 16px;display:flex;justify-content:center;flex-wrap:wrap;gap:4px clamp(14px,4vw,46px)}
nav a{font:700 13.5px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);text-decoration:none;white-space:nowrap;padding:4px 0;border-bottom:2px solid transparent}
nav a:hover{color:var(--wine)}
nav a[aria-current]{border-color:var(--wine);color:var(--wine)}
@media (max-width:600px){.mast .logo{width:180px;height:180px}.mast .tag{letter-spacing:.18em;font-size:11px}nav ul{gap:2px 16px;padding:10px 8px}nav a{font-size:12px;letter-spacing:.12em}}
main{padding-bottom:100px}

/* home: cover story */
.cover{margin:0 0 70px}
.cover>img{width:100%;height:min(78vh,780px);object-fit:cover;object-position:50% 45%}
.cover .over{padding:40px 0 0}
.cover .over .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:20px 50px;align-items:end}
.cover h1,.cover .dek{margin:0}
.byline{font:600 13px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:14px}
@media (max-width:860px){.cover>img{height:auto;aspect-ratio:4/3}.cover .over .wrap{grid-template-columns:1fr}}
.article{display:grid;grid-template-columns:220px 1fr;gap:56px}
.article aside{font:600 14px/1.5 var(--sans);color:var(--muted);border-top:3px solid var(--ink);padding-top:14px;align-self:start}
.article aside dl{margin:0}
.article aside dt{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--sage);margin-top:14px}
.article aside dd{margin:2px 0 0;color:var(--ink);font-weight:600}
.body>p:first-child::first-letter{float:left;font:400 5.2em/.78 var(--display);color:var(--wine);padding:10px 12px 0 0}
.pull{font:400 clamp(26px,3vw,38px)/1.25 var(--display);color:var(--navy);border-left:4px solid var(--gold);padding:4px 0 4px 26px;margin:38px 0}
@media (max-width:860px){.article{grid-template-columns:1fr;gap:20px}.article aside dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;align-items:baseline}.article aside dt{margin-top:0}.article aside dd{margin:0}}
.calls{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--ink);margin:60px 0}
.calls div{padding:22px 20px;border-right:1px solid var(--line)}
.calls div:last-child{border-right:0;background:rgba(215,154,30,.12)}
.calls b{display:block;font:400 34px var(--display)}
.calls span{font:600 13px var(--sans);color:var(--muted);letter-spacing:.04em}
@media (max-width:760px){.calls{grid-template-columns:1fr 1fr}.calls div:nth-child(2){border-right:0}.calls div:nth-child(-n+2){border-bottom:1px solid var(--line)}}
.second{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
figcaption.note{font:500 13.5px var(--sans);color:var(--muted);margin-top:10px}
@media (max-width:860px){.second{grid-template-columns:1fr}}

/* page heads */
.phead{padding:70px 0 40px;text-align:center}
.phead .dek{max-width:34em;margin:0 auto}
@media (max-width:600px){.phead{padding:44px 0 26px}}

/* projects: numbered stories + photo strips */
.story{display:grid;grid-template-columns:1.3fr 1fr;gap:50px;align-items:center;padding:60px 0 26px;border-top:1px solid var(--line);scroll-margin-top:70px}
.story.flip{grid-template-columns:1fr 1.3fr}
.story.flip .lead-img{order:2}
.lead-img img{width:100%;aspect-ratio:4/3;object-fit:cover}
.story .num{font:400 64px/1 var(--display);color:var(--gold)}
.story p{color:var(--muted);margin:0}
.kit{font:600 13px var(--sans);color:var(--sage);letter-spacing:.06em;margin-top:14px}
@media (max-width:860px){.story,.story.flip{grid-template-columns:1fr;gap:20px;padding-top:44px}.story.flip .lead-img{order:0}.story .num{font-size:48px}}
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,24%);gap:14px;overflow-x:auto;padding:4px 0 18px;scroll-snap-type:x mandatory;margin:0;list-style:none}
.strip li{scroll-snap-align:start}
.strip figure{margin:0}
.strip a{display:block;overflow:hidden;aspect-ratio:1}
.strip img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.strip a:hover img{transform:scale(1.04)}
.strip figcaption{font:500 13px/1.4 var(--sans);color:var(--muted);margin-top:8px}
@media (max-width:600px){.strip{grid-auto-columns:72%}}
.toc{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;font:600 14px var(--sans);margin-top:22px}
.toc a{text-decoration:none}

/* awards: honour roll */
.roll-feature{display:grid;grid-template-columns:1.1fr 1fr;gap:50px;align-items:center;margin-bottom:70px}
.frame{padding:22px;background:var(--frame);box-shadow:inset 0 0 0 6px #4a3b2b,0 30px 60px -25px rgba(0,0,0,.6)}
.frame img{border:14px solid var(--mat)}
@media (max-width:860px){.roll-feature{grid-template-columns:1fr;gap:30px}.frame{padding:12px}.frame img{border-width:8px}}
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:40px 30px;list-style:none;margin:0;padding:0}
.award{margin:0}
.award a{display:block;padding:10px;background:var(--frame);box-shadow:0 18px 30px -18px rgba(0,0,0,.6)}
.award a img{width:100%;border:7px solid var(--mat)}
.award figcaption{text-align:center;padding-top:14px;font:500 14px var(--sans);color:var(--muted)}
.award figcaption>*{display:block}
.award .issuer{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--sage);font-weight:700}
.award b{font:400 21px/1.2 var(--display);color:var(--ink);margin:4px 0}
.award .call-tag{display:inline-block;margin-top:6px;font:700 11px var(--sans);letter-spacing:.14em;color:var(--wine);border:1px solid var(--wine);padding:1px 8px}

/* logbook: ruled log page */
.logpage{background:var(--card);border:1px solid var(--line);box-shadow:0 20px 40px -30px rgba(0,0,0,.5);padding:30px 34px}
.loghead{display:flex;flex-wrap:wrap;gap:12px 40px;justify-content:space-between;align-items:end;border-bottom:3px double var(--ink);padding-bottom:16px;margin-bottom:16px}
.loghead dl{display:flex;gap:30px;margin:0}
.loghead dt{font:700 11px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.loghead dd{margin:0;font:400 28px var(--display)}
.sample{font:italic 15px var(--serif);color:var(--wine);margin:0 0 12px}
.bands{display:flex;flex-wrap:wrap;gap:4px 8px;margin-bottom:12px}
.bands button{cursor:pointer;background:none;border:0;border-bottom:2px solid transparent;padding:4px 6px;font:700 13px var(--sans);letter-spacing:.06em;color:var(--muted)}
.bands button small{font-weight:500}
.bands button[aria-pressed=true]{color:var(--wine);border-color:var(--wine)}
.lb-wrap{overflow:auto;max-height:70vh;-webkit-overflow-scrolling:touch}
.lb{width:100%;border-collapse:collapse;font:15.5px var(--serif);font-variant-numeric:tabular-nums;white-space:nowrap}
.lb th{position:sticky;top:0;text-align:left;background:var(--card);font:700 11px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--ink)}
.lb td,.lb th{padding:9px 12px}
.lb td{border-bottom:1px solid #c9d6e6}
.lb .call a{color:var(--navy);font:700 15px var(--sans);letter-spacing:.04em;text-decoration:none}
.lb .call a:hover{text-decoration:underline}
.band{font:700 13px var(--sans);color:var(--sage)}.band.b-6m{color:var(--wine)}
.updated{font:500 13px var(--sans);color:var(--muted);margin:14px 0 0}
@media (max-width:600px){.logpage{padding:18px 14px}.loghead dl{gap:18px}.loghead dd{font-size:22px}}

/* contact: letter */
.letter{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding-top:20px}
.letter address{font-style:normal;font-size:20px;line-height:1.6}
.letter .sig{font:italic 400 34px var(--display);color:var(--navy);margin-top:24px}
.badges{display:flex;gap:16px;margin-top:26px;align-items:center}
.badges img{height:90px;width:auto}
@media (max-width:860px){.letter{grid-template-columns:1fr;gap:36px}}

/* contact form */
.contact-form{margin:22px 0 34px;display:grid;gap:16px}
.contact-form label{display:block;font:700 11.5px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--sage)}
.contact-form input,.contact-form textarea{display:block;width:100%;margin-top:6px;padding:11px 13px;font:17px/1.5 var(--serif);color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:2px;letter-spacing:normal;text-transform:none}
.contact-form textarea{resize:vertical;min-height:150px}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--wine);box-shadow:0 0 0 3px rgba(123,36,65,.15)}
.contact-form input[name=call]{text-transform:uppercase;font-family:var(--sans);letter-spacing:.06em}
.contact-form input[name=call]::placeholder{text-transform:none;letter-spacing:normal;font-family:var(--serif)}
.contact-form small{display:block;margin-top:6px;font:italic 14px var(--serif);letter-spacing:normal;text-transform:none;color:var(--muted)}
.contact-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-form .send{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.contact-form button{cursor:pointer;border:0;background:var(--wine);color:#fff;font:700 13px var(--sans);letter-spacing:.18em;text-transform:uppercase;padding:14px 26px}
.contact-form button:hover{background:#5f1b32}
.contact-form button:disabled{opacity:.6;cursor:wait}
.form-status{margin:0;font:italic 16px var(--serif);color:var(--muted)}
.form-status.ok{color:var(--sage)}.form-status.err{color:var(--wine)}
.qsl-head{margin-top:10px}

/* footer */
footer{background:linear-gradient(rgba(20,40,78,.72),rgba(20,40,78,.86)),url(../assets/img/vineyard-sm.webp) center/cover;color:#dfe4ee;padding:46px 0;font:500 14px var(--sans)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center}
footer b{font:400 28px var(--display);color:#fff;letter-spacing:.04em}
footer a{color:#fff}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:300;background:rgba(8,10,12,.93);display:flex;align-items:center;justify-content:center;padding:56px 64px}
.lightbox figure{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center}
.lightbox img{max-height:calc(100vh - 150px);width:auto;max-width:100%;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lightbox figcaption{color:#e8e8e2;font:15px/1.4 var(--sans);margin-top:14px;text-align:center}
.lightbox button{position:absolute;background:none;border:0;color:#fff;font:300 46px/1 var(--sans);cursor:pointer;padding:10px 16px;opacity:.8}
.lightbox button:hover{opacity:1}
.lb-x{top:8px;right:10px}.lb-prev{left:6px;top:50%;transform:translateY(-50%)}.lb-next{right:6px;top:50%;transform:translateY(-50%)}
@media (max-width:640px){.lightbox{padding:56px 8px 70px}.lb-prev,.lb-next{top:auto;bottom:6px;transform:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{nav,.mast .logo,footer,.bands{display:none}body{background:#fff}}
.lb td.empty{white-space:normal;text-align:center;padding:40px 12px;font-style:italic;color:var(--muted);border-bottom:0}