/* ==========================================================================
   DWC-IT — Shared page system
   Extends assets/css/site.css (the approved homepage design system).
   Tokens, type scale, colours and radii are inherited; nothing here
   overrides homepage section styles.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Navigation additions (dropdown + current state)
   -------------------------------------------------------------------------- */
.navlinks .has-sub{position:relative}
.navlinks .has-sub>a:after{content:"›";margin-left:6px;color:var(--blue)}
.navlinks .sub,
.navlinks li.menu-item-has-children>.sub-menu{
  position:absolute;top:100%;left:-18px;min-width:282px;padding:8px 0;margin:0;
  background:#fff;border:1px solid var(--line);box-shadow:0 26px 60px #00000021;
  display:grid;list-style:none;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s
}
.navlinks .has-sub:hover .sub,
.navlinks .has-sub:focus-within .sub,
.navlinks li.menu-item-has-children:hover>.sub-menu,
.navlinks li.menu-item-has-children:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none}
.navlinks .sub a,
.navlinks .sub-menu a{display:block;padding:12px 18px;font-size:13px;font-weight:600}
.navlinks .sub a:hover,
.navlinks .sub-menu a:hover{background:var(--paper);color:var(--blue)}
.navlinks a.is-current,
.navlinks .current-menu-item>a,
.navlinks .current_page_item>a{color:var(--blue)}
.menu .subhead{padding:15px 12px 3px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#8b8e88}
.menu>div a.sub-link{padding-left:26px;font-weight:500}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:16px;top:8px;z-index:99;background:var(--lime);color:var(--ink);padding:10px 14px;font-weight:700;font-size:12px}

/* --------------------------------------------------------------------------
   2. Page hero
   -------------------------------------------------------------------------- */
.page-hero{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding:92px 0 82px}
.page-hero:before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(#ffffff0f 1px,transparent 1px),linear-gradient(90deg,#ffffff0f 1px,transparent 1px);
  background-size:64px 64px}
