/* Wren & Rye Bakehouse. A concept site by Three Roses Digital. */

@font-face{font-family:"Bricolage Display";src:url("../fonts/bricolage-display.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Bricolage";src:url("../fonts/bricolage-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Bricolage";src:url("../fonts/bricolage-650.woff2") format("woff2");font-weight:650;font-style:normal;font-display:swap}
/* Stand ins, shown only for the moment before the fonts above arrive on a slow connection. Each is a font the device already has,
   resized so its words take up the same room, so nothing jumps when the real font appears. */
@font-face{font-family:"Bricolage Display Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Roboto");font-weight:800;size-adjust:70.7%;ascent-override:131.6%;descent-override:38.2%;line-gap-override:0%}
@font-face{font-family:"Bricolage Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Roboto");font-weight:400;size-adjust:104.5%;ascent-override:89.0%;descent-override:25.8%;line-gap-override:0%}
@font-face{font-family:"Bricolage Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Roboto");font-weight:650;size-adjust:108.4%;ascent-override:85.8%;descent-override:24.9%;line-gap-override:0%}

:root{
  --blue:#1B3F9C;
  --deep:#132C70;
  --butter:#F7D560;
  --cream:#FFF8E1;
  --ink:#161F3D;
  --muted:#4A5370;
  --white:#FFFFFF;
  --line:#D7DEF0;
  --display:"Bricolage Display","Bricolage Display Fallback","Arial Narrow",Impact,sans-serif;
  --text:"Bricolage","Bricolage Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --max:1200px;
  --pad:clamp(20px,4.5vw,56px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;background:var(--white);color-scheme:light;color-scheme:only light}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--text);font-weight:400;font-size:clamp(1rem,.25vw + .95rem,1.1rem);line-height:1.55;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,table,figure{margin:0}
ul{padding:0;list-style:none}
svg{display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--butter);outline-offset:3px;box-shadow:0 0 0 6px var(--ink)}
.skip{position:absolute;left:12px;top:-80px;z-index:10;padding:12px 16px;background:var(--ink);color:var(--white);font-weight:650;text-decoration:none}
.skip:focus{top:12px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wrap{width:min(100% - 2 * var(--pad),var(--max));margin-inline:auto}

.concept-note{padding:9px var(--pad);background:#0D0D0D;color:#FFFFFF;font:400 13px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;text-align:center}
.concept-note a{white-space:nowrap;text-underline-offset:2px}

/* The awning */
.awning{position:relative;height:42px;margin-bottom:17px;background:repeating-linear-gradient(90deg,var(--blue) 0 34px,var(--white) 34px 68px);filter:drop-shadow(0 3px 0 rgba(19,44,112,.2))}
.awning::after{content:"";position:absolute;left:0;right:0;top:100%;height:17px;background:radial-gradient(circle at 17px 0,var(--blue) 0 16.4px,transparent 17px) 0 0/68px 17px repeat-x,radial-gradient(circle at 51px 0,var(--white) 0 16.4px,transparent 17px) 0 0/68px 17px repeat-x}

/* Header */
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding-block:clamp(22px,3vw,34px) 6px}
.logo{display:flex;align-items:center;gap:12px;color:var(--blue);text-decoration:none}
.logo .wren{width:46px;height:auto}
.logo-name{display:block;font-family:var(--display);font-weight:800;font-size:1.95rem;line-height:.9}
.logo-sub{display:block;margin-top:5px;font-weight:650;font-size:.7rem;line-height:1;letter-spacing:.24em;text-transform:uppercase;color:var(--ink)}
.top ul{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px)}
.nav-link a{padding:6px 0;border-bottom:3px solid transparent;font-weight:650;text-decoration:none;transition:border-color .2s}
.nav-link a:hover,.nav-link a:focus-visible{border-bottom-color:var(--butter)}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:.8em 1.6em;border:2px solid var(--blue);border-radius:999px;background:var(--blue);color:var(--white);font-family:var(--text);font-weight:650;font-size:1.02rem;line-height:1;text-decoration:none;white-space:nowrap;transition:background-color .2s,border-color .2s,color .2s}
.btn:hover{border-color:var(--deep);background:var(--deep)}
.btn-line{background:transparent;color:var(--blue)}
.btn-line:hover{background:var(--blue);border-color:var(--blue);color:var(--white)}
.btn-small{min-height:46px;padding:.7em 1.25em;font-size:.96rem}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,76px);align-items:center;padding-block:clamp(30px,5vw,60px) clamp(64px,8vw,112px)}
.hero h1{font-family:var(--display);font-weight:800;font-size:clamp(3.5rem,1rem + 9.4vw,8.6rem);line-height:.86;color:var(--blue);text-wrap:balance}
.hero-lead{max-width:29em;margin-top:clamp(20px,2.4vw,30px);font-size:clamp(1.1rem,.5vw + 1rem,1.32rem);line-height:1.5}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-open{display:flex;align-items:center;gap:10px;margin-top:24px;font-weight:650;font-size:.96rem}
.hero-open::before{content:"";flex:none;width:13px;height:13px;border:3px solid var(--blue);border-radius:50%;background:var(--butter)}

