/* ==========================================================================
   Swisshub Corp Limited — design system
   Type:  Newsreader (display) · IBM Plex Sans (text) · IBM Plex Mono (labels)
   ========================================================================== */

:root{
  /* Core palette */
  --ink:        #10151A;
  --ink-soft:   #1A2127;
  --ink-2:      #232C33;
  --paper:      #F7F5F2;
  --paper-alt:  #EFEBE5;
  --paper-3:    #E4DFD7;
  --brass:      #A97C3F;
  --brass-br:   #C9A262;
  --muted:      #5E686F;
  --muted-dk:   #98A1A8;
  --line:       #DCD6CD;
  --line-dk:    rgba(247,245,242,.16);

  /* Type */
  --display: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Rhythm */
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --maxw: 1320px;
  --measure: 62ch;
  --sec-y: clamp(4.5rem, 10vw, 9.5rem);

  /* Motion */
  --ease: cubic-bezier(.2,.7,.25,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:6rem;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem,.96rem + .18vw,1.0625rem);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }

::selection{ background:var(--brass); color:#fff; }

:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--paper);
  padding:.9rem 1.4rem; font-family:var(--mono); font-size:.75rem;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
}
.skip:focus{ left:1rem; top:1rem; }

/* --------------------------------------------------------------- Typography */

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;
  letter-spacing:-.018em;
  line-height:1.06;
  margin:0;
  text-wrap:balance;
}

.h-xl{ font-size:clamp(2.6rem,1.5rem + 5.1vw,5.3rem); line-height:1.02; letter-spacing:-.03em; }
.h-lg{ font-size:clamp(2rem,1.35rem + 3vw,3.6rem); line-height:1.06; letter-spacing:-.024em; }
.h-md{ font-size:clamp(1.55rem,1.22rem + 1.55vw,2.45rem); line-height:1.12; letter-spacing:-.02em; }
.h-sm{ font-size:clamp(1.2rem,1.08rem + .65vw,1.55rem); line-height:1.22; letter-spacing:-.015em; }

p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

.lede{
  font-size:clamp(1.0625rem,1rem + .42vw,1.28rem);
  line-height:1.62;
  color:var(--ink-soft);
  max-width:var(--measure);
}
.body-muted{ color:var(--muted); max-width:var(--measure); }
.measure{ max-width:var(--measure); }

em,.italic{ font-style:italic; }
strong{ font-weight:600; }

/* Mono eyebrow / label */
.label{
  font-family:var(--mono);
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:.75rem;
  margin:0 0 1.5rem;
}
.label::before{
  content:"";
  width:1.75rem; height:1px;
  background:var(--brass);
  flex:none;
}
.label--plain::before{ display:none; }

.idx{
  font-family:var(--mono);
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.14em;
  color:var(--brass);
  font-variant-numeric:tabular-nums;
}

/* ------------------------------------------------------------------ Layout */

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.wrap--narrow{ max-width:920px; }

.section{ padding-block:var(--sec-y); position:relative; }
.section--tight{ padding-block:clamp(3rem,6vw,5.5rem); }

.ink-panel{
  background:var(--ink);
  color:var(--paper);
}
.ink-panel .label{ color:var(--muted-dk); }
.ink-panel .label::before{ background:var(--brass-br); }
.ink-panel .lede{ color:#D5D9DC; }
.ink-panel .body-muted{ color:#A8B0B6; }
.ink-panel .idx{ color:var(--brass-br); }

.alt-panel{ background:var(--paper-alt); }

.rule{ height:1px; background:var(--line); border:0; margin:0; }
.ink-panel .rule{ background:var(--line-dk); }

/* Faint vertical grid */
.gridlines{ position:relative; }
.gridlines > *{ position:relative; z-index:1; }
.gridlines::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background-image:linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:calc(100% / 6) 100%;
  opacity:.55;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 50%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 50%,transparent 100%);
}
.ink-panel.gridlines::before{ background-image:linear-gradient(90deg, var(--line-dk) 1px, transparent 1px); opacity:1; }

