@font-face{font-family:"Noto Serif SC";src:url("assets/fonts/noto-serif-sc-subset.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Noto Sans SC";src:url("assets/fonts/noto-sans-sc-subset.ttf") format("truetype");font-style:normal;font-weight:100 900;font-display:swap}

:root{
  --paper:#f1eadc;
  --paper-light:#f8f3e9;
  --ink:#1d201c;
  --ink-soft:#505149;
  --amber:#c66a08;
  --amber-dark:#8d4200;
  --green:#56684c;
  --green-dark:#31402c;
  --silver:#c9cbc7;
  --line:#817e71;
  --focus:#005f73;
  --display:"Noto Serif SC","Songti SC",serif;
  --body:"Noto Sans SC","Microsoft YaHei",sans-serif;
  --header-h:76px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 24px);scrollbar-color:var(--amber-dark) var(--paper);scrollbar-width:thin}
body{margin:0;background-color:var(--paper);background-image:url("assets/materials/ticket-paper.webp");background-repeat:repeat;background-size:512px 512px;color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.7;overflow-x:clip}
body.menu-open{overflow:hidden}
img{display:block;width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;caret-color:var(--amber-dark)}
button{color:inherit}
::selection{background:var(--amber-dark);color:var(--paper-light)}
:focus-visible{outline:3px solid var(--focus);outline-offset:4px;box-shadow:0 0 0 2px var(--paper-light)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:var(--amber-dark);border:3px solid var(--paper);border-radius:0}

.skip-link{position:fixed;z-index:100;top:10px;left:10px;padding:10px 16px;background:var(--ink);color:var(--paper-light);transform:translateY(-150%)}
.skip-link:focus{transform:translateY(0)}

.site-header{position:sticky;z-index:50;top:0;height:var(--header-h);display:flex;align-items:stretch;border-bottom:1px solid var(--line);background-color:var(--paper);background-image:url("assets/materials/ticket-paper.webp");background-repeat:repeat;background-size:512px 512px}
.brand{display:flex;align-items:center;gap:13px;padding:0 30px;min-width:450px;border-right:1px solid var(--line)}
.site-mark{width:38px;height:38px;fill:none;stroke:var(--amber-dark);stroke-width:2}
.site-mark circle{fill:var(--amber);stroke:none}
.brand strong,.brand small{display:block}
.brand strong{font-family:var(--display);font-size:18px;letter-spacing:.02em}
.brand small{font-size:10px;letter-spacing:.16em;color:var(--ink-soft)}
.site-nav{display:flex;align-items:stretch;margin-left:auto}
.site-nav a{display:grid;place-items:center;padding:0 23px;border-left:1px solid transparent;font-size:14px}
.site-nav a:hover{background:var(--ink);color:var(--paper-light)}
.menu-button{display:none}

main{border-bottom:1px solid var(--line)}
.hero{position:relative;min-height:780px;border-bottom:1px solid var(--line);overflow:hidden}
.registration{position:absolute;z-index:2;left:22px;top:122px;bottom:38px;width:22px;border-left:1px dashed var(--line)}
.registration::before,.registration::after{content:"";position:absolute;left:-8px;width:15px;height:15px;border:1px solid var(--line);border-radius:50%;background:var(--paper)}
.registration::before{top:0}.registration::after{bottom:0}
.registration i{display:block;width:10px;height:24px;margin:10px 0 0 8px;background:var(--ink)}
.registration i:nth-child(2){opacity:.55}.registration i:nth-child(3){opacity:.22}
.hero-copy{position:relative;z-index:3;width:56%;padding:104px 7vw 40px 6.5vw}
.hero h1{margin:0;font-family:var(--display);font-size:clamp(64px,7vw,92px);font-weight:500;line-height:.98;letter-spacing:-.04em}
.hero h1 em{font-style:normal;color:var(--amber-dark)}
.hero-copy>p{max-width:620px;margin:32px 0 34px;font-size:18px;color:var(--ink-soft)}
.action{display:inline-flex;align-items:center;justify-content:space-between;gap:46px;min-width:230px;padding:14px 18px;border:1px solid var(--ink);font-weight:700}
.action:hover{background:var(--ink);color:var(--paper-light)}
.batch-number{position:absolute;z-index:3;left:6.5vw;bottom:62px;display:grid;grid-template-columns:auto auto 150px;align-items:end;gap:18px;font-family:var(--display)}
.batch-number span{writing-mode:vertical-rl;font-size:11px;letter-spacing:.18em;color:var(--ink-soft)}
.batch-number strong{font-size:118px;font-weight:400;line-height:.65;color:transparent;-webkit-text-stroke:1px var(--ink)}
.batch-number i{display:block;border-bottom:1px solid var(--ink);transform:translateY(-5px);transform-origin:left;animation:batch-register 1.1s cubic-bezier(.2,.72,.25,1) both}
.hero-media{position:absolute;z-index:1;inset:52px 0 0;width:100%;height:728px;margin:0;overflow:hidden;pointer-events:none}
.hero-media img{height:100%;object-fit:cover;object-position:center;mix-blend-mode:multiply;animation:liquid-settle 1.15s cubic-bezier(.2,.72,.25,1) both}