/* The enamel sign */
.sign-wrap{position:relative;justify-self:center;width:min(100%,440px);padding-top:52px}
.sign-wrap::before,.sign-wrap::after{content:"";position:absolute;top:0;width:3px;height:60px;background:var(--ink)}
.sign-wrap::before{left:21%}
.sign-wrap::after{right:21%}
.sign{position:relative;padding:38px 34px 30px;border-radius:24px;background:linear-gradient(158deg,#2A55BF 0%,var(--blue) 42%,#17368B 100%);color:var(--white);box-shadow:0 30px 50px -26px rgba(19,44,112,.7);transform:rotate(-1.3deg)}
.sign::before{content:"";position:absolute;inset:11px;border:2px solid rgba(255,255,255,.92);border-radius:15px;pointer-events:none}
.sign .wren{position:absolute;top:-58px;right:44px;width:78px;height:auto}
.screw{position:absolute;width:11px;height:11px;border-radius:50%;background:#E3E7F0;box-shadow:inset 0 -1.5px 0 rgba(0,0,0,.35)}
.screw::after{content:"";position:absolute;left:1px;right:1px;top:5px;height:1px;background:rgba(22,31,61,.7);transform:rotate(38deg)}
.s1{top:22px;left:22px}.s2{top:22px;right:22px}.s3{bottom:22px;left:22px}.s4{bottom:22px;right:22px}
.sign h2{font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,1.4rem + 2.2vw,3.1rem);line-height:.9;letter-spacing:.015em;text-align:center;text-transform:uppercase}
.sign-sub{margin-top:8px;font-weight:650;font-size:.92rem;color:var(--butter);text-align:center}
.oven{margin-top:20px}
.oven li{display:grid;grid-template-columns:4.3em minmax(0,1fr);column-gap:12px;align-items:baseline;padding:11px 4px;border-top:1px solid rgba(255,255,255,.3)}
.oven .t{font-family:var(--display);font-weight:800;font-size:1.75rem;line-height:1;color:var(--butter)}
.oven .i{font-size:1.02rem;line-height:1.3}

/* Menu */
.menu{padding-block:clamp(64px,8vw,116px);background:var(--cream)}
.sec-title{font-family:var(--display);font-weight:800;font-size:clamp(2.9rem,1rem + 5.6vw,5.6rem);line-height:.88;color:var(--blue)}
.sec-intro{max-width:33em;margin-top:16px;font-size:1.12rem}
.menu-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,60px);margin-top:clamp(34px,4.4vw,60px)}
.menu-col h3{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:4px solid var(--blue);font-family:var(--display);font-weight:800;font-size:2rem;line-height:1;color:var(--ink)}
.menu-col h3 svg{flex:none;width:36px;height:36px;color:var(--blue)}
.items li{display:flex;align-items:baseline;gap:10px;padding:12px 0;border-bottom:1px solid rgba(27,63,156,.16)}
.items .n{font-weight:650}
.items .d{flex:1;min-width:14px;border-bottom:2px dotted rgba(27,63,156,.4);transform:translateY(-5px)}
.items .p{font-weight:650;font-variant-numeric:tabular-nums;color:var(--blue)}

