@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  --canvas:#f7f7f4;
  --ink:#26251e;
  --body:#5a5852;
  --primary:#f54e00;
  --primary-active:#d04200;
  --card:#ffffff;
  --hairline:#e6e5e0;
  --hairline-soft:#efeee8;
  --muted:#807d72;
  --surface-strong:#e6e5e0;
  --success:#1f8a65;
  --error:#cf2d56;
  --radius-sm:6px;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-pill:9999px;
}

html{font-size:16px;scroll-behavior:smooth;}
body{font-family:'Inter',system-ui,'Helvetica Neue',Helvetica,Arial,sans-serif;background:var(--canvas);color:var(--body);line-height:1.5;-webkit-font-smoothing:antialiased;}

a{color:inherit;text-decoration:none;}
a:hover{color:var(--ink);}
img{max-width:100%;height:auto;display:block;}
ul,ol{list-style:none;}

.container{max-width:1200px;margin:0 auto;padding:0 24px;}

.section{padding:80px 0;}
.section--alt{background:var(--card);}

h1,h2,h3,h4{color:var(--ink);font-weight:400;line-height:1.2;letter-spacing:-0.02em;}
h1{font-size:56px;letter-spacing:-0.03em;line-height:1.1;}
h2{font-size:36px;letter-spacing:-0.02em;}
h3{font-size:26px;letter-spacing:-0.01em;line-height:1.25;}
h4{font-size:20px;letter-spacing:-0.01em;}
p{color:var(--body);font-size:16px;line-height:1.6;}

.label-upper{font-size:11px;font-weight:600;letter-spacing:0.88px;text-transform:uppercase;color:var(--muted);}

.site-nav{background:var(--canvas);border-bottom:1px solid var(--hairline);position:sticky;top:0;z-index:100;height:64px;}
.site-nav__inner{display:flex;align-items:center;justify-content:space-between;height:64px;}
.site-nav__logo{font-size:18px;font-weight:600;color:var(--ink);letter-spacing:-0.02em;}
.site-nav__logo span{color:var(--primary);}
.site-nav__links{display:flex;align-items:center;gap:28px;}
.site-nav__links a{font-size:14px;font-weight:500;color:var(--body);transition:color 0.15s;}
.site-nav__links a:hover{color:var(--ink);}
.site-nav__toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:5px;}
.site-nav__toggle span{display:block;width:22px;height:2px;background:var(--ink);}
.site-nav__mobile{display:none;flex-direction:column;padding:16px 24px 24px;background:var(--canvas);border-bottom:1px solid var(--hairline);}
.site-nav__mobile a{font-size:15px;font-weight:500;color:var(--body);padding:10px 0;border-bottom:1px solid var(--hairline-soft);}
.site-nav__mobile a:last-child{border-bottom:none;}
.site-nav__mobile.is-open{display:flex;}

.hero{padding:80px 0 64px;}
.hero__label{margin-bottom:20px;}
.hero__title{font-size:56px;font-weight:400;color:var(--ink);letter-spacing:-0.03em;line-height:1.1;margin-bottom:24px;max-width:740px;}
.hero__desc{font-size:18px;color:var(--body);line-height:1.6;max-width:520px;margin-bottom:36px;}
.hero__img{margin-top:48px;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--hairline);}
.hero__img img{width:100%;max-height:480px;object-fit:cover;}

.topic-strip{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:0;}
.topic-tag{background:var(--surface-strong);color:var(--ink);font-size:12px;font-weight:500;border-radius:var(--radius-pill);padding:5px 14px;}

.card-grid{display:grid;gap:24px;}
.card-grid--2{grid-template-columns:repeat(2,1fr);}
.card-grid--3{grid-template-columns:repeat(3,1fr);}

.card{background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius-lg);overflow:hidden;transition:border-color 0.15s;}
.card:hover{border-color:var(--muted);}
.card__img{aspect-ratio:16/9;overflow:hidden;}
.card__img img{width:100%;height:100%;object-fit:cover;}
.card__body{padding:24px;}
.card__category{font-size:11px;font-weight:600;letter-spacing:0.88px;text-transform:uppercase;color:var(--primary);margin-bottom:12px;}
.card__title{font-size:19px;font-weight:500;color:var(--ink);line-height:1.35;margin-bottom:12px;letter-spacing:-0.01em;}
.card__title a{color:var(--ink);}
.card__title a:hover{color:var(--primary);}
.card__excerpt{font-size:14px;color:var(--body);line-height:1.55;margin-bottom:16px;}
.card__meta{font-size:13px;color:var(--muted);display:flex;gap:0;align-items:center;}
.card__meta span{margin-right:0;}
.card__meta span+span::before{content:'·';margin:0 8px;}

.featured-card{background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius-lg);overflow:hidden;display:grid;grid-template-columns:1fr 1fr;}
.featured-card__img{overflow:hidden;}
.featured-card__img img{width:100%;height:100%;object-fit:cover;}
.featured-card__body{padding:40px;display:flex;flex-direction:column;justify-content:center;}
.featured-card__title{font-size:28px;font-weight:400;color:var(--ink);letter-spacing:-0.02em;line-height:1.3;margin-bottom:16px;}
.featured-card__excerpt{font-size:16px;color:var(--body);line-height:1.6;margin-bottom:24px;}

