/* Fernández de Córdova Company — a printed family document.
   Paper, ink, hairlines. The seal's red appears only in small details. */

@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300;font-display:swap;src:url(fonts/cormorant-garamond-300.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300;font-display:swap;src:url(fonts/cormorant-garamond-300-italic.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/cormorant-garamond-400.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/eb-garamond-400.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/eb-garamond-400-italic.woff2) format("woff2")}

:root{
  --paper:#F6F5F1;
  --ink:#1E1B19;
  --ink-2:#4D4842;
  --ink-3:#6F6A63;
  --rule:#DAD6CC;
  --seal:#A31F1A;
  --crest-gold:#D2B26A;
  --crest-bands:linear-gradient(to bottom,#A31F1A 0 20%,#D2B26A 20% 40%,#A31F1A 40% 60%,#D2B26A 60% 80%,#A31F1A 80% 100%);
  --dark:#1F1615;
  --on-dark:#EDE8DE;
  --on-dark-2:#B1A89C;
  --on-dark-rule:rgba(237,232,222,.16);
  --serif:"EB Garamond","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --display:"Cormorant Garamond","EB Garamond","Iowan Old Style",Georgia,serif;
  --gutter:clamp(22px,5.5vw,88px);
  --maxw:1180px;
  --gap:clamp(24px,5vw,80px);
}

*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink-2);font-family:var(--serif);font-size:1.1875rem;line-height:1.65;font-kerning:normal;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0 0 1.1em}
::selection{background:rgba(163,31,26,.16)}
:focus-visible{outline:2px solid var(--seal);outline-offset:3px}

.wrap{width:100%;max-width:calc(var(--maxw) + 2 * var(--gutter));margin-inline:auto;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:16px;top:16px;z-index:20;background:var(--paper);color:var(--ink);padding:.5rem 1rem}

/* Header */
.site-header{border-bottom:1px solid var(--rule)}
.site-header .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:1rem 2rem;padding-block:clamp(22px,3vw,38px)}
.wordmark{font-size:.8125rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);text-decoration:none;white-space:nowrap}
.wordmark .co{color:var(--ink-3);margin-left:.6em}
.site-nav ul{display:flex;flex-wrap:wrap;gap:.4rem clamp(1.1rem,2.4vw,2.2rem);list-style:none;margin:0;padding:0}
.site-nav a{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--ink-2);padding-block:.35rem;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s ease,color .25s ease}
.site-nav a:hover{color:var(--ink);background-size:100% 1px}
.site-nav a[aria-current="page"]{color:var(--seal);background-size:100% 1px}

/* Type */
.display,h1,h3.title{font-family:var(--display);font-weight:300;color:var(--ink)}
.label{margin:0;padding-top:.55rem;font-size:.75rem;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}
.link{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink-3);padding-bottom:2px;transition:color .25s,border-color .25s}
.link:hover{color:var(--seal);border-color:var(--seal)}

/* Hero */
.hero{padding-block:clamp(72px,13vh,164px) clamp(56px,8vw,112px)}
.hero h1{margin:0 0 clamp(18px,2vw,28px);font-size:clamp(3rem,8.4vw,7.25rem);line-height:.98;letter-spacing:-.02em}
.hero h1 em{font-style:italic;color:var(--seal)}
.hero .lede{margin:0;font-style:italic;font-size:clamp(1.25rem,2.2vw,1.6rem);color:var(--ink-2)}
.hero-foot{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--gap);margin-top:clamp(56px,8vw,112px);padding-top:2rem;border-top:1px solid var(--rule)}
.hero-foot p{max-width:30em;margin:0}
.index{list-style:none;margin:0;padding:0}
.index li{border-bottom:1px solid var(--rule)}
.index li:first-child{margin-top:-.45rem}
.index a{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.7rem 0;text-decoration:none;color:var(--ink);transition:padding .3s ease,color .25s}
.index a:hover{padding-left:.5rem;color:var(--seal)}
.index .name{font-family:var(--display);font-size:1.7rem;font-weight:400;line-height:1.2}
.index .note{font-size:.95rem;color:var(--ink-3);text-align:right}

/* Page head */
.page-head{padding-block:clamp(64px,10vw,140px) clamp(40px,6vw,80px)}
.page-head h1{margin:0 0 clamp(24px,3vw,40px);font-size:clamp(2.6rem,6.2vw,5.25rem);line-height:1.03;letter-spacing:-.018em;max-width:15em;text-wrap:balance}
.lead{margin:0;max-width:30em;font-family:var(--display);font-style:italic;font-weight:300;font-size:clamp(1.45rem,2.6vw,2.1rem);line-height:1.32;color:var(--ink-2)}