/* Order ahead */
.order{padding-block:clamp(60px,7.5vw,104px);background:var(--blue);color:var(--white)}
.order-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,76px);align-items:center}
.order h2{font-family:var(--display);font-weight:800;font-size:clamp(3rem,1rem + 6.4vw,6.4rem);line-height:.87}
.order h2 .l{display:block}
.order h2 em{font-style:normal;color:var(--butter)}
.order-copy p{max-width:29em;margin-top:20px;font-size:1.14rem;color:#E9EEFC}
.order-card{padding:30px 30px 32px;border-radius:24px;background:var(--white);color:var(--ink);box-shadow:0 30px 50px -28px rgba(8,20,60,.8)}
.order-label{font-weight:650;font-size:.95rem;color:var(--muted)}
.tel{display:block;margin-top:6px;font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,1.6rem + 2.6vw,3.7rem);line-height:1;color:var(--blue);text-decoration:none}
.tel:hover{color:var(--deep)}
.order-or{margin-top:12px}
.order-or a{font-weight:650;color:var(--blue)}
.order-fine{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);font-size:.95rem;color:var(--muted)}

/* Hours and visit */
.visit{padding-block:clamp(64px,8vw,116px)}
.visit-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,76px);align-items:start;margin-top:clamp(30px,4vw,52px)}
.hours{width:100%;border-collapse:collapse;border-top:4px solid var(--blue);font-size:1.08rem}
.hours th,.hours td{padding:15px 0;border-bottom:1px solid var(--line)}
.hours th{font-weight:650;text-align:left}
.hours td{text-align:right;font-variant-numeric:tabular-nums}
.hours .closed td{color:var(--muted)}
.where{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,1.2rem + 1.8vw,2.7rem);line-height:1;color:var(--ink)}
.placeholder{margin-top:18px;padding:20px 22px;border:2px dashed #B4BFE0;border-radius:18px;background:#F7F9FF;color:var(--muted)}
.placeholder strong{display:block;margin-bottom:4px;font-weight:650;color:var(--ink)}

/* Footer */
.foot{padding-block:30px 44px;border-top:4px solid var(--blue);font-size:.94rem;color:var(--muted)}
.foot-grid{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 40px}
.foot-name{font-family:var(--display);font-weight:800;font-size:1.5rem;line-height:1;color:var(--blue)}
.foot a{color:var(--blue);font-weight:650}

@media (max-width:960px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .sign-wrap{margin-top:14px}
  .menu-cols{grid-template-columns:minmax(0,1fr);max-width:560px}
  .order-grid,.visit-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .nav-link{display:none}
  .logo .wren{width:40px}
  .logo-name{font-size:1.7rem}
  .awning{height:34px;background-size:auto}
}
@media (max-width:420px){
  .btn-small{padding-inline:1em;font-size:.9rem}
  .hero-actions .btn{flex:1 1 100%}
  .sign{padding:34px 26px 26px}
  .oven li{grid-template-columns:3.9em minmax(0,1fr)}
}
@media (max-width:359px){
  .top{gap:10px}
  .logo{gap:8px}
  .logo .wren{width:32px}
  .logo-name{font-size:1.4rem}
  .logo-sub{font-size:.6rem;letter-spacing:.2em}
  .btn-small{padding-inline:.8em;font-size:.82rem}
}
@media print{
  .concept-note,.awning,.awning::after,.btn,.sign,.sign::before,.screw,.menu,.order,.order-card,.placeholder{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .sign{box-shadow:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important}
}