.read-more{font-size:14px;font-weight:500;color:var(--ink);border-bottom:1px solid var(--hairline);padding-bottom:2px;display:inline-flex;align-items:center;gap:6px;}
.read-more:hover{color:var(--primary);border-color:var(--primary);}

.section-header{margin-bottom:48px;}
.section-header__title{margin-bottom:12px;}
.section-header__desc{font-size:16px;color:var(--body);max-width:560px;}

.divider{height:1px;background:var(--hairline);}

.article-header{padding:64px 0 40px;}
.article-header__category{margin-bottom:20px;}
.article-header__title{font-size:44px;font-weight:400;color:var(--ink);letter-spacing:-0.025em;line-height:1.15;margin-bottom:20px;max-width:800px;}
.article-header__desc{font-size:18px;color:var(--body);line-height:1.6;max-width:680px;margin-bottom:24px;}
.article-header__meta{font-size:14px;color:var(--muted);display:flex;gap:20px;align-items:center;flex-wrap:wrap;}

.article-wrap{padding:0 0 80px;}
.article-hero-img{margin-bottom:48px;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--hairline);}
.article-hero-img img{width:100%;max-height:500px;object-fit:cover;}
.article-hero-img figcaption{padding:10px 16px;font-size:13px;color:var(--muted);background:var(--canvas);}

.article-layout{display:grid;grid-template-columns:1fr 300px;gap:64px;align-items:start;}

.article-body h2{font-size:28px;margin-top:48px;margin-bottom:16px;letter-spacing:-0.02em;}
.article-body h2:first-child{margin-top:0;}
.article-body h3{font-size:22px;margin-top:36px;margin-bottom:12px;}
.article-body p{font-size:16px;line-height:1.72;margin-bottom:20px;color:var(--body);}
.article-body ul{margin-bottom:20px;}
.article-body ul li{font-size:16px;color:var(--body);line-height:1.65;padding-left:22px;position:relative;margin-bottom:8px;}
.article-body ul li::before{content:'—';position:absolute;left:0;color:var(--muted);}
.article-body ol{counter-reset:item;margin-bottom:20px;}
.article-body ol li{font-size:16px;color:var(--body);line-height:1.65;padding-left:26px;position:relative;margin-bottom:8px;counter-increment:item;}
.article-body ol li::before{content:counter(item)'.';position:absolute;left:0;color:var(--muted);font-weight:500;}
.article-body a{color:var(--ink);border-bottom:1px solid var(--hairline);padding-bottom:1px;}
.article-body a:hover{color:var(--primary);border-color:var(--primary);}
.article-body strong{font-weight:600;color:var(--ink);}
.info-box{background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:24px 28px;margin:32px 0;}
.info-box h4{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:10px;letter-spacing:0;}
.info-box p{margin-bottom:0;}

.article-sidebar{position:sticky;top:80px;}
.sidebar-card{background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:24px;margin-bottom:20px;}
.sidebar-card__title{font-size:11px;font-weight:600;letter-spacing:0.88px;text-transform:uppercase;color:var(--muted);margin-bottom:16px;}
.sidebar-card__links{display:flex;flex-direction:column;gap:0;}
.sidebar-card__links a{font-size:14px;color:var(--body);line-height:1.4;border-bottom:1px solid var(--hairline-soft);padding:10px 0;}
.sidebar-card__links a:last-child{border-bottom:none;}
.sidebar-card__links a:hover{color:var(--ink);}

.form-wrap{max-width:560px;}
.form-group{margin-bottom:20px;}
.form-group label{display:block;font-size:14px;font-weight:500;color:var(--ink);margin-bottom:6px;}
.form-group input,.form-group textarea{width:100%;background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius-md);padding:12px 16px;font-size:15px;font-family:inherit;color:var(--ink);outline:none;transition:border-color 0.15s;}
.form-group input{height:44px;}
.form-group textarea{min-height:120px;resize:vertical;}
.form-group input:focus,.form-group textarea:focus{border-color:var(--muted);}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--muted);}
.field-error{display:none;font-size:13px;color:var(--error);margin-top:4px;}
.form-group.has-error input,.form-group.has-error textarea{border-color:var(--error);}
.form-group.has-error .field-error{display:block;}