/* Sections */
.section{padding-block:clamp(64px,9vw,128px);border-top:1px solid var(--rule)}
.grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:var(--gap)}
.prose p{max-width:34em}
.quote{margin:0 0 clamp(24px,3vw,40px);max-width:15em;font-family:var(--display);font-style:italic;font-weight:300;font-size:clamp(2rem,4.6vw,3.9rem);line-height:1.1;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.quote-lead{margin:0;max-width:24em;font-family:var(--display);font-style:italic;font-weight:300;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.28;color:var(--ink)}

.principles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);margin-top:clamp(32px,4vw,56px)}
.principle{border-top:2px solid var(--crest-gold);padding-top:1.25rem}
.principle h3{margin:0 0 .8rem;font-family:var(--display);font-weight:400;font-size:clamp(1.55rem,2.3vw,1.9rem);line-height:1.2;color:var(--seal)}
.principle p{margin:0}

.rows{list-style:none;margin:0;padding:0}
.row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(16px,3vw,48px);padding-block:1.75rem;border-top:1px solid var(--rule)}
.row:last-child{border-bottom:1px solid var(--rule)}
.row h3{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,2.2vw,1.9rem);line-height:1.2;color:var(--ink)}
.row p{margin:0;max-width:32em}
.more{margin:2rem 0 0}

.kv{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:var(--gap);padding-block:2rem;border-top:1px solid var(--rule);align-items:baseline}
.kv:last-child{border-bottom:1px solid var(--rule)}
.kv .value{margin:0;font-family:var(--display);font-weight:300;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.25;color:var(--ink)}
.kv .value a{text-decoration:none;border-bottom:1px solid var(--rule);transition:color .25s,border-color .25s}
.kv .value a:hover{color:var(--seal);border-color:var(--seal)}

.split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:var(--gap);align-items:start}
.split .prose p{max-width:32em}
.seal{width:clamp(104px,10vw,140px);height:auto;margin-left:auto;opacity:.92}

/* Closing + footer */
.closing{position:relative;background:var(--dark);color:var(--on-dark-2);padding-block:clamp(80px,11vw,152px)}
.closing .label{color:var(--on-dark-2)}
.closing .grid > div > h2{margin:0 0 2rem;font-family:var(--display);font-weight:300;font-size:clamp(2rem,4.6vw,3.8rem);line-height:1.1;letter-spacing:-.01em;color:var(--on-dark)}
.closing .grid > div > h2 em{font-style:italic;color:var(--crest-gold)}
.closing .link{color:var(--on-dark);border-color:var(--on-dark-2)}
.closing .link:hover{color:#fff;border-color:#fff}
.site-footer{background:var(--dark);color:var(--on-dark-2);padding-block:clamp(48px,6vw,80px) 36px}
.closing + .site-footer{border-top:1px solid var(--on-dark-rule)}
.foot-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr);gap:var(--gap)}
.foot-id{display:flex;gap:1.25rem;align-items:flex-start}
.foot-id img{width:44px;height:auto;flex:none}
.foot-id p{margin:0;font-size:1rem;line-height:1.55;color:var(--on-dark)}
.foot-id p span{color:var(--on-dark-2)}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.site-footer a{color:var(--on-dark-2);text-decoration:none;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;transition:color .25s}
.site-footer a:hover{color:#fff}
.site-footer .mail a{font-size:1rem;letter-spacing:0;text-transform:none}
.site-footer .mail p{margin:0 0 .35rem}
.legal{margin:clamp(36px,5vw,64px) 0 0;padding-top:1.25rem;border-top:1px solid var(--on-dark-rule);font-size:.8125rem;color:var(--on-dark-2)}

/* Quiet entrance */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rise{animation:rise .9s cubic-bezier(.2,.6,.2,1) both;animation-delay:var(--d,0s)}
@media (prefers-reduced-motion:reduce){.rise{animation:none}.site-nav a,.index a,.link{transition:none}}

@media (max-width:760px){
  body{font-size:1.125rem}
  .grid,.hero-foot,.split,.kv,.foot-grid,.row{grid-template-columns:minmax(0,1fr)}
  .grid{gap:1.25rem}
  .principles{grid-template-columns:minmax(0,1fr)}
  .row{gap:.6rem}
  .kv{gap:.5rem}
  .seal{margin-left:0;width:104px}
  .index .note{display:none}
  .label{padding-top:0}
}

/* engraving */
.plate{margin:0 0 0 auto;width:clamp(230px,28vw,340px)}
.plate img{display:block;width:100%;height:auto}
@media (max-width:760px){.plate{margin-left:0;width:min(260px,80%)}}

@media (max-width:1000px) and (min-width:761px){.principles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* crest bands: echo of the shield */
.label::after{content:"";display:block;width:28px;height:1px;margin-top:.9rem;background:var(--seal)}
.closing .label::after{background:var(--crest-gold)}
.crown-mark{display:inline-block;width:32px;height:auto;margin-right:.85rem;vertical-align:-.12em}
.row .src{margin-top:.65rem;font-size:.9rem;color:var(--ink-2,#5b5650)}