.page-hero:after{content:"";position:absolute;right:-160px;top:-160px;width:520px;height:520px;border:1px solid #ffffff17;border-radius:50%}
.page-hero>.wrap{position:relative;z-index:2}
.page-hero.is-blue{background:var(--blue)}
.page-hero.is-blue:before{background-image:linear-gradient(#ffffff14 1px,transparent 1px),linear-gradient(90deg,#ffffff14 1px,transparent 1px)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#8b908d}
.page-hero.is-blue .crumbs{color:#bec9ff}
.crumbs a:hover{color:var(--lime)}
.crumbs i{font-style:normal;opacity:.5}
.page-hero h1{font:400 clamp(48px,5.8vw,88px)/.94 "Instrument Serif",serif;letter-spacing:-.042em;margin:24px 0 22px;max-width:17ch}
.page-hero h1 em{font-style:normal;color:var(--lime)}
.hero-lead{font-size:18px;line-height:1.7;color:#c0c3c1;max-width:640px;margin:0}
.page-hero.is-blue .hero-lead{color:#d6dcff}
.hero-meta{display:flex;flex-wrap:wrap;gap:26px 56px;margin-top:48px;padding-top:24px;border-top:1px solid #ffffff2e}
.hero-meta div{display:grid;gap:5px;max-width:230px}
.hero-meta b{font:400 30px/1 "Instrument Serif",serif;color:var(--lime)}
.hero-meta span{font-size:11.5px;line-height:1.45;color:#959995}
.page-hero.is-blue .hero-meta span{color:#c6ceff}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px}

/* --------------------------------------------------------------------------
   3. Section shells
   -------------------------------------------------------------------------- */
.sec{padding:118px 0}
.sec-tight{padding:86px 0}
.sec-paper{background:var(--paper)}
.sec-white{background:#fff}
.sec-stone{background:#deded6}
.sec-ink{background:var(--ink);color:#fff}
.sec-graphite{background:#151714;color:#fff}
.sec-blue{background:var(--blue);color:#fff}
.sec h2{font:400 clamp(42px,4.4vw,68px)/1 "Instrument Serif",serif;letter-spacing:-.035em;margin:18px 0 0}
.sec h2 em{font-style:normal;color:var(--blue)}
.sec-ink h2 em,.sec-blue h2 em,.sec-graphite h2 em{color:var(--lime)}
.sec-ink .section-index,.sec-blue .section-index,.sec-graphite .section-index{color:#8d918c}
.sec-blue .section-index{color:#b6c1ff}
.sec-head{display:grid;grid-template-columns:1.25fr .7fr;gap:88px;align-items:end}
.sec-head>p{margin:0;color:#686b67;line-height:1.75;font-size:16px}
.sec-ink .sec-head>p,.sec-graphite .sec-head>p{color:#9da19f}
.sec-blue .sec-head>p{color:#ccd3ff}
.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px}
.split-even{grid-template-columns:1fr 1fr;gap:70px}
.split-wide{grid-template-columns:1.15fr .85fr;gap:80px}
.stack{display:grid;align-content:start;gap:0}
.lede{font:400 clamp(26px,2.4vw,33px)/1.28 "Instrument Serif",serif;margin:0 0 24px;letter-spacing:-.02em}
.copy p{line-height:1.8;color:#666a65;font-size:16px}
.copy p:last-child{margin-bottom:0}
.sec-ink .copy p,.sec-graphite .copy p{color:#a5a9a6}
.sec-blue .copy p{color:#d1d8ff}
.sticky-col{position:sticky;top:36px;align-self:start}

/* --------------------------------------------------------------------------
   4. Bordered tile grids
   -------------------------------------------------------------------------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);margin-top:56px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.tiles-two{grid-template-columns:repeat(2,1fr)}
.tiles-four{grid-template-columns:repeat(4,1fr)}
.tiles article{position:relative;min-height:236px;padding:28px;background:#fff;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.tiles span{position:absolute;right:22px;top:24px;font:400 15px "Instrument Serif",serif;color:#a9aca6}
.tiles article>i{font-style:normal;display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--line);color:var(--blue);font-size:15px}
.tiles span.tag{top:26px;font:700 9px/1 "DM Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#8b8e88}
.sec-ink .tiles span.tag,.sec-blue .tiles span.tag,.sec-graphite .tiles span.tag{color:#8f948f}
.tiles h3{font:400 26px/1.1 "Instrument Serif",serif;margin:26px 0 10px}
.tiles p{margin:0;font-size:13.5px;line-height:1.62;color:#747773}
.sec-ink .tiles,.sec-blue .tiles,.sec-graphite .tiles{border-color:#ffffff2b}
.sec-ink .tiles article,.sec-blue .tiles article,.sec-graphite .tiles article{background:transparent;border-color:#ffffff2b}
.sec-ink .tiles article>i,.sec-blue .tiles article>i,.sec-graphite .tiles article>i{border-color:#ffffff33;color:var(--lime)}
.sec-ink .tiles span,.sec-blue .tiles span,.sec-graphite .tiles span{color:#7e837f}
.sec-ink .tiles p,.sec-graphite .tiles p{color:#a3a7a4}
.sec-blue .tiles p{color:#ccd3ff}
.sec-blue .tiles span{color:#a7b4ff}

.brandgrid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:50px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.brandgrid article{display:flex;flex-direction:column;min-height:184px;padding:26px;background:#fff;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.brandgrid b{font:700 12.5px/1 "DM Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.brandgrid p{margin:14px 0 0;font-size:13px;line-height:1.6;color:#747773}

/* --------------------------------------------------------------------------
   5. Lists, steps, timelines, stats
   -------------------------------------------------------------------------- */
.checks{list-style:none;margin:0;padding:0;display:grid}
.checks li{display:flex;align-items:flex-start;gap:12px;padding:15px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.55;color:#4d5150}
.checks li:last-child{border-bottom:1px solid var(--line)}
.checks i{font-style:normal;margin-top:1px;color:var(--blue);font-size:13px}
.sec-ink .checks li,.sec-blue .checks li,.sec-graphite .checks li{border-color:#ffffff2b;color:#c9cdcb}
.sec-ink .checks i,.sec-blue .checks i,.sec-graphite .checks i{color:var(--lime)}

.steps{margin-top:52px;border-top:1px solid var(--line)}
.steps article{display:grid;grid-template-columns:64px .8fr 1.2fr;gap:32px;align-items:start;padding:32px 0;border-bottom:1px solid var(--line)}
.steps b{font:400 22px/1 "Instrument Serif",serif;color:var(--blue)}
.steps h3{font:400 28px/1.06 "Instrument Serif",serif;margin:0}
.steps p{margin:0;color:#6b6e6a;line-height:1.72;font-size:15px}
.sec-ink .steps,.sec-blue .steps,.sec-graphite .steps{border-color:#ffffff2b}
.sec-ink .steps article,.sec-blue .steps article,.sec-graphite .steps article{border-color:#ffffff2b}
.sec-ink .steps b,.sec-blue .steps b,.sec-graphite .steps b{color:var(--lime)}
.sec-ink .steps p,.sec-graphite .steps p{color:#a3a7a4}
.sec-blue .steps p{color:#ccd3ff}

.timeline{margin-top:54px;border-top:1px solid var(--line)}
.timeline article{display:grid;grid-template-columns:190px 1fr;gap:44px;padding:30px 0;border-bottom:1px solid var(--line)}
.timeline b{font:400 clamp(28px,2.6vw,36px)/1 "Instrument Serif",serif;letter-spacing:-.03em;color:var(--blue)}
.timeline h3{font:400 25px/1.15 "Instrument Serif",serif;margin:0 0 9px}
.timeline p{margin:0;color:#6b6e6a;line-height:1.72;font-size:15px;max-width:64ch}
.sec-ink .timeline,.sec-graphite .timeline{border-color:#ffffff2b}
.sec-ink .timeline article,.sec-graphite .timeline article{border-color:#ffffff2b}
.sec-ink .timeline b,.sec-graphite .timeline b{color:var(--lime)}
.sec-ink .timeline p,.sec-graphite .timeline p{color:#a3a7a4}

.statband{display:grid;grid-template-columns:repeat(4,1fr);margin-top:54px;background:#fff;border:1px solid var(--line)}
.statband-two{grid-template-columns:repeat(2,1fr)}
.statband div{padding:28px;border-right:1px solid var(--line)}
.statband div:last-child{border-right:0}
.statband b{display:block;font:400 clamp(36px,3.6vw,50px)/1 "Instrument Serif",serif;letter-spacing:-.03em;color:var(--blue)}
.statband span{display:block;margin-top:12px;font-size:12.5px;line-height:1.5;color:#74776f}
.sec-ink .statband,.sec-blue .statband,.sec-graphite .statband{background:transparent;border-color:#ffffff2b}
.sec-ink .statband div,.sec-blue .statband div,.sec-graphite .statband div{border-color:#ffffff2b}
.sec-ink .statband b,.sec-blue .statband b,.sec-graphite .statband b{color:var(--lime)}
.sec-ink .statband span,.sec-graphite .statband span{color:#9ca09d}
.sec-blue .statband span{color:#c8d0ff}

.pillrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.pillrow b{padding:11px 14px;background:#fff;border:1px solid var(--line);font:600 11.5px/1 "DM Sans",sans-serif;letter-spacing:.09em;text-transform:uppercase}
.sec-ink .pillrow b,.sec-blue .pillrow b,.sec-graphite .pillrow b{background:transparent;border-color:#ffffff33;color:#e0e3e1}

.notecard{margin:34px 0;padding:6px 0 6px 24px;border-left:4px solid var(--lime)}
.notecard b{display:block;font:400 30px/1.16 "Instrument Serif",serif;margin-bottom:9px}
.notecard p{margin:0;color:#6b6e6a;line-height:1.72;font-size:15px}
.sec-ink .notecard p,.sec-blue .notecard p,.sec-graphite .notecard p{color:#b3b8b5}

.quoterow{margin-top:44px;border-top:1px solid #ffffff2b}
.quoterow p{margin:0;padding:24px 0;border-bottom:1px solid #ffffff2b;font:400 clamp(28px,3.2vw,50px)/1.12 "Instrument Serif",serif;letter-spacing:-.03em}
.quoterow p em{font-style:italic;color:var(--lime)}

/* --------------------------------------------------------------------------
   6. Abstract visual panels (no photography required)
   -------------------------------------------------------------------------- */
.viz{position:relative;overflow:hidden;min-height:440px;display:grid;place-items:center;background:linear-gradient(145deg,#101522,#031f38)}
.viz:after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(#ffffff12 1px,transparent 1px),linear-gradient(90deg,#ffffff12 1px,transparent 1px);
  background-size:52px 52px}
.viz-rings{position:relative;z-index:2;width:320px;height:320px;display:grid;place-items:center}
.viz-rings i{position:absolute;border:1px solid #4fe5ff45;border-radius:50%;font-style:normal}
.viz-rings i:nth-child(1){width:320px;height:320px}
.viz-rings i:nth-child(2){width:228px;height:228px}
.viz-rings i:nth-child(3){width:136px;height:136px;background:#3157ff38}
.viz-rings b{position:relative;z-index:3;font-size:44px;color:var(--lime);font-weight:400}
.viz-label{position:absolute;bottom:26px;left:30px;z-index:3;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#8b938f}
.viz-stack{position:relative;z-index:2;display:grid;gap:10px;width:min(360px,72%)}
.viz-stack span{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border:1px solid #ffffff26;background:#ffffff0a;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#c8ccca}
.viz-stack span em{font-style:normal;color:var(--lime);font-size:10px}
.viz-bars{position:relative;z-index:2;display:flex;align-items:flex-end;gap:14px;height:250px}
.viz-bars i{font-style:normal;width:38px;background:#3157ff5c;border-top:2px solid var(--lime)}

/* --------------------------------------------------------------------------
   7. Field / tracking table (maintenance + license pages)
   -------------------------------------------------------------------------- */
.board{margin-top:52px;background:#fff;border:1px solid var(--line)}
.board-bar{height:52px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--ink);color:#fff;font-size:9px;letter-spacing:.13em;text-transform:uppercase}
.board-bar em{font-style:normal;color:var(--lime)}
.board-table{display:grid;grid-template-columns:1fr 1.35fr .8fr}
.board-table>span{display:flex;align-items:center;gap:9px;padding:16px 20px;border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.5;color:#5d605c}
.board-table>span.th{background:#f7f7f3;font:700 9px/1 "DM Sans",sans-serif;letter-spacing:.13em;text-transform:uppercase;color:#82857e}
.board-table>span.key{font-weight:600;color:var(--ink)}
.board-table>span.dot:before{content:"";width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--blue)}

/* --------------------------------------------------------------------------
   8. Contact page
   -------------------------------------------------------------------------- */
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.info-grid article{display:flex;flex-direction:column;min-height:212px;padding:28px;background:#fff;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.info-grid span{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#8b8e88}
.info-grid strong{font:400 26px/1.22 "Instrument Serif",serif;margin:18px 0 auto}
.info-grid a,.info-grid p{margin:14px 0 0;font-size:13px;line-height:1.6;color:#6d706b}
.info-grid a{color:var(--blue);font-weight:600}
.map{border:1px solid var(--line);background:#e9e9e2}
.map iframe{display:block;width:100%;height:430px;border:0}
.route-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 44px}
.route-list li{padding:14px 0;border-top:1px solid #ffffff2b;font-size:14px;color:#c9cdcb;display:flex;gap:12px}
.route-list li b{color:#fff;font-weight:600}

/* --------------------------------------------------------------------------
   9. FAQ page
   -------------------------------------------------------------------------- */
.faq-nav{display:flex;flex-wrap:wrap;gap:9px;margin-top:34px}
.faq-nav a{padding:11px 15px;background:#fff;border:1px solid var(--line);font-size:12px;font-weight:600}
.faq-nav a:hover{border-color:var(--blue);color:var(--blue)}
.faq-block{margin-top:56px;scroll-margin-top:100px}
.faq-block>span{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#7c807b}
.faq-block>h2{font:400 34px/1.05 "Instrument Serif",serif;letter-spacing:-.025em;margin:10px 0 22px}

/* --------------------------------------------------------------------------
   10. Closing CTA band
   -------------------------------------------------------------------------- */
.cta-band{position:relative;overflow:hidden;padding:104px 0;background:var(--ink);color:#fff}
.cta-band:before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(#ffffff0f 1px,transparent 1px),linear-gradient(90deg,#ffffff0f 1px,transparent 1px);
  background-size:64px 64px}
.cta-band>.wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:end}
.cta-band h2{font:400 clamp(40px,4.2vw,64px)/1 "Instrument Serif",serif;letter-spacing:-.035em;margin:18px 0 0}
.cta-band h2 em{font-style:normal;color:var(--lime)}
.cta-band p{margin:0 0 24px;color:#a8ada9;line-height:1.75;font-size:16px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.cta.ink{background:var(--ink);color:#fff}
.cta.blue{background:var(--blue);color:#fff}
.cta.edge{border:1px solid var(--ink)}
.cta:focus-visible,.text-action:focus-visible,.faq-nav a:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.crosslinks{display:grid;grid-template-columns:repeat(3,1fr);margin-top:54px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.crosslinks a{display:flex;flex-direction:column;gap:10px;min-height:150px;padding:26px;background:#fff;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.crosslinks a:hover{background:var(--blue);color:#fff}
.crosslinks span{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#8b8e88}
.crosslinks a:hover span{color:#c5cfff}
.crosslinks b{font:400 24px/1.14 "Instrument Serif",serif;margin-top:auto}
.crosslinks em{font-style:normal;font-size:12px;color:#7b7e79}
.crosslinks a:hover em{color:#dfe4ff}

/* --------------------------------------------------------------------------
   11. Default WordPress page / 404 shell
   -------------------------------------------------------------------------- */
.page-body{padding:100px 0}
.page-body .entry{max-width:820px}
.page-body .entry h2{font:400 40px/1.05 "Instrument Serif",serif;margin:44px 0 14px}
.page-body .entry h3{font:400 28px/1.1 "Instrument Serif",serif;margin:32px 0 12px}
.page-body .entry p,.page-body .entry li{line-height:1.8;color:#5f625e;font-size:16px}
.page-body .entry a{color:var(--blue);text-decoration:underline}

/* --------------------------------------------------------------------------
   12. Responsive
   -------------------------------------------------------------------------- */
@media(max-width:1020px){
  .sec{padding:96px 0}
  .sec-head,.split,.split-even,.split-wide{grid-template-columns:1fr;gap:40px}
  .sticky-col{position:static}
  .tiles,.tiles-four,.brandgrid{grid-template-columns:repeat(2,1fr)}
  .statband{grid-template-columns:repeat(2,1fr)}
  .statband div:nth-child(2){border-right:0}
  .statband div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .info-grid,.crosslinks{grid-template-columns:repeat(2,1fr)}
  .cta-band>.wrap{grid-template-columns:1fr;gap:34px;align-items:start}
  .timeline article{grid-template-columns:140px 1fr;gap:26px}
  .steps article{grid-template-columns:48px 1fr;gap:20px}
  .steps article p{grid-column:2}
}
@media(max-width:740px){
  .sec,.sec-tight{padding:72px 0}
  .page-hero{padding:64px 0 60px}
  .page-hero h1{font-size:44px;max-width:none}
  .hero-lead{font-size:16px}
  .hero-meta{gap:22px 30px}
  .sec h2{font-size:40px}
  .tiles,.tiles-two,.tiles-four,.brandgrid,.info-grid,.crosslinks,.route-list{grid-template-columns:1fr}
  .tiles article,.brandgrid article,.info-grid article,.crosslinks a{border-right:0;min-height:0}
  .statband{grid-template-columns:1fr}
  .statband div{border-right:0;border-bottom:1px solid var(--line)}
  .statband div:last-child{border-bottom:0}
  .timeline article{grid-template-columns:1fr;gap:12px}
  .steps article{grid-template-columns:40px 1fr;gap:16px;padding:26px 0}
  .board-table{grid-template-columns:1fr}
  .board-table>span.th{display:none}
  .board-table>span{padding:12px 16px}
  .board-table>span.key{padding-top:20px;border-bottom:0}
  .cta-band{padding:76px 0}
  .map iframe{height:320px}
  .quoterow p{padding:18px 0}
}

/* --------------------------------------------------------------------------
   13. Blog, archive, search, comments
   -------------------------------------------------------------------------- */
.post-list{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.post-list article{display:flex;flex-direction:column;gap:12px;min-height:250px;padding:30px;background:#fff;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.post-date{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#8b8e88}
.post-list h2{font:400 30px/1.1 "Instrument Serif",serif;letter-spacing:-.02em;margin:0}
.post-list h2 a:hover{color:var(--blue)}
.post-list p{margin:0;font-size:14px;line-height:1.65;color:#6d706b}
.post-list .text-action{margin-top:auto;align-self:flex-start}
.no-results{font:400 26px/1.3 "Instrument Serif",serif;color:#5f625e;margin:0}
.pagination{display:flex;flex-wrap:wrap;gap:8px;margin-top:44px}
.pagination .page-numbers{display:grid;place-items:center;min-width:46px;height:46px;padding:0 12px;background:#fff;border:1px solid var(--line);font-size:13px;font-weight:600}
.pagination .page-numbers.current{background:var(--ink);border-color:var(--ink);color:#fff}
.pagination .page-numbers:hover{border-color:var(--blue);color:var(--blue)}
.pagination .screen-reader-text{position:absolute;left:-9999px}
.entry-media{margin:0 0 30px}
.entry-media img{display:block;width:100%;height:auto}
.page-links{display:flex;gap:8px;margin-top:30px;font-size:13px;font-weight:600}
.post-nav{display:flex;justify-content:space-between;gap:24px;padding:0 0 90px;font-size:13px;font-weight:600}
.post-nav a{color:var(--blue)}
.search-form{display:flex;gap:10px}
.search-form label{flex:1}
.search-form input{width:100%;height:52px;padding:0 16px;border:0;border-bottom:1px solid #ffffff40;background:#ffffff14;color:#fff;font:14px "DM Sans",sans-serif;outline:0}
.search-form input::placeholder{color:#9fa4a1}
.search-form input:focus{border-color:var(--lime)}
.search-form button{height:52px;padding:0 22px;border:0;background:var(--lime);color:var(--ink);font:700 13px "DM Sans",sans-serif;cursor:pointer}
.comments{max-width:820px;margin-top:70px;padding-top:40px;border-top:1px solid var(--line)}
.comments-title{font:400 32px/1.05 "Instrument Serif",serif;margin:0 0 26px}
.comment-list,.comment-list ol{list-style:none;margin:0;padding:0}
.comment-list ol{padding-left:32px}
.comment-list li{padding:22px 0;border-bottom:1px solid var(--line)}
.comment-list .fn{font-weight:700;font-style:normal;font-size:14px}
.comment-list .comment-metadata{font-size:11px;color:#8b8e88}
.comment-list p{line-height:1.75;color:#5f625e;font-size:15px}
.comment-respond{margin-top:34px}
.comment-reply-title{font:400 28px/1.05 "Instrument Serif",serif;margin:0 0 18px}
.comment-form{display:grid;gap:16px;max-width:620px}
.comment-form label{font-size:11px;font-weight:700}
.comment-form input:not([type=submit]),.comment-form textarea{width:100%;border:0;border-bottom:1px solid #c7c8c1;background:#f5f5f1;padding:13px;font:14px "DM Sans",sans-serif;outline:0}
.comment-form input:focus,.comment-form textarea:focus{border-color:var(--blue);box-shadow:inset 0 -2px var(--blue)}
.comment-form .submit{height:54px;padding:0 26px;border:0;background:var(--ink);color:#fff;font:700 13px "DM Sans",sans-serif;cursor:pointer;justify-self:start}
.footer-widgets{display:grid;gap:16px}
.footer-widget b{display:block;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#707572;margin-bottom:9px}
.footer-widget ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.footer-widget a{color:#b8bcb9;font-size:12px}
@media(max-width:740px){
  .post-list{grid-template-columns:1fr}
  .post-list article{border-right:0}
  .search-form{flex-direction:column}
  .post-nav{flex-direction:column;gap:12px;padding-bottom:60px}
}