.btn-submit{background:var(--ink);color:var(--canvas);border:none;border-radius:var(--radius-md);padding:12px 24px;font-size:14px;font-weight:500;font-family:inherit;cursor:pointer;transition:background 0.15s;height:44px;}
.btn-submit:hover{background:#3a3830;}
.btn-submit:disabled{opacity:0.6;cursor:not-allowed;}

.form-status{margin-top:16px;padding:14px 18px;border-radius:var(--radius-md);font-size:14px;display:none;}
.form-status--success{background:#e8f5f0;color:var(--success);display:block;}
.form-status--error{background:#fdeef2;color:var(--error);display:block;}

.site-footer{background:var(--canvas);border-top:1px solid var(--hairline);padding:64px 0 48px;}
.site-footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px;}
.site-footer__brand-name{font-size:18px;font-weight:600;color:var(--ink);margin-bottom:12px;letter-spacing:-0.02em;}
.site-footer__brand-name span{color:var(--primary);}
.site-footer__brand-desc{font-size:14px;color:var(--body);line-height:1.6;max-width:280px;}
.site-footer__col-title{font-size:11px;font-weight:600;letter-spacing:0.88px;text-transform:uppercase;color:var(--muted);margin-bottom:16px;}
.site-footer__links{display:flex;flex-direction:column;gap:10px;}
.site-footer__links a{font-size:14px;color:var(--body);}
.site-footer__links a:hover{color:var(--ink);}
.site-footer__bottom{border-top:1px solid var(--hairline);padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
.site-footer__copy{font-size:13px;color:var(--muted);}
.site-footer__legal{display:flex;gap:20px;}
.site-footer__legal a{font-size:13px;color:var(--muted);}
.site-footer__legal a:hover{color:var(--ink);}

.cookie-banner{position:fixed;bottom:0;left:0;right:0;background:var(--ink);color:var(--canvas);padding:20px 24px;z-index:200;display:none;}
.cookie-banner.is-visible{display:block;}
.cookie-banner__inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.cookie-banner__text{font-size:14px;color:#c8c5bc;line-height:1.5;flex:1;min-width:240px;}
.cookie-banner__text a{color:var(--canvas);border-bottom:1px solid rgba(255,255,255,0.3);}
.cookie-banner__actions{display:flex;gap:12px;flex-shrink:0;}
.cookie-btn{border-radius:var(--radius-md);padding:8px 18px;font-size:13px;font-weight:500;font-family:inherit;cursor:pointer;border:none;transition:all 0.15s;}
.cookie-btn--accept{background:var(--primary);color:#fff;}
.cookie-btn--accept:hover{background:var(--primary-active);}
.cookie-btn--reject{background:transparent;color:var(--canvas);border:1px solid rgba(255,255,255,0.3);}
.cookie-btn--reject:hover{background:rgba(255,255,255,0.08);}

.page-header{padding:64px 0 48px;border-bottom:1px solid var(--hairline);}
.page-header__label{margin-bottom:16px;}
.page-header__title{font-size:44px;font-weight:400;color:var(--ink);letter-spacing:-0.025em;margin-bottom:16px;}
.page-header__desc{font-size:18px;color:var(--body);max-width:600px;line-height:1.6;}
.page-content{padding:64px 0;}
.page-content h2{font-size:26px;font-weight:400;margin-top:48px;margin-bottom:14px;letter-spacing:-0.015em;}
.page-content h2:first-child{margin-top:0;}
.page-content h3{font-size:20px;font-weight:400;margin-top:32px;margin-bottom:10px;}
.page-content p{font-size:16px;line-height:1.72;margin-bottom:20px;color:var(--body);}
.page-content ul{margin-bottom:20px;}
.page-content ul li{font-size:16px;color:var(--body);line-height:1.65;padding-left:22px;position:relative;margin-bottom:8px;}
.page-content ul li::before{content:'—';position:absolute;left:0;color:var(--muted);}
.page-content a{color:var(--ink);border-bottom:1px solid var(--hairline);}
.page-content a:hover{color:var(--primary);}
.updated-note{font-size:13px;color:var(--muted);margin-top:48px;padding-top:24px;border-top:1px solid var(--hairline);}

.about-grid{display:grid;grid-template-columns:1fr 400px;gap:80px;align-items:start;}
.contact-section{padding:80px 0;border-top:1px solid var(--hairline);}
.contact-section h2{font-size:32px;font-weight:400;margin-bottom:12px;letter-spacing:-0.02em;}
.contact-section .sub{font-size:16px;color:var(--body);margin-bottom:32px;}

@media(max-width:1024px){
  .article-layout{grid-template-columns:1fr;}
  .article-sidebar{position:static;}
  .site-footer__grid{grid-template-columns:1fr 1fr;}
  .about-grid{grid-template-columns:1fr;}
}

@media(max-width:768px){
  h1,.hero__title{font-size:36px;}
  h2{font-size:28px;}
  .hero{padding:48px 0 40px;}
  .section{padding:56px 0;}
  .card-grid--3,.card-grid--2{grid-template-columns:1fr;}
  .featured-card{grid-template-columns:1fr;}
  .featured-card__img{aspect-ratio:16/9;height:240px;}
  .featured-card__body{padding:24px;}
  .article-header__title{font-size:32px;}
  .page-header__title{font-size:32px;}
  .site-nav__links{display:none;}
  .site-nav__toggle{display:flex;}
  .site-footer__grid{grid-template-columns:1fr 1fr;gap:32px;}
  .site-footer__bottom{flex-direction:column;align-items:flex-start;}
  .cookie-banner__inner{flex-direction:column;align-items:flex-start;}
}

@media(max-width:480px){
  .container{padding:0 16px;}
  .site-footer__grid{grid-template-columns:1fr;}
  h1,.hero__title{font-size:30px;}
  .article-header__title,.page-header__title{font-size:26px;}
}