/* ------------------------------------------------------------------ Links */

a{ color:inherit; }

.lnk{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-family:var(--mono);
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
  padding-block:.45rem;
  position:relative;
}
.lnk::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:1px;
  background:currentColor;
  transform:scaleX(1);
  transform-origin:left;
  transition:transform .55s var(--ease-out);
}
.lnk:hover::after{ transform:scaleX(0); transform-origin:right; }
.lnk .arw{ transition:transform .45s var(--ease-out); flex:none; }
.lnk:hover .arw{ transform:translateX(5px); }
.lnk--brass{ color:var(--brass); }
.ink-panel .lnk{ color:var(--paper); }
.ink-panel .lnk--brass{ color:var(--brass-br); }

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  font-family:var(--mono);
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-decoration:none;
  padding:1.05rem 1.9rem;
  border:1px solid var(--ink);
  background:var(--ink);
  color:var(--paper);
  position:relative;
  overflow:hidden;
  transition:color .45s var(--ease), border-color .45s var(--ease);
  cursor:pointer;
}
.btn > *{ position:relative; z-index:1; }
.btn::before{
  content:"";
  position:absolute; inset:0;
  background:var(--brass);
  transform:translateY(101%);
  transition:transform .55s var(--ease-out);
}
.btn:hover::before{ transform:translateY(0); }
.btn:hover{ border-color:var(--brass); color:#fff; }
.btn .arw{ transition:transform .45s var(--ease-out); flex:none; }
.btn:hover .arw{ transform:translateX(5px); }

.btn--ghost{
  background:transparent;
  color:var(--ink);
  border-color:var(--line);
}
.btn--ghost:hover{ color:#fff; border-color:var(--brass); }
.ink-panel .btn--ghost{ color:var(--paper); border-color:var(--line-dk); }
.ink-panel .btn--solid{ background:var(--paper); color:var(--ink); border-color:var(--paper); }

.btn-row{ display:flex; flex-wrap:wrap; gap:1rem 1.75rem; align-items:center; }

/* ----------------------------------------------------------------- Header */

.site-head{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  transition:border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.site-head::before{
  content:"";
  position:absolute; inset:0;
  background:var(--paper);
  opacity:0;
  transition:opacity .4s var(--ease);
}
.site-head.is-stuck::before{
  opacity:.97;
  backdrop-filter:saturate(150%) blur(12px);
  -webkit-backdrop-filter:saturate(150%) blur(12px);
}
.site-head.is-stuck{ border-bottom-color:var(--line); }

.head-inner{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  height:5.75rem;
  transition:height .4s var(--ease);
}
.site-head.is-stuck .head-inner{ height:4.5rem; }

.brand{ display:flex; align-items:center; gap:.85rem; text-decoration:none; flex:none; }
.brand-mark{ width:2.1rem; height:2.1rem; flex:none; transition:width .4s var(--ease), height .4s var(--ease); }
.site-head.is-stuck .brand-mark{ width:1.8rem; height:1.8rem; }
.brand-mark .mk-a{ fill:var(--ink); }
.brand-mark .mk-b{ fill:var(--brass); }
.brand-type{ display:flex; flex-direction:column; line-height:1; }
.brand-name{
  font-family:var(--sans);
  font-weight:600;
  font-size:1.0625rem;
  letter-spacing:.095em;
  color:var(--ink);
}
.brand-sub{
  font-family:var(--mono);
  font-size:.5625rem;
  font-weight:500;
  letter-spacing:.26em;
  color:var(--muted);
  margin-top:.32rem;
}

.nav{ display:flex; align-items:center; gap:2.1rem; }
.nav > .btn{ display:none; }  /* duplicate CTA, shown only in the mobile drawer */
.nav a{
  font-size:.875rem;
  font-weight:400;
  text-decoration:none;
  color:var(--ink-soft);
  position:relative;
  padding-block:.35rem;
  transition:color .3s var(--ease);
}
.nav a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:100%; height:1px;
  background:var(--brass);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .45s var(--ease-out);
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after,
.nav a[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; }
.nav a[aria-current="page"]{ color:var(--ink); }

.head-cta{ display:flex; align-items:center; gap:1.5rem; }
.head-cta .btn{ padding:.82rem 1.35rem; font-size:.6875rem; }

/* Mobile nav */
.nav-toggle{
  display:none;
  width:2.9rem; height:2.9rem;
  border:1px solid var(--line);
  background:transparent;
  cursor:pointer;
  align-items:center; justify-content:center;
  flex-direction:column; gap:5px;
  padding:0;
}
.nav-toggle span{
  display:block; width:17px; height:1.5px; background:var(--ink);
  transition:transform .4s var(--ease), opacity .3s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ------------------------------------------------------------------ Media */

.frame{
  position:relative;
  overflow:hidden;
  background:var(--paper-3);
}
.frame img{
  width:100%; height:100%;
  object-fit:cover;
  filter:saturate(.6) contrast(1.05) brightness(.97);
  transform:scale(1.02);
  transition:transform 1.3s var(--ease-out), filter 1.1s var(--ease);
}
.frame::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(150deg, rgba(16,21,26,.32), rgba(169,124,63,.18));
  mix-blend-mode:multiply;
  pointer-events:none;
}
.frame:hover img{ transform:scale(1.06); filter:saturate(.74) contrast(1.05) brightness(1); }

.frame--tall{ aspect-ratio:3/4.1; }
.frame--wide{ aspect-ratio:16/10; }
.frame--sq{ aspect-ratio:1/1; }
.frame--band{ aspect-ratio:21/7; }

.cap{
  font-family:var(--mono);
  font-size:.625rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:.9rem;
  display:block;
}

/* ----------------------------------------------------------------- Footer */

.site-foot{ background:var(--ink); color:var(--paper); padding-top:clamp(3.5rem,7vw,6rem); }
.foot-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1.25fr;
  gap:clamp(2rem,4vw,3.5rem);
  padding-bottom:3.5rem;
}
.foot-brand .brand-name{ color:var(--paper); }
.foot-brand .brand-sub{ color:var(--muted-dk); }
.foot-brand .brand-mark .mk-a{ fill:var(--paper); }
.foot-brand .brand-mark .mk-b{ fill:var(--brass-br); }
.foot-blurb{ color:#9AA3A9; font-size:.9375rem; margin-top:1.6rem; max-width:36ch; }

.foot-h{
  font-family:var(--mono);
  font-size:.6875rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--brass-br);
  margin:0 0 1.35rem;
  font-weight:500;
}
.foot-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.8rem; }
.foot-list a{ text-decoration:none; color:#C3C9CD; font-size:.9375rem; transition:color .3s var(--ease); }
.foot-list a:hover{ color:var(--brass-br); }
.foot-addr{ font-style:normal; color:#C3C9CD; font-size:.9375rem; line-height:1.8; }
.foot-addr a{ color:#C3C9CD; text-decoration:none; border-bottom:1px solid rgba(201,162,98,.45); transition:color .3s var(--ease), border-color .3s var(--ease); }
.foot-addr a:hover{ color:var(--brass-br); border-color:var(--brass-br); }

.foot-base{
  border-top:1px solid var(--line-dk);
  padding-block:1.75rem 2.25rem;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:1rem;
  font-family:var(--mono);
  font-size:.6875rem;
  letter-spacing:.09em;
  color:#79838A;
}
.foot-base a{ color:#79838A; text-decoration:none; transition:color .3s var(--ease); }
.foot-base a:hover{ color:var(--brass-br); }
.foot-base-links{ display:flex; gap:1.75rem; flex-wrap:wrap; }