.section-lead{display:grid;grid-template-columns:1fr minmax(300px,520px);gap:10vw;padding:94px 6.5vw 64px;border-bottom:1px solid var(--line)}
.section-lead h2,.green h2,.quality h2,.contact h2{margin:0;font-family:var(--display);font-size:clamp(46px,5vw,76px);font-weight:500;line-height:1.05;letter-spacing:-.035em}
.section-lead p{align-self:end;margin:0;color:var(--ink-soft)}
.path-index{display:grid;grid-template-columns:repeat(4,1fr);margin:0;padding:0 6.5vw;list-style:none;border-bottom:1px solid var(--line)}
.path-index li{position:relative;padding:24px 20px 22px 0;border-right:1px dashed var(--line);font-family:var(--display);font-size:20px}
.path-index li:last-child{border:0}
.path-index span{display:block;margin-bottom:8px;font-family:var(--body);font-size:13px;color:var(--amber-dark)}
.path-index li:not(:last-child)::after{content:"→";position:absolute;right:14px;top:38px;color:var(--line)}
.process{display:grid;min-height:540px;border-bottom:1px solid var(--line)}
.process figure{position:relative;margin:0;overflow:hidden;background:var(--silver)}
.process figure img{height:100%;object-fit:cover;transition:transform .7s ease}
.process:hover figure img{transform:scale(1.018)}
.process-copy{display:flex;flex-direction:column;justify-content:center;padding:64px 6.5vw}
.process-copy h3{margin:0 0 24px;font-family:var(--display);font-size:clamp(42px,4vw,64px);font-weight:500;line-height:1}
.process-copy p{max-width:500px;margin:0;color:var(--ink-soft)}
.process--malt,.process--wort,.process--pack{grid-template-columns:minmax(320px,42%) 1fr}
.process--wort,.process--pack{grid-template-columns:1fr minmax(320px,42%)}
.process--wort .process-copy,.process--pack .process-copy{border-left:1px solid var(--line)}
.process--malt .process-copy{border-right:1px solid var(--line)}
.process--state{grid-template-columns:minmax(300px,35%) 1fr;background:var(--ink);color:var(--paper-light)}
.process--state .process-copy{border-right:1px solid #65665f}
.process--state .process-copy p{color:#d4d0c6}
.process-pair{display:grid;grid-template-columns:1fr 1fr}
.process-pair figure+figure{border-left:1px solid #65665f}
.process-pair figcaption{position:absolute;right:0;bottom:0;left:0;padding:10px 14px;background:var(--ink);color:var(--paper-light);font-size:11px;letter-spacing:.12em}

.green{position:relative;padding:100px 6.5vw 90px;background:var(--green);color:var(--paper-light);overflow:hidden}
.green-head{display:grid;grid-template-columns:minmax(420px,1fr) minmax(320px,520px);gap:9vw;align-items:end}
.green-head p{margin:0;color:#e1e3da}
.green-flow{display:flex;align-items:center;justify-content:space-between;margin:72px 0 46px;padding:22px 0;border-top:1px solid #a8b19f;border-bottom:1px solid #a8b19f;font-family:var(--display);font-size:20px}
.green-flow i{font-style:normal;color:#c9d1c2}
.green-media{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.green-media figure{position:relative;height:430px;margin:0;overflow:hidden;background:var(--green-dark)}
.green-media img{height:100%;object-fit:cover}
.green-media figcaption{position:absolute;right:0;bottom:0;left:0;padding:11px 16px;background:var(--paper);color:var(--ink);font-size:12px;letter-spacing:.12em}
.green-stamp{position:absolute;right:6.5vw;top:250px;display:flex;align-items:flex-end;gap:12px;color:#e3e6dc;opacity:1;pointer-events:none}
.green-stamp strong{font-family:var(--display);font-size:112px;font-weight:400;line-height:.7}
.green-stamp span{font-size:12px;writing-mode:vertical-rl;letter-spacing:.15em}

.quality{padding:100px 6.5vw;background-color:var(--paper-light);background-image:url("assets/materials/ticket-paper.webp");background-repeat:repeat;background-size:512px 512px;background-blend-mode:multiply}
.quality-title{display:grid;grid-template-columns:1fr minmax(320px,480px);gap:9vw;align-items:end}
.quality-title p{margin:0;color:var(--ink-soft)}
.quality-line{display:grid;grid-template-columns:repeat(3,1fr);margin:76px 0 0;padding:0;list-style:none;border-top:1px solid var(--ink)}
.quality-line li{position:relative;padding:38px 28px 0 0;border-right:1px dashed var(--line)}
.quality-line li:last-child{border:0;padding-left:28px}
.quality-line li:nth-child(2){padding-left:28px}
.quality-line li::before{content:"";position:absolute;top:-7px;left:0;width:12px;height:12px;border:1px solid var(--ink);border-radius:50%;background:var(--paper-light)}
.quality-line li:nth-child(n+2)::before{left:28px}
.quality-line span{display:block;color:var(--amber-dark);font-size:12px}
.quality-line strong{display:block;margin:8px 0;font-family:var(--display);font-size:25px;font-weight:500}
.quality-line p{margin:0;color:var(--ink-soft);font-size:14px}

.contact{display:grid;grid-template-columns:42% 1fr;border-top:1px solid var(--line);background:var(--paper)}
.contact-place{position:relative;padding:90px 6.5vw;overflow:hidden;background:var(--silver)}
.contact-place::before{content:"";position:absolute;left:14%;top:-18%;width:1px;height:138%;background:#8f958d;box-shadow:92px 0 #8f958d,184px 0 #8f958d,276px 0 #8f958d;opacity:.28;transform:rotate(24deg)}
.contact-place>*{position:relative}
.contact-place h2{margin:0 0 50px}
.contact-place address{font-family:var(--display);font-size:28px;font-style:normal;line-height:1.5}
.contact-place p{max-width:360px;margin:40px 0 0;color:#3f473d;font-size:14px}
.contact-form{padding:76px 6.5vw;background-color:var(--paper-light);background-image:url("assets/materials/ticket-paper.webp");background-repeat:repeat;background-size:512px 512px;background-blend-mode:multiply}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.contact-form label{display:block;margin-bottom:24px;font-size:13px;letter-spacing:.05em}
.contact-form label span{color:var(--amber-dark)}
.contact-form input,.contact-form select,.contact-form textarea{display:block;width:100%;margin-top:7px;padding:10px 4px;border:0;border-bottom:2px solid #696b64;border-radius:0;background:transparent;color:var(--ink)}
.contact-form.was-validated input:invalid,.contact-form.was-validated select:invalid,.contact-form.was-validated textarea:invalid{border-bottom-color:#7a2000;box-shadow:inset 0 -2px #7a2000}
.contact-form textarea{resize:vertical}
.contact-form button{display:flex;justify-content:space-between;width:100%;margin-top:12px;padding:15px 18px;border:1px solid var(--ink);border-radius:0;background:var(--ink);color:var(--paper-light);cursor:pointer;font-weight:700}
.contact-form button:hover{background:var(--amber-dark)}
.form-status{min-height:28px;margin:14px 0 0;color:#682d00;font-weight:700}

.site-footer{display:grid;grid-template-columns:1fr auto auto;gap:40px;align-items:center;padding:24px 30px;background:var(--ink);color:var(--paper-light);font-size:12px}
.site-footer p{margin:0}

@keyframes liquid-settle{from{transform:translateY(12px) scale(1.012);opacity:.92}to{transform:translateY(0) scale(1);opacity:1}}
@keyframes batch-register{from{transform:translateY(-5px) scaleX(.18);opacity:.55}to{transform:translateY(-5px) scaleX(1);opacity:1}}

@media (max-width:1080px){
  .brand{min-width:370px;padding:0 20px}.site-nav a{padding:0 14px}
  .hero-copy{width:60%;padding-top:90px}.hero-media{height:690px}
  .batch-number{left:5vw}.batch-number strong{font-size:100px}
  .process--malt,.process--wort,.process--pack{grid-template-columns:40% 60%}.process--wort,.process--pack{grid-template-columns:60% 40%}
  .green-stamp{position:relative;right:auto;top:auto;justify-content:flex-end;margin-top:30px}
  .green-stamp strong{font-size:88px}
}

@media (max-width:780px){
  :root{--header-h:70px}
  .site-header{position:sticky;height:var(--header-h);align-items:center}
  .brand{min-width:0;flex:1;height:100%;padding:0 14px;border:0}.site-mark{width:31px;height:31px}.brand strong{font-size:14px}.brand small{font-size:9px}
  .menu-button{position:relative;z-index:62;display:flex;align-items:center;gap:12px;height:100%;padding:0 18px;border:0;border-left:1px solid var(--line);background:transparent;font-weight:700}
  .menu-button i,.menu-button i::before{display:block;width:20px;height:2px;background:var(--ink);transition:transform .2s ease}
  .menu-button i::before{content:"";transform:translateY(6px)}
  .menu-button[aria-expanded="true"] i{transform:rotate(45deg)}.menu-button[aria-expanded="true"] i::before{transform:rotate(-90deg)}
  .site-nav{position:fixed;z-index:60;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:stretch;margin:0;padding:100px 32px 40px;background-color:var(--paper);background-image:url("assets/materials/ticket-paper.webp");background-repeat:repeat;background-size:512px 512px;transform:translateX(100%);visibility:hidden;transition:transform .24s ease,visibility .24s}
  .site-nav.is-open{transform:translateX(0);visibility:visible}
  .site-nav a{display:flex;justify-content:space-between;padding:15px 0;border-top:1px solid var(--line);font-family:var(--display);font-size:30px}
  .site-nav a::after{content:"→";font-size:20px}.site-nav a:last-child{border-bottom:1px solid var(--line)}

  .hero{min-height:760px;padding-bottom:0}
  .registration{display:none}
  .hero-copy{width:auto;padding:58px 22px 38px}
  .hero h1{font-size:clamp(54px,17vw,72px)}
  .hero-copy>p{margin:24px 0;font-size:16px}
  .action{width:100%;min-width:0}
  .batch-number{position:relative;left:auto;bottom:auto;grid-template-columns:auto auto 1fr;padding:0 22px 32px}
  .batch-number strong{font-size:82px}
  .hero-media{position:absolute;inset:auto 0 0;width:100%;height:390px}

  .section-lead,.green-head,.quality-title{grid-template-columns:1fr;gap:28px;padding:66px 22px 38px}
  .section-lead h2,.green h2,.quality h2,.contact h2{font-size:48px}
  .path-index{grid-template-columns:1fr 1fr;padding:0 22px}.path-index li{border-bottom:1px dashed var(--line)}.path-index li:nth-child(2){border-right:0}.path-index li:nth-child(n+3){border-bottom:0}
  .process,.process--malt,.process--wort,.process--pack,.process--state{display:flex;min-height:0;flex-direction:column}
  .process--wort figure,.process--pack figure{order:2}.process--wort .process-copy,.process--pack .process-copy{order:1;border-left:0}
  .process-copy{padding:48px 22px}.process-copy h3{font-size:46px}.process figure{height:310px}
  .process--malt .process-copy,.process--state .process-copy{border:0;border-bottom:1px solid var(--line)}
  .process-pair{grid-template-columns:1fr}.process-pair figure+figure{border:0;border-top:1px solid #65665f}

  .green{padding:66px 22px}.green-head{padding:0}.green-flow{align-items:flex-start;gap:10px;margin:44px 0 34px;font-size:16px}.green-flow span{flex:1}.green-media{grid-template-columns:1fr;gap:16px}.green-media figure{height:300px}
  .green-stamp{margin-top:24px}.green-stamp strong{font-size:66px}
  .quality{padding:66px 22px}.quality-title{padding:0}.quality-line{grid-template-columns:1fr;margin-top:48px;border-top:0;border-left:1px solid var(--ink)}.quality-line li,.quality-line li:nth-child(2),.quality-line li:last-child{padding:0 0 36px 28px;border:0}.quality-line li::before,.quality-line li:nth-child(n+2)::before{top:2px;left:-7px}
  .contact{grid-template-columns:1fr}.contact-place,.contact-form{padding:58px 22px}.field-row{grid-template-columns:1fr;gap:0}
  .site-footer{grid-template-columns:1fr;gap:8px;padding:24px 22px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .process:hover figure img{transform:none}
}